Flexbox для интерфейсов All The Way: Треки Case Study

дней поплавков и маржи обмана, наконец, позади us, А CSS предоставляет разработчикам новых и улучшенных свойств идеально подходит для тех деликатных макетов.

Макет функции, такие как вертикальное выравнивание, равномерно распределенной расстояния, контроля источником порядка и других моделей, таких как “липкие” нижние колонтитулы довольно легко, чтобы достичь с flexbox1.

В этой статье мы обсудим, шаблоны хорошо подходят для flexbox, С помощью интерфейса с Tracks2приложение, которое также использует принципы атомных дизайна.Я поделюсь, как flexbox оказались полезными и обратите внимание на подводные камни сопряжения ее с конкретными особенностями компоновки.Мы будем смотреть на тех моделей, которые вызвали озабоченность, представить предложения для откаты и поделиться дополнительные тактику, чтобы начать использовать это свойство CSS сразу .

Флекси атомной компоненты Link

Подход к интерфейсу дорожек ‘начал с каждый кусок исследуется как единичный случай, используя принципы, изложенные по Брэд Frost3,Там также документально биты развития и интеграции на Dribbble4для просмотра инсайдеров .

Философия конструкции атомной можно рассматривать как небольшие LEGO-как куски, построенных вместе, чтобы сформировать больший характерный кусок интерфейса.Научные термины, такие как организма, атома и молекулы используются для того, чтобы разработчики классифицировать части интерфейса для того, чтобы получить более глубокое понимание каждой части целого.Этот тип классификации создает возможность для идентификации этих patternsи предотвращает внешние влияния, такие как сетки, цветов и расстояние от разрушения цели, которая заключается в идентификации модели.Сборка из микроскопическом уровне позволяет для более широкого распространения этих частей в интерфейсе .

Figure 15Рисунок 1. Эти приложения карты, используемые для отображения данных были построены с использованием принципов атомных дизайна.Можете ли вы угадать, какие части использовать flexbox?(Просмотр большой version6)

Если вы хотите, чтобы погрузиться глубже в теории атомного дизайн, прочтите Брэда post7, Который обсуждает его философию в более подробно.Я также предлагаю проверить его бронирование на subject8.

Figure 29Рисунок 2. Основной интерфейс приложения Tracks, которая в полной мере использует flexbox и конструкции атомной.( Просмотр большой version __33 | 10 )

Проекты интерфейса были переданы в виде набора InVision11привилегии, документирование потока и пользовательский интерфейс.Во время первоначальной проверки интерфейса, я начал определении регионов, где flexbox бы быть полезным.Я также решил использовать flexbox для макетов страниц с использованием шаблонов, таких как известный “боковой панели слева, основное содержание вправо” образов, которые наиболее часто реализуется с поплавками .

Один приветствуется аспект модернизации Tracks, что объем проекта требуется Internet Explorer (IE), 10, Android 4.1 и IOS 7.Это была хорошая новость, потому что они имеют большую поддержку flexbox12, С соответствующими префиксами.Даже если поддержка намного более стабильна в эти дни, операционные системы до, скажем, 4.1 для Android требует откаты.Что бы fallbackвыглядеть в случае, когда поддержка не существует?Разработчики, использующие Modernizr можно ориентировать эти браузеры помощью .no-flexboxкласс и служить более стабильную систему с поддержкой макета ( альтернативно можно использовать CSS художественных запросов с @ supports 13 ., которые хорошо поддерживается, слишком Ред .).Например:

<ul class="flexbox-target">
  <li>…</li>
  <li>…</li>
  <li>…</li>
</ul>
html.flexbox ul.flexbox-target,
html.no-js ul.flexbox-target {
  display: flex;
  flex-direction: row;
}

html.no-flexbox ul.flexbox-target li,
html.no-js ul.flexbox-target li {
  display: inline-block; /* Could also use a float-positioned-layout system instead */
}

Если поддержка flexbox не совсем верно, мы пойдем вперед и использовать display: inline-blockдля макета запасного.Мы также добавить no-jsк декларации должны обязательно JavaScript.Каскадированиехарактер CSS будет на месте, если flexbox не поддерживается, даже с JavaScript выходной или сбоев загрузки.Flexbox может сосуществовать с floatи display: tableи относительное позиционирование, и браузеры, поддерживающие flexbox будет приоритеты flexbox над другими определениями, в то время как браузеры, не поддерживающие flexbox будет игнорировать свойства flexbox и изящно вернуться к хорошей ol’Механизмы макет CSS .

Как и все, что трудный выбор будет зависеть от объема, аналитика и бюджета проекта.Мой золотое правило, чтобы всегда сделать выбор, который делает самые чувства для проекта .

Встроенные шаблоны Link

Навигационные componentsоказался чрезвычайно ценным с flexbox, не только для облегчения осуществления, но также для сокращения сессий развития.Встроенные шаблоны, которые были известны, чтобы потреблять много времени разработчиков теперь могут произойти в течение нескольких минут с flexbox.Если вы имели удовольствие развивается этот вид узора до IE 9, то вы будете знать, разочарование .

Figure 314Рисунок 3. Этот админ навигации использует шаблон макета встроенный, с навигационные элементы по центру вертикально.( Просмотр большой version __22 | | 15__5 )

Шаблон разметки для администратора навигации состоит из navТег обертывания ряд якорей.Вот пример этого шаблона в HTML:

<header role="banner">
  <nav role="navigation">
    <a href="pipeline.html">Back to pipeline</a>
    <a href="account.html">Account</a>
    <a href="users.html">Users</a>
    <a href="export.html">Export</a>
  </nav>
</header>

А вот родственные стили:

nav[role="navigation"] {
  display: flex;
  align-items: center; /* Center navigation items vertically */
}

nav[role="navigation"] a {
  display: inline-block; /* To avoid layout issues for inline elements with the order property in IE 10 */
}

nav[role="navigation"] a[href="pipeline.html"] {
  flex: 1;
}

CSS-требуется только минимально разметке.Обратите внимание, что inline-blockзначение уделяется якорей.Эта декларация решает любые будущие головные боли в IE 10, если вы были, чтобы изменить последовательность элементов с orderимущество.Было также обнаружено, что любая обивка или маржи дано направить детей в гибкой емкости определяется с flexнедвижимость вызывает вопросы макета в IE 10. Хорошая идея, чтобы ABC (всегда проверять) во всех браузерах и платформах .

Figure 416Рисунок 4. Этот заголовок навигации рисунок с центром логотипом часто видели в Интернете и flexbox одобрены.(Просмотр большой version17)

Общая рядный выше шаблон обычно реализуется с не-семантической разметки.Он больше не требует этот вид повозка, запряженная волами теперь, flexbox вариант .

Макет состоит из набора элементов меню слева, расположенная в центре логотипа и дополнительных элементов справа.Разметка для этой модели заключается в следующем:

<header class="pipeline-header" role="banner">
  <a href="pipeline.html" class="pipeline-logo">… </a>

  <nav class="pipeline-nav" role="navigation">…</nav>

  <form class="pipeline-search" role="form">…</form>

  <a href="#menu">…</a>
</header>

Flexbox может снизить потребность в HTML hackeryи может поддерживать семантику, а разметка демонстрирует.Поддержание семантику важно, потому что HTML будет иметь больше шансов быть многоразовые в будущем, среди многих других причин, выходящих за рамки этого обсуждения .

Перед flexbox существовало, разработчики применяется подходы, такие как display: inline-blockи даже float: leftдля достижения встроенные макеты.Теперь, flexbox не является жизнеспособным вариантом, разработчики больше не вынуждены следовать плохие практики ради эстетики.CSS-требуется не так, как администратор краткое навигации шаблона в рисунке 3, но она по-прежнему быстрее в реализации, чем методы, упомянутые ранее .

.pipeline-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.pipeline-header > a {
  display: inline-block; /* IE 10 doesn't recognize order, so we do this to avoid odd layouts there. */
}

.pipeline-logo {
  flex: 1;
  order: 2;
  text-align: center;
}

.pipeline-nav {
  flex: 1.25;
  order: 1;
}

.pipeline-search {
  flex: 1;
  order: 3;
}

a[href="#menu"] {
  order: 4;
}

При использовании flexbox с рисунком на рисунке 3, помните, что последовательность источника может быть изменен.Если логотип заголовка требует сдвиг в позиции, делать это безболезненно с orderимущество.Будьте внимательны, что Порядок источник всегда важно для accessibilityи несколько спорным, когда дело доходит до flexbox;особенно с различной доступности implementations18во всех браузерах.Все браузеры и читатели экрана использовать порядок исходного кода, а не визуальный порядок определяется CSS, для клавиатуры навигации .

Figure 519Рисунок 5. Нормальное написано поток в разметке и вынесли в браузере (слева), и последовательность изменилась с flexbox без корректировки разметки (справа).( Просмотр большой version __39 | 20 )

Приведенный ниже код для вышеуказанной планировки.Разметка никогда не изменяется, чтобы изменить порядок появления .

<div class="container">
  <header role="banner"></header>
  <main role="main"></main>
  <footer role="contentinfo"></footer>
</div>

Вот CSS используется для изменения порядка для диаграммы в правой части рисунка 5 .

.container {
  display: flex;
  flex-direction: columns; /* row is the default value */
}

header {
  order: 2;
}

main {
  order: 3;
}

footer {
  order: 1;
}

Этот тип планировки не только для навигацииили.Вы, возможно, видели образец в нижние колонтитулы, а .

Figure 621Рисунок 6. Та же картина, что мы видели, используемого снова и снова для навигации используется здесь колонтитула.( Просмотр большой version 22 )

При использовании этого шаблона, рассмотрим, как содержание может заполнить контейнер и потреблять пространство.Если содержание растут от центра к краям?Что делать, если содержание толкнул вниз?Как это повлияет другие элементы макета?Задайте эти вопросы в каждом проекте, прежде чем приступить реализации.Рассмотрение для навигации клавиатура для того, как уже упоминалось, является столь же важным для конечных пользователей .

Встроенный Форма Входы Link

Формы могут быть кошмаром для разработчиков, особенно, когда они тесно связаны с замысловатой структуры сетки, сделанные в Photoshop.К “встроенный ярлык” образец, как я буду ссылаться на него, как много из основных продуктов в нашей отрасли, как Fender Stratocaster является рок-музыка .

Figure 723Рисунок 7. Встроенные этикетки и входы еще одно замечательное место, чтобы использовать flexbox.Но будьте осторожны, с тем, как текст метки обертывания или толкает в зависимости от длины текста.( Просмотр большой version __37 | 24 )

Как уже упоминалось в предыдущем разделе, решить, как ваш контент будет течь и занимают пространство контейнера, когда браузер изменяет размеры или когда динамический контент будет вставлен .

Figure 825Рисунок 8. Решите, как содержание будет расширяться.Слева, дисплей стол вертикально на середине.Справа, flexbox выравнивает элементы в центре.(Просмотр большой version26)

Эти скриншоты явно указывают на ошибки flexbox может представить с динамическим или длительного content,Эффект в изображении справа то, что я называю “Центр толчок”, что означает содержание отталкивается от центра к краям вдоль оси х и у .

Вот разметка для шаблона рядный этикетки на рисунке 8 .

<div class="form-group">
  <label>…</label>
  <select>…</select>
</div>

Решение этой проблемы в этом случае является использование отображения таблицы, чтобы лучше контролировать длинный текст.Это позволит содержание течь вниз, а нажатием от центра из .

.form-group {
  display: flex;
}

.form-group label {
  display: table;
  vertical-align: middle;
}

.form-group input {
  flex: 1;
}

Смешивание и соответствие flexbox со столом является большим метод и тот, который я рекомендую дальнейшего изучения с.При смешивании и согласование, всегда проверяйте по тестовой среде, чтобы поймать макета ошибки рано .

Figure 927Рисунок 9. встроенных входов с кнопками, равные высоты входов дать баланс в конструкции.( Просмотр большой version __29 | 28 )

Я видел много входов поиска с этим типом рисунка.Это чрезвычайно гибкий образец, который может быть повторно через множество шаблонов.Конечно, CSS, что может помешать, например, контекстно-специфические свойства, не связанных с общей картины, будут храниться отдельно .

HTML-требуется характерна и включает в себя окружающие divопределить структуру flexbox .

Вот наш HTML:

<div class="form-group">
  <input type="text" placeholder="Add a note…">
  <button>Add</button>
</div>

И УС:

.form-group {
  display: flex;
}

.form-group input {
  flex: 1;
}
Figure 1029Рисунок 10. регион в раскрывающемся меню подсвечивается при помощи некоторых быстрых тактику flexbox для легкого позиционирования.( Просмотр большой version __58 | 30 )

Макет в раскрывающемся меню состоит из колонке слева, содержащийвертикально в центре предметы, расположенные в линию, и список элементов справа, где каждый элемент списка лежит на его собственной линии .

Figure 1131Рисунок 11. Меню для этого основного интерфейса была построена с использованием только flexbox для макета.( Просмотр большой version 32 )

Разметка для данного навигационного меню используется следующий HTML как его структурного фонда .

<nav class="menu">
  <div class="menu__options">
    <a href="export-data.html">Export</a>
    <a href="help.html">Get Help</a>
  </div>

  <div class="menu__items">
    <a href="account.html">Account</a>
    <a href="preferences.html">Preferences</a>
    <a href="users.html">Users</a>
    <a href="payment.html">Payments</a>
    <a href="logout.html">Logout</a>
  </div>
</nav>

CSS-требуется худой и легко читать, тоже именно так, как разработчики, как это .

.menu {
  display: flex;
}

.menu__options {
  display: flex;
  align-items: center;
}

.menu__items {
  display: flex;
  flex-direction: column;
}

В течение всего нескольких строк кода, верстка блаженство достигается.Кроме того, он отделен от любой структур …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров

Comments are closed.