Матвей Земсков

Заметки веб-мастера

Вторник, 26 июля 2016 16:42

Flexbox Patterns: замечательные элементы пользовательского интерфейса на CSS Flexbox

Оцените материал
(0 голосов)

CSS Flexbox довольно часто используется разработчиками в последнее время, потому что позволяет с легкостью реализовать то, на что раньше уходило много сил и времени. Например, вертикальное выравнивание элементов, равномерные расстояния между ними, «подвал», зафиксированный внизу страницы — это лишь некоторые моменты, которые до Flexbox было довольно трудно сверстать.

Flexbox Patterns

Flexbox — мощный инструмент, состоящий из множества новых концепций, которые могут сделать его трудным для понимания и первоначального использования.

Большим плюсом CSS Flexbox является то, что его можно использовать не только для верстки макетов сайта. Также он будет очень полезен при разработке пользовательского интерфейса вашего веб-приложения.

Для того, чтобы облегчить знакомство с Flexbox, был создан набор интерактивных элементов пользовательского интерфейса под названием Flexbox Patterns. На сайте проекта вы сможете рассмотреть их подробнее. Примеры расположены на странице в следующем порядке: от простых к более сложным. В набор входят табы, сайдбары, отцентрированные блоки, а также некоторых других элементы интерфейса.

Автором этого проекта является CJ Cenizal

У проекта есть страница на GitHub, с которой можно скачать архив, содержащий Flexbox Patterns.

В заключении заметки хотелось бы обратить внимание читателя на то, что автор не рекомендует использовать код непосредственно из примеров в ваших реальных проектах, потому что он был создан в ознакомительных целях и может не удовлетворять требованиям доступности для людей с ограниченными возможностями. В нем не используются семантические HTML5-элементы, атрибуты role и тп.

Прочитано 487 раз
Другие материалы в этой категории:
Фиксируем «подвал» внизу страницы с помощью Flexbox

Добавить комментарий


Защитный код
Обновить

Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию: