Почему стоит использовать CSS фреймворки вместо Grid Layout плюсы и минусы

Содержание материала:

ТИПИЧНЫЙ ВЕРСТАЛЬЩИК

Всем привет, меня зовут Анна Блок и сегодня мы поговорим о разнице между Float, Flexbox и Grid. Также разберем, когда их уместнее всего использовать в CSS и возможно ли смешивать эти свойства для позиционирования элементов?

Начнем с определений и короткой истории.

Float

Float — это свойство, которое позволяет определить по какой стороне будет выравниваться элемент. При этом остальные элементы будут обтекать объект со свойством Float с других его сторон. Используя float у вас есть возможность выбрать две стороны выравнивания — с правой стороны (right), либо с левой (left). Чтобы отменить позиционирование, для этого достаточно прописать float: none;

Уместнее всего использовать float для обтекания картинки текстом. Однако, не так давно было принято верстать практически все на флоатах. Те, кто верстает уже более 3-х лет, наверняка, помнят, довольно распространенный метод верстки меню. Чтобы установить пункты меню в линию, каждому li присваивался float left или right для того, чтобы они шли друг за другом.

Пример:

В чем минус использования Float?

Как я и сказала, все соседние блоки, стремятся стать обтекаемыми. Следовательно, чтобы избавиться от этого, требуется постоянно создавать лишний элемент в документе, которому бы присваивалось свойство clear: both;

Давайте рассмотрим на примере.

Здесь мы видим блоки, которые следуют друг за другом. Но у нас стоит задача: последний блок должен начинаться со следующей строчки. Чтобы это условие выполнялось, необходимо добавить блок с классом clear и стиль clear: both;

Flexbox CSS

На смену всем известным флоатам приходит Flexbox CSS. Он не был так широко известен, несмотря на то, что появился еще в 2011 году.

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

Сейчас на данный момент ситуация кардинально изменилась. Flexbox CSS поддерживается всеми современными браузерами и не только. Верстальщики, которые перешли с флоатов на флексы почувствовали, что верстать стало гораздо быстрее и, что самое главное, приятнее.

В чем преимущества Flex?

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

Давайте рассмотрим пример:

В этом примере мы видим родительский блок с классом box и дочерние элементы, которые окрашены в зеленый цвет и имеют ширину/высоту 100px. Чтобы поставить их в ряд, необходимо всего лишь установить display:flex;

Если нам необходимо установить блоки по центру, то мы можем установить justify-content:center здесь же. В случае с float, такая реализация была бы невозможна (без костылей).

Если наша цель растянуть один единственный блок и заполнить его по всей ширине контента, то мы можем добавить класс child для конкретного блока, например, четвертого и установить для него свойство flex-grow: 1;

Чтобы ознакомиться со всеми свойствами Flexbox CSS, вы можете воспользоваться наглядной интерактивной шпаргалкой по всем свойствам. Обязательно держите ее под рукой, когда будете верстать сайт.

Grid CSS

Теперь давайте поговорим о новейшем направлении в верстке — Grid CSS. На мой взгляд, это результат переработоки всего того, с чем веб-разработчики встречались в течении 15-ти лет. Многие задачи решались методами, которые не предназначались для этого.

Напомню, float используют для фиксирования и обтекания соседнего блока, однако это не мешало в своё время использовать это свойство для верстки всего сайта. Можно сказать, что раньше намеренно пользовались костылями, потому что другой альтернативы не было.

Grid CSS предоставляет новые возможности:

  • Раскладка учитывает горизонтальное и вертикальное пространство одновременно;
  • Можно смело изменять раскладку, не затрагивая разметку;
  • Требуется минимальное количество медиазапросов, чтобы адаптироваться по свободному пространству.

Flex CSS в свою очередь не может располагать элементы одновременно вдоль нескольких осей. С ним вы можете работать только в одномерном пространстве, а с Grid CSS — в двухмерном.

Если вы только начинаете своё изучение этого направления, то я рекомендую пройти игру Grid CSS Garden. А для вёрстки сайтов используйте интерактивную шпаргалку по Grid.

Давайте рассмотрим простой пример использования Grid:

В этом примере мы видим простейшую разметку, где есть родительский блок с классом grid и дочерние — с классом grid-item. Для реализации такой сетки нам потребовалось использовать 4 свойства из раздела Grid CSS.

Вместо заключения

Итак, мы выяснили, в каких случаях уместнее использовать Float, Flexbox и Grid, но возможно ли их смешение? Давайте разберемся.

Если вы начали, например, использовать display:flex , то конечно же писать там свойства, которые относятся к Grid неуместно. Это неправильно.

Однако, если в одной части страницы блок выполнен полностью из Flexbox, а далее вам потребуется в следующем блоке сделать картинку, которая будет обрамляться текстом, то будет правильным использовать float.

Пример:

Не забывай задавать свои вопросы по вёрстке или фронтенд разработке у профессионалов на FrontendHelp в режиме онлайн.

Почему CSS Gr >

Когда-то давно я писал про необычный сервис , представляющей собой ИИ для создания сайта. Судя по текущим результатам, получилось у них «так себе», особенно учитывая заявленный прайс. в этом плане поэффективнее будут.

Сегодня же хочу поговорить о похожей по названию, но совсем другой по сути «технологии» — CSS Grid! Пост состоит из нескольких частей:

Данный подход в построении макетов позволяет легко создавать достаточно гибкие сетки сайтов с помощью CSS. В будущем он, наверняка, будет использоваться повсеместно. Если я правильно понимаю, отлично подойдет для тех же задач, что и Flexbox, но в отличии от него может одновременно работать в двумерных измерениях (столбцах и строках). Ниже предлагаю перевод статьи , что является неким вступлением в тему и содержит простые познавательные примеры. Внимание! Автор заметки проводит в декабре бесплатный(!) курс по CSS Grid, если хотите, отправляйте запрос на его Email.

Также на просторах интернета нашел полезное видео по теме. Возможно, кому-то проще воспринимать информацию так:

Введение в CSS Grid

В текущем году эта технология получила встроенную поддержку в Chrome, FF, Safari, поэтому вполне вероятно, в недалеком будущем станет популярными инструментом. Но пока что нужно не забывать позаботиться об устаревших и отстающих веб-браузерах.

Самая простая сетка

Здесь 2 основных объекта:

  • родительский / wrapper (оборачивающий все внутренние, составляющие его блоки);
  • дочерние / items (сами элементы).

Вот простейшая конструкция:

Однако сразу после этого ничего особо не поменяется, так как не определен формат отображения. Вы увидите 6 DIV’ов идущих друг после друга.

Колонки и строки

Чтобы сделать вашу сетку двумерной нужно указать параметры строк и колонок — используем опции grid-template-row и grid-template-colum соответственно:

.wrapper

Поскольку для колонок имеется три значения, то их будет генерироваться такое же число, следовательно, рядков — только 2. Цифры в пикселях задают в первом случае ширину элементов (по 100px), во втором — высоту (50px).

Вот еще один пример, который поможет лучше понять принцип работы:

.wrapper

Отобразится следующая картинка:

Расположение и размеры

С этой функцией вы получите реально очень мощные возможности по созданию сеток сайтов. Допустим, у нас имеется размер 3х3:

.wrapper

Если в HTML коде, как в нашем примере, 6 DIV элементов (см. в самом начале), то в данном случае на сайте отобразится только 2 ряда, третий временно не будет заполнен. Однако, когда мы начнем применять разные параметры для позиции и размеров блоков — grid-columnand grid-row , ситуация изменится.

Задаем одному из объектов стили:

.item1

Это означает, что DIV c классом item1 начинается с первой линии колонки в сетке и заканчивается на 4-той, то есть заполняет собой весь ряд.

Собственно, теперь некоторые объекты переместились на последнюю строку, которая у нас была прописана заранее (3х3). Существует вариант попроще:

.item1 < grid-column : 1 / 4 ; >
.item1 < grid-column-start : 1 ; grid-column-end : 3 ; >.item3 < grid-row-start : 2 ; grid-row-end : 4 ; >.item4

Он дает нам следующую картинку:

Получилось разобраться? В принципе, не сложно, однако нужно понимать, что это лишь базовая часть нюансов по CSS Grid.

Прототипирование и области макета с CSS Grid

Код разметки при этом следующий (HTML):

Если по строкам все, в принципе, понятно, то с колонками нужно прояснить. Здесь в значении gr >

Добавляем grid-template-areas

Опция дает еще больше гибкости и удивительных функций. Возможно, синтаксис и оформление параметра grid-template-areas выглядит немного необычно, но дальше вы поймете почему все именно так:

.container

Это своего рода визуальное представление вашей сетки сайта в CSS. Все символы в данном параметре формируют 3 строки и 12 колонок, определенные строкой выше. Каждая буква отвечает за одну ячейку. Названия в примере соответствуют блокам HTML кода: header (h), menu (m), content (c) и footer (f), но можете использовать любые другие варианты.

Присвоение областей шаблоны и эксперименты

На следующем шаге вы «логически связываете» символы контейнера и элементы DIV:

.header < grid-area : h; >.menu < grid-area : m; >.content < grid-area : c; >.footer

На сайте отобразится макет вида:

А теперь начинается магия. Давайте поменяем местами некоторые буквы в параметре grid-template-areas , например «c» и «m» местами:

grid-template-areas : «h h h h h h h h h h h h h» «c c c c c c c c c c c m m» «f f f f f f f f f f f f f» ;

grid-template-areas: «h h h h h h h h h h h h h» «c c c c c c c c c c c m m» «f f f f f f f f f f f f f»;

Сетка будет выглядеть по другому:

Добавление адаптивности в эту конструкцию вообще выглядит потрясающе. С помощью одного HTML вы бы такое не реализовали, а вот в CSS все возможно.: «. h h h h h h h h h h .» «c c c c c c c c c c m m» «. f f f f f f f f f f .» ;

grid-template-areas: «. h h h h h h h h h h .» «c c c c c c c c c c m m» «. f f f f f f f f f f .»;

На сайте выглядит так:

Никаких скриптов и HTML — только магия CSS Grid!

Дополнительные примеры Grid и Flex

Позже на CSS Tricks нашел еще одну статью по теме, некоторые варианты из нее могут вам пригодиться. Переходите по ссылкам на (лого в блоке кода сверху справа) чтобы увидеть работу примера на большом экране.

Классический макет сайта

У нас имеется шапка и футер, растянутые на всю ширину, а между ними — блок контента с двумя сайдбарами. В первом случае при уменьшении экрана все объекты останутся в тех же позициях, что и раньше.

Если нужно чтобы блоки располагались один под другим, то:

2х колоночная сетка блога

Допустим, у нас в центре большой блок контента и сайдбар. Код ниже при уменьшении размеров страницы сохраняет все объекты на своем месте.

Второй прием — дает их расположение один за другим.

Распределение элементов по ширине

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

Картинка внутри статьи

Здесь контент разделен на 2 части, а между ними расположен полноэкранный блок.

Итого. В общем, открыл для себя понятие CSS Grid, которое, честно говоря, приятно впечатлило — особенно рам где рассматривались области макета с разными буквами. Безусловно, это все лишь азы «технологии», плюс я не расписывал детально каждый параметр кода. В последнем разделе статьи примеры более комплексные, их следует внимательно просмотреть. Там комбинируется и Flex, и Grid. Если данная тема интересна, подписывайтесь на курсы первого автора — Email записи в оригинальной первой-второй заметке.

Есть что добавить по CSS Grid? — пишите мысли, советы или присылайте интересные линки.

Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.

Что вы узнаете из этой статьи:

  • как раньше работали с CSS-разметкой;
  • разницу между устаревшими подходами и современными стандартами;
  • как начать работу с новыми стандартами (Flexbox и Grid);
  • почему вас должны волновать эти современные стандарты.

Как раньше работали с CSS-разметкой

Задача

Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями — боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?

Вот пример того, к чему мы стремимся:

Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента

Для начала я покажу, как решить эту задачу с помощью устаревших подходов.

21 бесплатный CSS3-фреймворк для веб-разработки

Сама по себе история CSS3 очень увлекательна. Это одна из тех технологий, которые дают нам возможность подробно рассмотреть развитие структуры Сети. Мы можем увидеть, когда впервые были введены такие вещи, как медиа-запросы . Это дает возможность понять, как долго существует адаптивный веб-дизайн, CSS framework и как много было достигнуто за такое короткое время.

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

Теперь, без дальнейших предисловий, начнем наш обзор лучших CSS3-фреймворков , доступных на сегодняшний день.

Material Framework

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

Material Design приобретает все большую популярность с тех пор, как Google сделал спецификации общедоступными. С момента его появления уже успел увидеть свет целый ряд фреймворков и руководств, целью которых является помощь дизайнерам / разработчикам в использовании Material Design в своих проектах.

Material Framework — это один из немногих Material Design CSS framework , которые мы будем рассматривать в этой статье. Он является одним из самых простых в использовании. Он использует только CSS , поэтому вам нужно только загрузить библиотеку CSS и обратиться к документации, чтобы узнать, как работает синтаксис и как начать использовать элементы Material Design.

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

Materialize

Materialize является одним из тех фреймворков, которые превосходят своих конкурентов по функциональным возможностям. Materialize получил более 15000 звезд на GitHub , что делает его самым популярным CSS-фреймворком на основе Material Design . Команда проекта сосредоточила свои усилия на том, чтобы предоставить пользователям четыре различных категории элементов: CSS , JavaScript , « Мобильные » и « Компоненты ». Каждая категория состоит из целого ряда примеров с описанием того, как лучше применять Material Design в конкретных ситуациях.

Их страница витрины является удивительным примером того, как воплотить функции фреймворка в жизнь. Она также содержит несколько вдохновляющих проектов дизайна.

Essence

Компактный Material Design CSS framework , который использует оригинальное руководство по стилям из официальной спецификации Material Design и сочетает его с популярной библиотекой ReactJS .

Используйте весь потенциал Essence , чтобы создавать быстрые и надежные интерфейсы мобильных и веб-приложений. Стили и компоненты Essence задаются очень простым синтаксисом, что позволяет начать работу с фреймворком уже после нескольких коротких уроков.

Bootstrap

Bootstrap 3 ( текущая версия, пока Bootstrap 4 готовится к выходу ) является самым популярным в мире front-end фреймворком для создания сайтов, макетов веб и мобильного дизайна.

Хотя Bootstrap не является только CSS framework, CSS3 — это одна из основных частей процесса разработки на Bootstrap . При этом фреймворк позволяет протестировать современные элементы дизайна и функции CSS3 . CSS составляющие Bootstrap могут быть использованы для построения сеток, форм, кнопок, управления изображениями, реализации подсказок и работы с адаптивным дизайном.

Semantic UI

Semantic в последние несколько лет стал довольно популярен, и сегодня можно часто видеть, что его подход к проектированию применяется другими фреймворками и инструментами, которые допускают использование сторонних руководств по стилям. Основным преимуществом Semantic является разнообразие элементов, которые могут быть созданы с его помощью: разделители, кнопки, загрузчики, формы, хлебные крошки, формы отзывов и комментариев, сложные модули ( начиная от всплывающих окон и до контекстных меню ).

Foundation

На сегодняшний день Foundation является одним из самых популярных front-end фреймворков на планете. Этот адаптивный фреймворк предоставляет дизайнерские решения в распоряжение тех, кто хочет быстро создать сайт, шаблон электронного письма или веб/мобильное приложение без необходимости тратить время на приобретение профессиональных навыков. Foundation прост в освоении, и с помощью его дополнительной справочной литературы практически каждый может всего за несколько недель в совершенстве овладеть фреймворком.

Cascade

Cascade предлагает семантические и несемантические сеточные макеты, базовые шаблоны, табличные конструкции, элементы навигации, типографику и многое другое. Универсальный подход позволяет разработчикам создавать высокопроизводительные веб-страницы под старые и новые браузеры без необходимости беспокоиться о совместимости.

Многие разработчики нашли этот minimal CSS framework крайне полезным благодаря его модульному подходу к использованию конкретных функций в рамках проектов. Cascade позволяет выбрать только наиболее важные компоненты, необходимые для ваших проектов, что в свою очередь позволяет минимизировать размер и увеличить производительность. В этом он похож на Bootstrap , только Cascade предоставляет гораздо больше контроля над потоками.

Baseguide

Это минималистичный и компактный CSS3-фреймворк , построенный на базе SASS . Он собирает необходимые компоненты веб-дизайна в небольшую, но стабильную библиотеку. Все компоненты полностью адаптивны и масштабируемы. Вы можете управлять формами с помощью оригинального CSS .

Siimple

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

Responsive Cat

Это CSS framework , который в качестве основы для построения синтаксиса использует Stylus . Полностью адаптивный и совместимый со всеми современными устройствами и браузерами.

Sculpt

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

Задача Sculpt — помочь разработчикам, дизайнерам обрабатывать запросы пользователей мобильных устройств с помощью простого дизайна, который позволяет быстро создавать функциональный мобильный сайт. Даже те пользователи, которые посещают ваш сайт через устаревшие браузеры, будут иметь возможность попробовать его мобильную версию.

Семантически чистый код является визитной карточкой Sculpt . Он включает в себя таблицу стилей, построенную на 25 пиксельной базовой линии типографики. Все заголовки, абзацы и списки создаются на ее основе.

Turret

Фреймворк для быстрой разработки сайтов, использующий для обработки современных функций CSS3 LESS . Сам фреймворк нормализует HTML , чтобы сделать разработку с помощью Turret приятной и доступной. Основными особенностями Turret являются адаптивный веб-дизайн, основанный на принципах минималистичного дизайна, HTML5 . А также общая семантическая разметка, которая помогает без особых сложностей преобразовать HTML5 в функциональный дизайн.

Concise CSS

Это компактный CSS grid framework , который предоставляет доступ к большому количеству функций разработки. Concise построен на основе принципов объектно-ориентированного CSS с сохранением семантики. Это обеспечивает простоту изучения фреймворка, а также высокий уровень гибкости. Фреймворк характеризуется простотой среды разработки, которая не требует добавления стилей. Также доступны дополнительные библиотеки, которые могут быть использованы в качестве компонентов для ваших проектов. При написании кода используется SASS .

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

Blueprint

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

Встроенная библиотека функций типографики обеспечит соответствие шрифтов и их размеров остальной части дизайна. Также доступен набор скриптов, которые могут быть использованы для настройки макета. И вам не нужно беспокоиться о том, что сайт станет слишком раздутым, потому что особое внимание авторы уделили именно простоте.

UIkit

CSS в значительной степени ориентирован на построение веб-интерфейсов. UIKit — это модульный front-end CSS framework , который призван помочь дизайнерам в быстром создании простых веб-интерфейсов, красивых и гибких в настройке. Библиотека компонентов UIKit соответствует современному подходу к отображению и использованию популярных компонентов. UIKit предлагает более 30 модульных и выдвижных компонентов, которые могут быть объединены друг с другом. Компоненты разделены на различные секции в соответствии с назначением и функционалом.

Также фреймворк содержит две предустановленные темы – « Градиентная » и « Плоская ». Обе предоставляют возможность свести в стабильную систему все компоненты UIKit . Это отличный полигон для экспериментов, на котором можно опробовать все полезные функции CSS3 . Просмотрите раздел Витрина , чтобы узнать больше о том, какие сайты и как можно построить с использованием основных компонентов и модулей UIKit . Он также предоставляет пользователям целый ряд учебных пособий для самостоятельного изучения фреймворка.

Modest Grid

Иногда все, что нам на самом деле нужно для реализации проекта, это надежный, адаптивный и современный шаблон сетки. Modest Grid предоставляет пользователям шаблонную систему сеток, которая будет прекрасно работать на современных устройствах, а также обеспечит отличный фундамент для использования компонентов из других фреймворков. Проект находится на стадии активного развития , поэтому ожидается, что он будет улучшаться по мере эволюции самого CSS .

Schema

Schema использует модульный подход для обеспечения оптимального опыта front-end разработки. Это означает, что его задачей является помощь в создании сложных пользовательских интерфейсов.

Чтобы лучше понять, как Schema использует новейшие функции CSS3 для создания сложных веб-страниц, посетите страницу документации и ознакомьтесь со всеми возможностями CSS UI framework .

Стиль веб-дизайна Metro приобрел за последнее время немало поклонников. Metro UI сконцентрирован исключительно на разработке Metro-стиля Windows , который позволяет строить гибкие интерфейсы с использованием его лучших черт. Metro UI использует оригинальную спецификацию стилей Metro от Microsoft для создания таких компонентов, как сетки, макеты и многое другое. Он поставляется с более чем двадцатью компонентами, содержит более трехсот полезных иконок и построен на базе препроцессора LESS .

Responsive Grid System

Это последний CSS grid framework в нашем обзоре. С помощью него можно легко создавать и задавать стили сеточных адаптивных макетов сайтов. Чтобы процесс был еще проще, можно использовать встроенную функцию генератора сетки . Также доступна библиотека предустановленных шаблонов .

YAML удается остаться одним из лучших в течение более десяти лет, он до сих пор является одним из наиболее известных CSS-фреймворков в мире. YAML ( Yet Another Multicolumn Layout ) — это модульный, гибкий CSS-фреймворк для создания адаптивных сайтов. Он исповедует подход, базирующийся на независимом от дисплея дизайне, и предоставляет очень модули для гибких макетов. Это идеальная отправная точка для создания по-настоящему адаптивного дизайна.

YAML воплотил в себе все новейшие стандарты интернета. Он оптимизирован для быстрой HTML5- и CSS3-разработки . Написан с использованием SASS .

Выбор правильного CSS-фреймворка для вашего следующего проекта

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

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

Данная публикация представляет собой перевод статьи « Top 21 Best Free CSS3 Frameworks for Web Development 2020 » , подготовленной дружной командой проекта Интернет-технологии.ру

Разрушаем шесть мифов о веб-лейаутах

Бросьте вызов собственным стереотипам, вырвитесь из плена старых привычек и узнайте, что реально сверстать в современном вебе

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

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

С помощью фронтенд-фреймворков свёрстано немало проектов. Благодаря им мы работали эффективнее и реже сталкивались с багами. Но в результате все сайты стали выглядеть одинаково. Везде используется одна и та же симметричная 12-колоночная сетка. Раз за разом мы переживаем один и тот же пользовательский опыт, видим одни и те же формы, проходим одни и те же паттерны. Стало невыносимо скучно.

Новая эра
Есть и хорошие новости. У нас наконец-то появляются реальные инструменты для создания лейаутов. Больше не надо выбирать между сложной ручной версткой и вёрсткой в унылых однообразных фреймворках — мы можем позволить себе творчество. Flexbox («гибкий блок» — более эффективный способ верстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический), CSS Shapes (CSS Формы), Masks (Маски), Clip-path (Обрезка по контуру), Initial Letter (Инициал), Rotation (Поворот), Multicolumn (Несколько колонок), Viewport Units (Вьюпорт-единицы), Object-fit (Масштабирование контента элемента относительно заданных размеров) и другие инструменты уже открывают нам мир новых возможностей.

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

Пришло время начинать работу с вопроса: какой лейаут нужен именно этому проекту?

Самой сложной задачей в размещении элементов на странице отныне будет не вёрстка. Самой сложной задачей будет преодоление границ собственного воображения. За последние 10 лет у нас выработались мощные привычки. Мы привыкли подавлять креативные идеи конструкциями типа «в вебе это так не работает» и «так сделать нельзя». Что ж, ситуация изменилась. Границы возможного и невозможного сдвинулись. Пора отказаться от хорошо закреплённых привычек и заблуждений.

layout.land станет пристанью для дизайнеров, экспериментирующих с лейаутами

Миф первый: все элементы должны плавать, как мыло в воде
Веб-лейауты на основе флоатов подобны ванне, в которой плавают сотни кусков мыла. Каждый элемент на странице — это кубик, стремящийся всплыть на поверхность. Хэдер — верхний кусок мыла, за ним следуют навигация, hero-баннер, боковая панель, область с контентом. Каждый раз при смене вьюпорта и медиа-запроса куски мыла меняют своё расположение, соревнуясь за место наверху.

Флоаты не допускают пустого пространства. Они провоцируют перегрузку страниц контентом. Они заставляют нас искусственно создавать контент с одинаковой длиной или соотношением сторон.
В основе CSS Grid также лежит сетка из колонок, но модель использования отличается от привычных фреймворков. Одно из самых важных нововведений — ряды. Ряды! С ними мы можем выравнивать объекты по горизонтали и добавлять воздух по вертикали. Ряды позволяют оставлять какие-то области пустыми. Груда контента, сваленная в верхней части страницы — уже не опция по умолчанию.

Контроль за вертикальным пространством позволяет применять решения, наработанные журнальными дизайнерами за целую сотню лет. Я собираю книги по проектированию на основе сеток и дизайну лейаутов. В одной из них я увидела афишу джазового фестиваля в Линкольн-Центре в 2007 году, и мне стало интересно, можно ли сделать нечто подобное в вебе. На рисунке 1 вы видите результат моих стараний.

CSS Grid позволяет свободно размещать объекты по вертикали, не загромождая верхнюю часть страницы

Миф второй: прямоугольники, только прямоугольники
По умолчанию любой объект на веб-странице начинает свою жизнь в качестве прямоугольника. Инструменты, которые мы использовали раньше, вполне отражают этот подход: мы ставим одну коробочку поверх другой. Коробочка, ещё коробочка, сверху ещё одна коробочка.

Сегодня у нас есть инструменты, ломающие этот стереотип. Вы можете использовать Clip-path (обре”зки по контуру), Masks (маски) и Gradients (градиенты), чтобы вырезать из прямоугольника другую фигуру. Треугольники, ромбы, трапеции — контент может принимать любую форму. Создайте заголовок на фоне яркого прямоугольника, а снизу диагональной линией отрежьте от него кусок. Сфотографируйте нескольких людей и обрежьте снимки по форме шестиугольников. Почему бы и нет

CSS Shapes позволяют выровнять элемент по одной из сторон и пустить остальной контент обтекать его по форме, не являющейся прямоугольником. Например, задайте свойство float фотографии, обрезанной по кругу с помощью border-radius, и сделайте так, чтобы сопроводительный текст обтекал её по кругу с помощью shape-outside.

Или нарисуйте иллюстрацию со множеством причудливых форм и используйте эту картинку как маску, чтобы в браузере текст обтекал её по форме всех изгибов. На рисунке 2 фото винограда выровнено по левому краю, а текст обтекает его, следуя сложному контуру.

С помощью Rotation вы можете избежать дотошного выравнивания всех объектов параллельно краям страницы. Слегка наклоните заголовок. Придайте характер изображению, немного его повернув. Подпишите источник изображения где-нибудь сбоку вдоль оси.

Фото выровнено по левому краю, а текст обтекает его по фигурному контуру

Миф третий: мы не можем контролировать границу первого экрана
В веб-пространстве мы не можем знать наверняка, какая часть макета останется на экране, а какая будет скрыта. Какое-то время мы делали вид, что все экраны имеют размер 1024×768 пикселей (или 800×600), но на самом деле мы никогда не контролировали нижнюю границу. И пусть на бесконечных встречах люди настаивали на том, что их фирменная снежинка должна появиться на первом экране — у нас не было возможности определить, где эта граница проходит. До настоящего времени.

С появлением вьюпорт-единиц мы смогли масштабировать или размещать элементы на странице, опираясь на сам вьюпорт.

Если мы хотим оформить элемент таким образом, чтобы он занимал определённую часть экрана, это возможно. Код img сделает так, чтобы изображение занимало ровно половину ширины и половину высоты окна браузера.

Указывать высоту и ширину изображения в прошлом было ужасной идеей. В итоге такая картинка оказывалась растянута или сплющена. Но теперь object-fit: cover говорит браузеру сохранить пропорции и обрезать картинку по размеру конкретной области.

Пример — на рисунке 3. Независимо от размера окна браузера, фото Грейс Хоппер всегда будет занимать половину ширины и всю высоту экрана. Пролистайте страницу вниз, и ровно за границей экрана появится статья. Реализовать этот лейаут мне помогли Viewport Units и Flexbox.

Независимо от размера окна фото всегда будет занимать половину ширины и всю высоту экрана.

Миф четвёртый: 12 колонок — лучшее решение
В 2006 году индустрия стала дружно ратовать за использование симметричной 12-колоночной сетки. Мы не хотели стандартизировать сайты, мы хотели упростить расчёты для ручной верстки фиксированных по ширине страниц. 960 пикселей — отличный размер для экрана в 1024px, он позволяет делать колонки шириной 60px с отступами в 20px. Кроме того, 12 колонок позволяют легко делить пространство на две, три и четыре части.

Традиция начинать работу над проектом с шаблона для Visio сделала UX-дизайн более предсказуемым. Стало проще задавать стандарты команде: можно просто ткнуть пальцем в популярный сайт и сказать: «все используют этот инструмент, надо и нам». Нам нужно было упорядочить хаос. Но после 10 лет, в течение которых почти все сайты использовали одну и ту же сетку, веб-дизайн стал невероятно скучным.

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

Адаптивный дизайн сделал нецелесообразным сохранение математических пропорций, основанных на сетке в 960 пикселей. Уже много лет Марк Болтон (Mark Boulton) пропагандирует идею использования нечётного числа колонок, например, девяти или одиннадцати. Он предлагает попробовать сетки с разными колонками, ширина которых изменяется по принципу золотого сечения.

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

Почему? Думаю, объяснение кроется в сложности расчётов для такой технологии как флоаты. Команда студии Mark Boulton Design разработала приложение Gridset, упрощающее реализацию подобных дизайн-решений, Sass-сообщество стало разрабатывать одну библиотеку за другой, чтобы избавить нас от расчётов сложных сеток… Но всё это по-прежнему кажется ненадёжными костылями.

С CSS Grid оригинальные сетки станут обычным делом. Сделать 11 колонок будет ни чуть не сложнее, чем 12. Массив объектов со связанными пропорциями? Пара пустяков! Браузер возьмёт большую часть расчётов на себя, за нами — креатив.

Нет причин придерживаться 12 колонок. Сделайте что-то новое, пусть ваш сайт выглядит свежо. В помощь нам десятилетия практики графического дизайна.

Официальная хронология эволюции веб-лейаутов
Полное отсутствие лейаута > Табличная разметка страниц > Ручная вёрстка с использованием флоатов > Вёрстка с использованием фреймворков > Прекрасное будущее!

Краткая схема эволюции лейаутов. Сейчас мы стоим на пороге новой эры веб-дизайна.

Миф пятый: для вёрстки необходимо использовать фреймворк
На самом деле, новый синтаксис Grid сделает вёрстку на чистом CSS проще вёрстки с применением фреймворков, а апдейт фреймворков со старыми стилями при помощи CSS Grid только усложнит вам жизнь. Избавьтесь от привычки полагаться на фреймворки. Верстайте на чистом CSS.

Миф шестой: мы погрязли в рутине из-за адаптивного веб-дизайна
Не верю! Да, когда-то индустрия не без труда освоила адаптивный веб-дизайн. Неудивительно, что мы полагались на инструменты, которые помогали перезапускать сайты быстро. Но сама идея адаптивного дизайна никак не связана с необходимостью использования полдюжины одинаковых паттернов.

С помощью CSS можно сделать всё, что угодно. Можно как угодно преобразовать макет для любого брейкпойнта. Перестаньте использовать шаблонные инструменты — и вы избавитесь от шаблонных результатов.

Таков вкус новизны, который мы ожидаем от CSS Grid: модуль сможет перестраивать контент так, чтобы тот соответствовал доступному пространству, с помощью свойства grid-auto-flow: dense; Результат вы видите на рисунке 4.

Используйте свойство grid-auto-flow: dense, и браузер перестроит порядок контента в соответствии с пространством

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

Зачем верстать все с нуля, если можно использовать фреймворки?

24.07.2014, 22:18

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

Зачем используют конструкцию в длинных ветвлениях else if, если можно просто использовать один if
Добрый День! У меня очень простой вопрос. Зачем используют конструкцию в длинных ветвлениях else.

Зачем использовать delete в небольшой программе, если после закрытия память все равно освободится?
Можно ли использовать new без delete, если программка небольшая, а также если нет класса вообще.

Зачем использовать поля, если есть свойства?
Приветствую. Объясните новичку: для чего нужно использовать поля, если есть такая штука, как.

Можно ли использовать DAO вместо Ado и если Можно то каким образом?
Люди. Можно ли использовать DAO вместо Ado и если Можно то каким образом!Спасибо

Почему стоит использовать CSS фреймворки вместо Grid Layout: плюсы и минусы

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

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

О технических аспектах CSS-гридов и их одномерных родственников — флексбоксов — уже немало сказано более знающими людьми. В этой статье я хочу применить эти понятия на практике. С чего начинать освоение новых возможностей для верстки и сложных моментов CSS-гридов, какие старые проблемы они решают, и как начать использовать этот модуль на реальных сайтах уже сегодня.

Я буду рассматривать и приводить примеры для тем WordPress, но практические подходы и примеры универсальны и их можно использовать в любом веб-проекте, независимо от CMS, стека технологий или инструмента.

Удачный пример для CSS-гридов

Подумайте, как бы вы сделали на CSS вот такой макет: две отзывчивых колонки, шапка и подвал, шапка и подвал на всю ширину браузера, а основная область по центру и ограничена максимальной шириной 60em. Контент занимает две трети свободного места, сайдбар одну треть, а два раздела под ними делят доступное место пополам.

Чтобы решить эту задачу по верстке традиционными CSS-методами, пришлось бы объединить контент, сайдбар и два однотипных раздела в один контейнер, установить ему max-width в 60em ; и отцентрировать, задав для margin-right и margin-left значение auto , выстроить разные разделы в один ряд пришлось бы с помощью display: flex ; для главного контейнера и значения flex для каждого элемента, а в дофлексбоксные времена — «зафлоатив» их влево и вправо.

Теперь на минутку забудьте о специфике веба и подумайте об этом как о макете, который вас попросили сделать в вашем любимом графическом редакторе. С чего бы вы начали? С сетки: четыре ряда и восемь колонок.

В печатной верстке вы не станете центрировать контент с помощью полей или применять гибкие блоки для выравнивания высоты разделов — вы просто поставите их на нужное место в сетке: шапка, область контента с сайдбаром и подвал займут по ряду, шапка и подвал займут все восемь колонок, контент заполнит колонки со 2-й по 5-ю, а сайдбар — 6-ю и 7-ю колонки.

Благодаря CSS-гридам можно сделать то же самое в браузере:

Можно посмотреть живой пример на Codepen

CSS-гриды берут всё лучшее из печатной верстки, но вдобавок еще используют все плюсы гибкости браузерного окна: у шести средних колонок будет максимальная ширина, благодаря функции minmax() из CSS, а первой и последней колонке зададим размер в единицах fr , чтобы они делили оставшееся место в указанной пропорции. В итоге у нас в браузере получится отцентрированная отзывчивая сетка. И поскольку всё это работает на CSS, можно менять раскладку для разных размеров окна медиавыражениями.

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

Учимся думать CSS-гридами

Как показал этот пример, чтобы начать работать с CSS-гридами, сначала нужно отбросить привычки, допущения и приемы, что раньше помогали вам в верстке сложных макетов на CSS. Зачастую эти общепринятые подходы были хаками, придуманными для обхода ограничений CSS как инструмента верстки. CSS-гриды, на мой взгляд, первый модуль в CSS, созданный именно для раскладки блоков. Он позволяет работать в двух измерениях и размещать любой элемент в любой ячейке или комбинации таковых. Для этого нужно думать совсем по-новому: не спрашивать себя «Как заставить эту вертикальную пачку контента сделать вид, что она разложена по сетке?», а просто определить сетку и размещать в ней каждый элемент контента.

Взгляните на еще один пример того, насколько это отличается от привычного нам подхода.

Рассмотрим этот одноколоночный макет, в котором есть как ограниченный по ширине центрированный контент, так и элементы на всю ширину (картинки и фоны):

В соответствующей раскладке на гридах (справа) 8 рядов и 4 колонки. С помощью CSS-гридов должна быть возможность размещать элементы в этой сетке как угодно. Однако, грид-контейнер (которым становится элемент с display: grid ) воспринимает как грид-элементы только своих непосредственных потомков. Это значит, что одной сеткой для этого макета не обойтись. Вместо этого придется создавать гриды на уровне компонентов, фактически несколько разных гридов с одинаковыми свойствами.

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

Чтобы сверстать вышеуказанный макет в браузере, надо будет сочетать CSS-гриды с другими инструментами и приемами, как мы сейчас увидим.

Если ничего не делать, каждый раздел будет на всю ширину блока. Каждому разделу с центрированным контентом мы указываем класс .grid и создаем CSS-правила, которые задают четырехколоночный грид и размещают контент в двух центральных колонках. Раскладка трех вертикальных блоков в третьем разделе сделана флексбоксами. Последний раздел, из двух сплошных половин, образован двумя отдельными грид-элементами, занимающими по две колонки каждый. Это достигается с помощью grid-column: span 2; (т.е. грид-элемент охватывает две колонки), всё остальное уладит алгоритм авторазмещения..

Можно посмотреть живой пример на Codepen.

Этот пример показывает как возможности CSS-гридов для решения типовых проблем в верстке, вроде разделов на всю ширину, так и то, что и у этого модуля всё-таки есть свои ограничения. Как показано выше, в идеале вы предпочли бы разметить один-единственный грид и работать со всеми разделами и подразделами с помощью подсеток. Однако, пока что размещать в гриде можно только непосредственных потомков контейнера со значением grid для display , а свойство subgrid в браузерах не реализовано, так что мы вынуждены придумывать такие вот обходные пути. Хорошая новость в том, что это всё равно лучше старых методов и дает чистый и читаемый CSS на выходе.

Инструкция по использованию CSS-гридов в продакшне

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

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

В основе любого проекта во фронтенде лежит простой принцип: сначала сделайте доступно, потом сделайте красиво, и убедитесь, что красота не вредит доступности.

Также нужно не забыть про отзывчивость, кроссбраузерность, кроссплатформенность и прогрессивное улучшение. Если собрать всё вместе, получится план процесса разработки на практике:

  1. Создать доступный HTML с логичной иерархической и семантической структурой.
  2. Сделать отзывчивую одноколоночную раскладку для всех размеров экрана.
  3. Добавить продвинутую раскладку и функциональность (гриды, флексбоксы, JavaScript и т.д.)

В результате должно получиться доступное решение, которое работает во всех браузерах на всех платформах и при этом использует преимущества новейших технологий.

Обратная совместимость и браузерная поддержка

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

CSS-гриды — раскладочный модуль: он позволяет менять раскладку документа, не вмешиваясь в порядок в исходнике. Другими словами, CSS-гриды — чисто визуальный инструмент, и при правильном применении не должен влиять на передачу содержания документа. Отсюда следует простая, но неожиданная истина: из-за отсутствия поддержки CSS-гридов в старых браузерах впечатление у посетителя не обязательно должно стать хуже, оно просто может стать другим.

Если вы с этим согласны (а надо бы), то вам ничто не мешает использовать CSS-гриды уже сейчас!

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

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

А вот теперь пора взглянуть по-новому: если на узком экране одной колонки достаточно для передачи смысла документа, то эта же раскладка будет работать и на широком! Всё, что нам нужно — сделать ее отзывчивой под данный размер. Это даст нам доступную, кроссбраузерную, обратно совместимую основу, на которой мы сможем надстраивать продвинутые раскладки и функциональность с помощью современных веб-технологий наподобие CSS-гридов и продвинутого JavaScript.

Короче говоря, мы будем использовать CSS-гриды для визуальных и раскладочных улучшений, а не для смысловых изменений в контенте. Первое ведет к лучшему дизайну, второе — к нарушенной доступности.

Пример: CSS-гриды в теме для WordPress

CSS-гриды упрощают давние подходы и открывают двери новым динамическим макетам для всех типов приложений. Давайте посмотрим, как это работает в жизни, и применим грид для готовой темы для WordPress по намеченному только что плану. Здесь я буду отталкиваться от начальной темы _s (или Underscores). Как я отметил во введении, эти подходы универсальны и подходят для любой начальной темы или фреймворка для тем, и даже вообще не для WordPress.

Если вам нужен надежный контроль над тем, как CSS-гриды работают в браузере, рекомендую взять Firefox c его инспектором гридов. Так у вас будет наглядная справка, где находятся ваши гриды и для каких элементов они действуют.

0. Структурные наброски раскладки

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

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

Для современных браузеров есть две основных раскладки:

Главная страница и архив показывают опубликованные записи в виде плитки на гридах, где выделенные записи занимают вдвое больше места, чем остальные.

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

1. Напишите доступный HTML с логичной иерархической и семантической структурой

Одно из главных преимуществ использования CMS наподобие WordPress в том, что, как только вы создали доступные, семантичные и валидные шаблоны, вам не придется самим заботиться о структурных компонентах генерируемых HTML-документов. Взяв за основу проект _s, мы уже получаем доступный фундамент для дальнейшей надстройки, с самым минимумом интерактивных элементов, вроде небольшого скрипта, который добавляет клавиатурную навигацию для главного меню.

Из-за исторически сложившихся ограничений CSS в большинстве фреймворков типа _s элементы группируются «матрёшками» из вложенных контейнеров, чтобы облегчить разработчикам задачи типа размещения сайдбара в один ряд с основным контентом. На упрощенной схеме ниже видно, как див .site-content оборачивает .content-area и .widget-area , чтобы их можно было «флоатить» влево и вправо.

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

Если сделать .page грид-контейнером, это сразу же превратит .site-header , .site-content и .site-footer в грид-элементы, но .site-main и .widget-area вложены внутрь этих контейнеров, и поэтому их нельзя сразу разместить в гриде.

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

Как объяснялось раньше, _s определяет контейнеры, единственная цель которых — использование старых CSS-приемов для раскладки и внешней обертки. Обычно такие контейнеры можно заметить визуально,потому что это просто дивы, отсюда название «диватоз».

Теперь, когда мы делаем раскладку на CSS-гридах, можно убрать некоторые их этих контейнеров, сделав структуру HTML более плоской и более чистой в плане семантической иерархии.

На практике это значит, что можно удалить

2. Сделайте отзывчивую одноколоночную раскладку для всех размеров экрана

Перед добавлением новых стилей необходимо подчистить готовый CSS, который идет в комплекте с темой «из коробки». Тема _s предполагает, что мы будем размещать элементы в ряд с помощью флоатов, и пытается решить проблему «клиринга» контейнеров по принципу «чтобы уж наверняка», добавляя почти ко всем элементам clearfix. Такой подход добавляет в DOM (точнее, в дерево отрисовки — прим. перев.) невидимые псевдоэлементы, которые распознаются браузером и мешают и флексбоксам, и гридам. Если оставить эти правила, флексбоксы и гриды воспримут эти псевдоэлементы как флекс- и грид-элементы, из-за чего в раскладке визуально появятся лишние пустые ячейки. Самое быстрое решение — убрать эти CSS-правила совсем, удалив весь блок кода с клирингом, либо обернуть их в @supports или медиавыражение, чтобы они применялись только тогда, когда флексбоксы и гриды не используются. Если вам понадобится clearfix для конкретных элементов внутри макета, для этого должен быть специальный класс .clearfix , чтобы применять его когда нужно. Clearfix — это хак для обхода проблем с обтеканием и его отменой, и теперь, когда доступны флексбоксы и гриды, к нему нужно относиться как к изящной деградации.

Чтобы всем посетителям было удобно, применяйте стили ко всем элементам в документе, начиная с разумного минимума ширины окна, обычно с 320px.

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

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

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

Примечание: пара слов о браузерной поддержке

С этого момента мы начинаем делать продвинутую раскладку с помощью CSS-гридов и других современных инструментов. Вы можете посчитать своим долгом добиться обратной совместимости для своей верстки на гридах инструментами типа Автопрефиксера, но скоро поймете, что это удается лишь частично. Чем тратить время на это, лучше пойти по пути прогрессивного улучшения.Дать полнофункциональный интерфейс всем браузерам, а браузеры с поддержкой гридов пусть их и используют для раскладки.

То, как вы к этому подойдете, зависит от вашей стратегии фолбэка в целом: если дизайн у вас требует, чтобы фолбэки появлялись при отсутствии поддержки гридов, решением вполне может быть просто объявить другое значение свойства display выше по каскаду. Грид переопределяет другие объявления свойства display , а не поддерживающие его браузеры будут довольствоваться теми объявлениями. У Рэйчел Эндрю есть подробное описание с примерами этого подхода. Можно также вообще не показывать CSS-правила браузерам без поддержки гридов с помощью @supports. В текущем примере проблема фолбэка решается тем, что все браузеры получают мобильную раскладку. Это значит, что мы применяем @supports для того, что я называю «прогрессивным улучшением выжженной земли». Отдаем всем браузерам базовый интерфейс, описанный выше, а раскладки на гридах — только тем браузерам, которые умеют с ними работать.

Для этого мы используем @supports по прямому назначению. Как и в случае медиавыражений, CSS, вложенный внутрь правила @supports , применится только если браузер поддерживает указанное свойство или возможность. Так можно прогрессивно улучшать CSS в зависимости от браузерной поддержки. Стоит также отметить, что @supports проверяет заявленную поддержку в браузере. И не гарантирует, что браузер действительно поддерживает возможность или следует спецификации.

В самой базовой форме проверка поддержки гридов будет выглядеть так: @supports (display: grid) <> .

Трудность возникает с Microsoft Edge, единственным современным браузером, который на момент выхода статьи всё ещё использует старую спецификацию гридов. Он возвращает true для @supports (display: grid) <> , несмотря на то, что поддержка гридов в нем неполная и нестандартная. Для нашего примера важнее всего отсутствие поддержки свойств grid-template-areas и grid-area , а также функции minmax() . В результате правило @supports , проверяющее только display: grid , не исключит Microsoft Edge, и пользователи этого браузера получат битую раскладку. Чтобы решить эту проблему и отдавать гриды для Microsoft Edge только тогда, когда в нем появится полная поддержка спецификации, лучше проверяйте одно из неподдерживаемых свойств:

@supports (grid-area: auto) <>

Это в нынешних версиях Microsoft Edge возвращает false , и браузер не будет пытаться отрисовать CSS, который ему непонятен.

3. Добавляйте продвинутые раскладки и функциональность

С этого момента мы продолжаем подход «сначала мобильные» для всех правил:

  1. Начинаем с наименьшего размера окна.
  2. Увеличиваем ширину, пока всё не начнет выглядеть странно.
  3. Добавляем контрольную точку.
  4. Возвращаемся к шагу 2.

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

Раскладка структуры всей страницы (главный грид)

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

«Поиграв» с шириной окна, вы найдете идеальный брейкпойнт для грида при средней ширине. Внутри этого медиавыражения укажите, что элемент .site будет грид-контейнером:

Чтобы легче понимать, что в гриде происходит, дадим имена разным частям грида с помощью grid-template-areas . Свойство grid-template-area дает возможность построить карту своего рода именованных прямоугольных областей в гриде, охватывающих одну и более ячеек. Как только такая область определена, грид-элемент можно привязать к ней с помощью свойства grid-area и имени области. В примере ниже свойство grid-template-area служит для «рисования» двухколоночной раскладки, определяя всю первую колонку как область header и деля вторую колонку на области main , sidebar и footer :

Теперь можно разместить шапку, основной контент, сайдбар и подвал в именованных областях шаблона. И каждому, читающему этот CSS, будет понятно, что тут происходит:

Для самых широких экранов будет своё медиавыражение. Здесь сайдбар занимает новую колонку по правой стороне грида. Для этого нужно изменить шаблон грида, чтобы поместить сайдбар в новую колонку. Поскольку сайдбар уже привязан к области шаблона «sidebar», нам нужно лишь изменить правило для .site :

Используя @supports (grid-area: auto) < >, вы можете где угодно в файле создавать добавочные CSS-правила, которые сработают только если браузер поддерживает грид-раскладку.

Раскладка для архива записей

В WordPress к архивным страницам относятся главная страница блога, архивы по категориям, тегам, авторам и датам, а также страница результатов поиска. В теме _s они выводятся с помощью шаблонов index.php (главная блога), archive.php (архивы по категориям, тегам, авторам и датам) and search.php (результаты поиска). Другие шаблоны архивов можно добавить с помощью иерархии шаблонов.

Чтобы свести к минимуму необходимость в собственных CSS-правилах для каждого отдельно взятого архива, можно назначить свой класс элементу body для каждой архивной страницы с помощью фильтра для темы. Лучшее место для этого фильтра — inc/extras.php , рядом с подобными фильтрами. Можно не прописывать условия для всех возможных видов архивов, а пойти от противного: «Если эта страница не единичный элемент — т.е. не отдельная запись или статичная страница — то назначим элементу body класс .archive-view ». Для этого в _s уже предусмотрено условие, так что нам надо просто добавить к нему дополнительный класс:

Теперь можно прицельно применять CSS-правила только для архивных страниц с помощью класса .archive-view .

На архивных страницах шаблон должен отображать каждую запись (зеленая) в отдельной грид-ячейке (грид показан синим). Если дать браузеру равномерный грид — с двумя, тремя, четырьмя или пятью колонками, в зависимости от ширины окна — и позволить ему самому выбирать число рядов по потребности, он автоматически разместит каждую запись в новой ячейке и сгенерирует неявные линии для рядов. Поскольку все колонки делят ширину поровну, можно задать их ширину в единицах fr . Обратите внимание, что единица fr распределяет доступное место в заданной пропорции. Она не ограничивает минимальную ширину контента. Это значит, что если внутри элемента с шириной в fr окажутся очень длинные слова или другой широкий контент, то элемент не сможет сузиться меньше этого контента, даже если из-за этого он окажется шире указанной доли контейнера. Чтобы избежать этого, убедитесь, что слова разрываются или переносятся, а у контента типа картинок нет фиксированных минимальных размеров.

Записи — это отдельные элементы article , вложенные в раздел с классом .site-main . Это дает нам следующий SCSS:

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

Если вам непременно нужны однопиксельные линии между ячейками, вы быстро обнаружите, что border или outline не подходят, поскольку линии будут перекрываться. Чтобы это обойти, можно задать 1px свойству grid-gap , добавив зазор в 1px между соседними ячейками по горизонтали и по вертикали, а затем установить для background-color цвет линий, а для background-color всех ячеек — белый цвет:

(Прим. перев.: такой подход может дать не лучший результат, если грид-элементы заполнят грид не целиком, оставив пустое место в последнем ряду. Альтернативный вариант — обычный border в сочетании с тем же [code]grid-gap:1px[/code] и [code]margin:-1px[/code], чтобы рамки накладывались на зазор и сливались в одну линию.)

Чтобы грид был чуть динамичнее, по макету напрашивается, чтобы избранные элементы занимали две колонки. Для этого мы каждой избранной записи присваиваем категорию «Featured». WordPress автоматически присваивает элементу article каждой записи классы по схеме category-[название] , а значит, мы можем выбрать эти записи с помощью селектора .archive-view .category-featured . Мы не определем явно, где именно в гриде будет каждый элемент, так что мы укажем с помощью ключевого слова span , сколько рядов или колонок этот элемент должен занимать, а браузер сам найдёт место, куда он сможет вписаться. Поскольку мы растягиваем элемент на две колонки, будем делать это только для тех раскладок, где колонок две и больше:

Раскладка отдельной записи или статичной страницы

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

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

Затем давайте взглянем на саму запись. Здесь мы задаем четырехколоночный грид для класса .post :

Теперь можно использовать CSS-гриды для создания динамической раскладки, которая меняет визуальный порядок и внешний вид заголовка и вспомогательной информации в зависимости от ширины окна:

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

Основное правило: никогда не меняйте значения контента, перемещая его.

«Из коробки» у записи с картинкой иерархия следующая:

  1. Картинка
  2. Шапка записи: категории + заголовок + метаданные (т.е. автор, дата, количество комментариев)
  3. Контент

По макету, показанному на иллюстрации выше, на широких экранах нам нужна скорее такая визуальная структура:

  1. Шапка записи (категории + заголовок)
  2. Картинка
  3. Метаданные (автор, дата, количество комментариев)
  4. Контент

Чтобы этого добиться, нам придется перекроить еще немного вложенности, идущей в комплекте с _s. Как и раньше, мы получаем больше контроля над элементам, делая структуру HTML более плоской. В данном случае мы просто хотим вынести раздел с метаданными из шапки, чтобы он мог стать самостоятельным грид-элементом. Это делается в файле header.php :

Как и раньше, изменять раскладку можно с помощью grid-template-areas :

В нашем случае записям без картинки не нужны отдельные правила: область шаблона featimg просто схлопнется, потому что будет пуста. Однако, если использовать grid-gap для рядов, придется завести отдельное правило для .post , без featimg в grid-template-areas .

На широких экранах метаданные записи должны перемещаться вниз,под картинку, чтобы оказаться слева от основного контента. С нашей более плоской разметкой и уже готовым гридом это решается небольшим изменением свойства grid-template-areas в отдельном медиавыражении:

Пример из жизни

На этом месте вы, наверное, уже задались вопросом, как всё это могло бы выглядеть на реальном сайте. Вот ответ на этот вопрос. В ходе работы над этой статьей я создал бесплатную тему для WordPress под названием Kuhn, включив в нее описанные здесь раскладки и не только. Она уже работает на моем личном сайте, и вы можете просмотреть код, использовать эту тему для собственного сайта на WordPress, а также помочь улучшить ее на GitHub.

Заключение

В этой статье я постарался одновременно показать то, как CSS-гриды позволяют создавать динамические, отзывчивые, современные макеты на чистом CSS, и то, насколько этот код чище и проще в поддержке в сравнении с традиционными методами верстки. В более широкой перспективе я хотел показать вам, как думать о веб-раскладках по-новому. С CSS-гридами многое из того, что мы знали о размещении элементов в окне браузера, переменилось, и даже для простых макетов (как из этой статьи) подход стал фундаментально другим и при этом гораздо более интуитивным. Исчезла вся «черная магия» CSS и неинтуитивные хаки с трюками, а им на смену пришли структурированные гриды и декларативные правила.

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

Даже если вы работаете над проектами, требующими обратной совместимости, и считаете CSS-гриды чем-то слишком новым, всё равно начните включать их в свои проекты. Использование @supports и подход, который я наметил в этой статье, позволят вам прогрессивно улучшать существующие сайты, не вызывая проблем в старых браузерах. C CSS-гридами нужно думать по-новому, и уже сегодня нам всем пора начинать переучиваться. Так что вперед, смелее «огридивайте» веб!

P.S. Это тоже может быть интересно:

Если вам понравилась статья, поделитесь ей!

CSS Gr >keynikel в 05.10.2020 05.10.2020

Рубрики
Что еще почитать?
  • Подсказки о доступности подсказок 16.10.2020
  • Плейсхолдеры в полях делают больно 10.10.2020
  • Сборка Webpack 4 для чайников и сочувствующих 22.06.2020
  • Блок со скошенными углами на CSS 19.04.2020
  • Использование инлайн SVG-спрайтов в WordPress теме 13.09.2020

Что вы узнаете:

  1. Как построить CSS-сетку, поддерживаемую браузерами.
  2. Как подключить Grid Layout.
  3. Разберетесь в основах строк и столбцов сетки.
  4. Познакомитесь с новой дробной единицей (fr).
  5. Поработаете со вложенными сетками.

ДА! Пора начинать!

Если вы, вдруг, не знаете, что такое CSS Grid, то, в двух словах, это относительно новый стандарт для создания сеток в CSS.

Шаг 1. Построить CSS-сетку, поддерживаемую браузерами

На момент написания этой статьи (9.04.2020) поддержку браузерами CSS Grid нельзя назвать впечатляющей. Тем не менее, это не повод, не пытаться разобраться с ней уже сейчас.

Поддержка технологии браузерами

Действие: Обновите ваш Chrome, Firefox, Safari или Opera браузер, или просто скачайте последний Firefox или Chrome.

Шаг 2. Изучить основы Grid Layout

Как и во всем в этой жизни, знание основ поможет вам избежать большого количества головной боли.
Действие: Чтение и написание кода
Взгляните на этот код:

Какой CSS Grid Framework нужно использовать для веб-дизайна?

Russian (Pусский) translation by Dima (you can also view the original English article)

Вы когда-нибудь задумывались, как создавались все эти приятные «журнальные» темы для WordPress и других платформ? Многие, если не все, были разработаны с использованием CSS Grid Framework. То есть вы можете использовать существующий CSS фреймворк или создать свой собственный с нуля. Хотя можно создавать сложные макеты веб-страниц без фреймворка, это, скорее, акт мазохизма. В этой статье вы получите обзор текущей партии Frameworks, которую вы будете использовать.

Что такое CSS Grid Framework?

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

Эта же концепция была адаптирована для дизайна веб-страниц по той же причине, с использованием кода CSS (Cascading StyleSheets) для позиционирования элементов HTML. На самом деле, многие редакционные сайты, управляемые крупными издателями печатных СМИ, применяют сетки, чтобы добиться того, чтобы их веб-сайты выглядели аналогично их печатному контенту.
Обратите внимание, что вертикальная ось не так хорошо поддерживается в системах CSS Grid, поскольку высота веб-страницы не так важна, как для печатной страницы. (Тем не менее, это незначительная проблема в дизайне веб-страниц, если только вы не ожидаете тех же функций, что и в Desktop Publishing — так называемых DTP-системах, которые трудно поддерживать без языка, похожего на PostScript, для браузеров, которые можно реализовать и поддерживать.)

Зачем использовать CSS Grid Framework?

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

Конечно, если вы используете сетки, вам придется добавить необходимую разметку HTML-тега к своему контенту, что увеличит размеры файла подкачки. Кроме того, это означает, что разметка и стиль действительно не разделены — принцип, которого многие веб-дизайнеры хотели бы придерживаться. (Некоторые люди считают, правильно или неправильно, что скептики CSS-фреймворков — это дизайнеры, которые обеспокоены тем, что потребность в их услугах уменьшится. Хотя с этой логикой у кодеров тоже есть проблемы, особенно с увеличением количества кросс-браузерных библиотек кода, таких как jQuery.)

Дело в том, что использование CSS grid framework означает, что ваш браузер загружает CSS-файлы только один раз и сохраняет их в кэше «на стороне клиента». Кроме того, дополнительная разметка HTML, необходимая для применения «невидимой» среды CSS, редко бывает настолько значительным, чтоб проблемы с пропускной способностью для читателей должны вызывать беспокойство. (Интересно, что большинство скептиков говорят о Yahoo UI Grids, а не о Blueprint.)

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

Дизайн и эстетические преимущества

Независимо от того, используете ли вы CSS-сетки для создания прототипов или производственных систем, есть много эстетических и дизайнерских преимуществ:

  1. Визуальный дизайн сплоченности между элементами страницы.
  2. Равномерность и согласованность размещения элементов HTML снижает количество ошибок в кодировании CSS.
  3. Проще применить «правило трети» и «золотое сечение» к дизайну, что приводит к визуально привлекательной компоновке для большинства человеческих глаз.
  4. В основном устраняет необходимость использования вложенных таблиц HTML.
  5. Вложенные подсетки для очень сложных конструкций, которые относительно просты в изготовлении.
  6. Проще применять изображения и текстовые выноски для создания асимметричных макетов для визуальной текстуры.
  7. Кросс-браузерная поддержка, так меньше криков и выдергивания волос, при тестировании для этой проклятия дизайнеров, IE. (Билл Гейтс, как ребенок, чувствовал себя настолько нелюбимым, что он создал столько программного обеспечения, которое делает то, что он хочет, вопреки стандартам, которые поддерживает MSFT.)
  8. Сокращает усилия по созданию более удобных макетов веб-страниц по сравнению с кодированием необходимого CSS с нуля.
  9. Сокращает усилия в будущем, если вам нужно переместить элементы или изменить характеристики рендеринга (типография, поля и т. д.) Для связанных элементов в целом.
  10. Используется со статическими страницами и платформами CMS/блогов.
  11. Позволяет широко использовать создание журнальных и премиальных тем для платформ блогов. (WordPress, похоже, является платформой, с которой чаще всего используются фреймворки CSS, хотя любая другая платформа, которая позволяет ссылаться на исходный файл JavaScript, должна работать отлично.)

CSS рамки и инструменты

Вот краткий список некоторых наиболее популярных фреймворков:

  1. Blueprint CSS Grid Framework.
    Надежный, несмотря на то, что он только в V0.7 (на момент написания статьи), с большой поддержкой дизайнеров и многочисленными инструментами для генерации кода CSS (помимо стандартной 24-колоночной структуры по умолчанию с 950 px). Поддерживает использование Blueprint «плагинов».
  2. Yahoo! YUI Grids CSS, Grid Builder.
    Этот каркас, предшествующий Blueprint, поставляется с шестью предустановленными шаблонами и четырьмя предустановленными шаблонами ширины, а макеты соответствуют рекомендациям рекламного блока IAB. YUI Grids CSS интегрирован с остальной частью Yahoo! UI (User Interface) Library.
  3. YAML, YAML Builder.
    YAML (еще одна многоколоночная схема) имеет достаточную зрелость, построена на веб-стандартах и ​​предположительно проста в использовании. Хотя в сообществе WordPress это не так уж и полезно. Фактически, из многих сотен тем WP, которые я просматривал в течение последних трех лет, я не помню, чтобы когда-то его использовали. Это может быть связано с тем, что вам нужна лицензия для использования с некоторыми CMS (Content Management Systems).
  4. Grid Designer.
    Это веб-инструмент для создания пользовательских CSS-сеток. Он использует свои собственные классы CSS, так что его можно назвать каркасом, хотя он не так хорошо поддерживается сообществом дизайнеров, как некоторые другие.
  5. 960 CSS Grid System. Эта система основана на ширине страницы 960 пикселей, которая является числом, которое делится на многие другие числа, что делает ее «очень гибким базовым числом для работы». Однако 960 Grid работает только с 12 или 16 столбцами.
  6. CSS Boilerplate. Произведено в виде урезанного фреймворка одним из оригинальных авторов Blueprint.
  7. Sparkl. Документация говорит, что вы можете создавать страницы с 1, 2 или 3 столбцами, но примеры показывают, что вы обладаете большей гибкостью.

Существуют и другие CSS Grid-фреймворки, которые вы можете найти в списке в Google Code, но из трех или четырех, которые я рассмотрел, большинство были неполными с точки зрения документации или даже файлов проекта, поэтому я оставил их. Если вы знаете о фреймворке, которого нет в списке, сообщите нам об этом в комментариях!

Сравнение

Позвольте мне отметить, что это не всестороннее сравнение CSS-фреймворков. На самом деле я не использовал ничего, кроме Blueprint, хотя я отсканировал документы для всех перечисленных выше платформ и немного поиграл с YAML и Grid Designer. Blueprint, YUI Grids и YAML, возможно, являются «большой тройкой» в плоскости фреймворков CSS, и 960, похоже, является твердым четвертым выбором.

При выборе фреймворка я учел, что я не обученный дизайнер — помимо того, что я изучал самостоятельно годами. Я занимаюсь дизайном, когда это необходимо, хотя и в очень минималистской форме. Фактически, из-за того, что я потратил довольно много лет либо на издание своего собственного печатного журнала, либо на работу над другими, я довольно много (очень плохого) макета страницы использовал принципы построения сетки, работая с Adobe PageMaker. Поэтому я нахожу очень естественным работать с сетками CSS для веб-дизайна. Похоже, что учитывая количество тем WordPress — см. Список в конце этой статьи — которые основаны на сетке (в основном Blueprint), дизайнеры тоже чувствуют себя достаточно комфортно с сетками.

Тем не менее, со временем, всегда ограниченным, мне нужно что-то простое в освоении и использовании, но надежное. Я обнаружил, что Blueprint CSS Grid соответствует моим потребностям. Он прекрасно интегрируется с различными библиотеками JavaScript, включая jQuery, что может привести к чертовски привлекательным веб-интерфейсам. Он хорошо рендерится (хотя и не на 100% идеально) в большинстве браузеров — хотя вам нужно проверить это большое занятие в сторонах веб-дизайнеров, браузер IE.

Основываясь на моем свободном исследовании CSS Grids в прошлом году, Blueprint представляется наиболее надежной средой, наименее ограничивающей, наиболее поддерживаемой — с точки зрения того, насколько широко ее использование — наименьшего размера и среды с наибольшим количеством инструментов. На самом деле, прелесть Blueprint в том, что вы можете очень быстро создать код CSS для пользовательской среды, используя такие инструменты, как Kematzy’s Blueprint Grid CSS Generator. Хотя вы можете сделать это с помощью Grid Designer, быстрое сравнение показало бы, что он не такой надежный, как Blueprint.

С другой стороны, сканирование и просмотр документации для Yahoo! Инфраструктура CSS пользовательского интерфейса заставляет меня поверить, что если вы просто хотите сделать простой макет веб-страницы и хотите использовать несколько пресетов, возможно, вы захотите рассмотреть эту опцию. Тем не менее, я чувствую, что это слишком ограничительно на мой вкус. (Вы можете прочитать Blueprint CSS Framework от Foo Hack против YUI Grids.)

В конечном счете, когда дело доходит до изучения чего-то нового в Интернете — такого как язык программирования и библиотека/фреймворк кода — я всегда применяю «правило плеча гигантов». Сначала я выбираю варианты, которые кажутся подходящими для того, что мне нужно, а затем выбираю, основываясь на том, сколько было написано. Может показаться несправедливым по отношению к новым вариантам, но этот процесс не намного более произвольный, чем то, как многие люди выбирают веб-приложения для использования. Там слишком много всего, чтобы отслеживать, и существующее поддерживающее сообщество имеет большее значение.

Почему я выбрал Blueprint CSS

Blueprint CSS Grid Framework — это то, что я буду использовать во всех моих уроках в NETTUTS (когда это актуально). Вместо того, чтобы копировать список функций из документации в Google Code, позвольте мне сосредоточиться на том, почему я лично выбрал его. Некоторые из этих пунктов совпадают с тем, что я сказал выше:

  1. Относительно небольшие размеры файлов. Имеет сжатые версии для производственного использования, для дальнейшего уменьшения размера.
  2. Печать + таблицы стилей экрана.
  3. Простой в интеграции и использовании. (Хотя браузеры IE проблематичны, в зависимости от того, какая версия Blueprint используется.)
  4. Легко запомнить CSS классы и идентификаторы, которые вряд ли будут конфликтовать с теми, которые вы уже используете.
  5. Много вспомогательных инструментов, особенно для создания пользовательских сеток.
  6. Много статей/учебных пособий о Blueprint, с большим количеством позитивной атмосферы.
  7. Частое использование Blueprint дизайнерами тем WordPress.

Как уже упоминалось выше, я сталкиваюсь с проблемами IE — но не все ли? Некоторые WP-темы, использующие Blueprint, решили проблемы с браузером IE, поэтому я экстраполирую их, полагая, что в основном их можно решить.
Blueprint, на момент написания этой статьи, не поддерживает жидкие макеты — в чем я не большой поклонник. Тем не менее, такая поддержка, очевидно, прийдет, если вы опираетесь на этот метод.

Образец процесса проектирования на основе сетки

Ну, это вопрос выбора, не так ли? Некоторые CSS-сетки поставляются с файлом grid.png или даже файлом .psd, который можно использовать в прозрачном режиме в Photoshop, Fireworks, GIMP и т. д., Пока вы закладываете элементы дизайна. Я немного старше и всегда разрабатываю макеты, начиная с бумаги:

  1. Заблокируйте ограничивающий прямоугольник, представляющий всю веб-страницу. (Делайте это для каждой разрабатываемой страницы.)
  2. Разбейте прямоугольник на меньшие прямоугольники, представляющие основные области: верхний колонтитул, нижний колонтитул, боковую панель, область содержимого и т. д.
  3. Далее разделите основные области карандашем в элементе дизайна (сайт, логотип, кнопка rss, последние сообщения, последние комментарии, окно поиска, примеры сообщений, миниатюры сообщений и т. д.)
  4. Переведите этот окончательный эскиз в скелет HTML, используя реальный текст или lorem ipsum text. HTML-разметка будет включать в себя необходимый class CSS Grid и значения id для поддержки нужного мне макета.
  5. Создание баннеров/кнопок в графическом программном обеспечении.
  6. Протестируйте макет HTML в максимально возможном количестве браузеров и версий. (Возможно, вам придется нанять нескольких друзей, если у вас только один компьютер.)
  7. Преобразование текста в код CMS/платформы. (Например, преобразовать текстовые блоки в необходимые вызовы функций WP и код PHP.)

Вы заметите, что нигде в этом процессе не используется графическое программное обеспечение для макета. Это потому, что я не дизайнер и использую очень минималистский подход к тому, что я проектирую (только для себя). Но если вы планируете использовать, скажем, Fireworks для макета, вы должны сделать это между шагами #3 и #4.

Резюме

Я пытался найти исчерпывающие сведения в поиске CSS Grid Frameworks, просматривая более 120 статей на предмет потенциальных клиентов. Однако, возможно, я пропустил некоторые варианты, поэтому не стесняйтесь предлагать другие.
Какой бы CSS-фреймворк вы ни решили использовать, делайте это, потому что он лучше всего соответствует вашим общим потребностям. Если на ваших страницах/шаблонах будет реклама, подумайте, о типе рекламы. Вначале, когда я выбирал темы для своих сайтов, я выбирал объявления AdSense (которые соответствуют IAB). Совсем недавно я выбирал/проектировал блоки для рекламы размером 125×125, что я предпочел бы больше, чем большинство блоков AdSense.
Если вам интересно, есть проект спецификации W3C под названием «CSS Grid Positioning Module Level 3» (написанный двумя сотрудниками Microsoft), в котором обсуждается интеграция основанного на сетке макета в CSS. Функции, обсуждаемые в этом проекте, могут быть в IE 8.

Ссылки

Связанные инструменты

  1. Blueprint CSS AIR Grid Tool.
  2. Blueprint CSS Quick Reference (PDF, 1 страница).
  3. CSS Grid калькулятор.
  4. Diagnostic CSS.
  5. Reset CSS.

Некоторые статьи или сайты о CSS Grid Frameworks

Здесь приведены ссылки на несколько замечательных статей о CSS-сетках.

46 бесплатных или платных специализированных тем

Если вы чувствуете, что еще не готовы заняться сетками и дизайном тем, но нуждаетесь в теме об этом, возможно, вот один из самых полных списков, которые вы найдете. (На самом деле их больше 46, если вы включаете варианты.) Он включает в себя журнал, галерею, специальность и различные премиальные темы, которые используют explicit или implicit CSS-сетки. (Возможно, один или два не используют сетки, хотя это на первый взгляд.)
Некоторые из этих тем бесплатны или имеют бесплатную версию. Большинство из них для платформы WordPress. Этот список включает в себя только темы, доступные для широкой публики, не обязательно настраиваемые сетки, используемые различными блоггерами. (См. Избранные ссылки в предыдущем списке, в том числе Web Designer Wall и Smashing Magazine, чтобы получить снимки таких сайтов. Также см. Вычитание Khoi Vinh’s как пример визуально эффективного сайта на основе сетки.)
Предупреждение: некоторые из этих тем могут не работать в WP 2.5x+

Почему CSS Gr >

Когда-то давно я писал про необычный сервис , представляющей собой ИИ для создания сайта. Судя по текущим результатам, получилось у них «так себе», особенно учитывая заявленный прайс. в этом плане поэффективнее будут.

Сегодня же хочу поговорить о похожей по названию, но совсем другой по сути «технологии» — CSS Grid! Пост состоит из нескольких частей:

Данный подход в построении макетов позволяет легко создавать достаточно гибкие сетки сайтов с помощью CSS. В будущем он, наверняка, будет использоваться повсеместно. Если я правильно понимаю, отлично подойдет для тех же задач, что и Flexbox, но в отличии от него может одновременно работать в двумерных измерениях (столбцах и строках). Ниже предлагаю перевод статьи , что является неким вступлением в тему и содержит простые познавательные примеры. Внимание! Автор заметки проводит в декабре бесплатный(!) курс по CSS Grid, если хотите, отправляйте запрос на его Email.

Также на просторах интернета нашел полезное видео по теме. Возможно, кому-то проще воспринимать информацию так:

Введение в CSS Grid

В текущем году эта технология получила встроенную поддержку в Chrome, FF, Safari, поэтому вполне вероятно, в недалеком будущем станет популярными инструментом. Но пока что нужно не забывать позаботиться об устаревших и отстающих веб-браузерах.

Самая простая сетка

Здесь 2 основных объекта:

  • родительский / wrapper (оборачивающий все внутренние, составляющие его блоки);
  • дочерние / items (сами элементы).

Вот простейшая конструкция:

Однако сразу после этого ничего особо не поменяется, так как не определен формат отображения. Вы увидите 6 DIV’ов идущих друг после друга.

Колонки и строки

Чтобы сделать вашу сетку двумерной нужно указать параметры строк и колонок — используем опции grid-template-row и grid-template-colum соответственно:

.wrapper

Поскольку для колонок имеется три значения, то их будет генерироваться такое же число, следовательно, рядков — только 2. Цифры в пикселях задают в первом случае ширину элементов (по 100px), во втором — высоту (50px).

Вот еще один пример, который поможет лучше понять принцип работы:

.wrapper

Отобразится следующая картинка:

Расположение и размеры

С этой функцией вы получите реально очень мощные возможности по созданию сеток сайтов. Допустим, у нас имеется размер 3х3:

.wrapper

Если в HTML коде, как в нашем примере, 6 DIV элементов (см. в самом начале), то в данном случае на сайте отобразится только 2 ряда, третий временно не будет заполнен. Однако, когда мы начнем применять разные параметры для позиции и размеров блоков — grid-columnand grid-row , ситуация изменится.

Задаем одному из объектов стили:

.item1

Это означает, что DIV c классом item1 начинается с первой линии колонки в сетке и заканчивается на 4-той, то есть заполняет собой весь ряд.

Собственно, теперь некоторые объекты переместились на последнюю строку, которая у нас была прописана заранее (3х3). Существует вариант попроще:

.item1 < grid-column : 1 / 4 ; >
.item1 < grid-column-start : 1 ; grid-column-end : 3 ; >.item3 < grid-row-start : 2 ; grid-row-end : 4 ; >.item4

Он дает нам следующую картинку:

Получилось разобраться? В принципе, не сложно, однако нужно понимать, что это лишь базовая часть нюансов по CSS Grid.

Прототипирование и области макета с CSS Grid

Код разметки при этом следующий (HTML):

Если по строкам все, в принципе, понятно, то с колонками нужно прояснить. Здесь в значении gr >

Добавляем grid-template-areas

Опция дает еще больше гибкости и удивительных функций. Возможно, синтаксис и оформление параметра grid-template-areas выглядит немного необычно, но дальше вы поймете почему все именно так:

.container

Это своего рода визуальное представление вашей сетки сайта в CSS. Все символы в данном параметре формируют 3 строки и 12 колонок, определенные строкой выше. Каждая буква отвечает за одну ячейку. Названия в примере соответствуют блокам HTML кода: header (h), menu (m), content (c) и footer (f), но можете использовать любые другие варианты.

Присвоение областей шаблоны и эксперименты

На следующем шаге вы «логически связываете» символы контейнера и элементы DIV:

.header < grid-area : h; >.menu < grid-area : m; >.content < grid-area : c; >.footer

На сайте отобразится макет вида:

А теперь начинается магия. Давайте поменяем местами некоторые буквы в параметре grid-template-areas , например «c» и «m» местами:

grid-template-areas : «h h h h h h h h h h h h h» «c c c c c c c c c c c m m» «f f f f f f f f f f f f f» ;

grid-template-areas: «h h h h h h h h h h h h h» «c c c c c c c c c c c m m» «f f f f f f f f f f f f f»;

Сетка будет выглядеть по другому:

Добавление адаптивности в эту конструкцию вообще выглядит потрясающе. С помощью одного HTML вы бы такое не реализовали, а вот в CSS все возможно.: «. h h h h h h h h h h .» «c c c c c c c c c c m m» «. f f f f f f f f f f .» ;

grid-template-areas: «. h h h h h h h h h h .» «c c c c c c c c c c m m» «. f f f f f f f f f f .»;

На сайте выглядит так:

Никаких скриптов и HTML — только магия CSS Grid!

Дополнительные примеры Grid и Flex

Позже на CSS Tricks нашел еще одну статью по теме, некоторые варианты из нее могут вам пригодиться. Переходите по ссылкам на (лого в блоке кода сверху справа) чтобы увидеть работу примера на большом экране.

Классический макет сайта

У нас имеется шапка и футер, растянутые на всю ширину, а между ними — блок контента с двумя сайдбарами. В первом случае при уменьшении экрана все объекты останутся в тех же позициях, что и раньше.

Если нужно чтобы блоки располагались один под другим, то:

2х колоночная сетка блога

Допустим, у нас в центре большой блок контента и сайдбар. Код ниже при уменьшении размеров страницы сохраняет все объекты на своем месте.

Второй прием — дает их расположение один за другим.

Распределение элементов по ширине

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

Картинка внутри статьи

Здесь контент разделен на 2 части, а между ними расположен полноэкранный блок.

Итого. В общем, открыл для себя понятие CSS Grid, которое, честно говоря, приятно впечатлило — особенно рам где рассматривались области макета с разными буквами. Безусловно, это все лишь азы «технологии», плюс я не расписывал детально каждый параметр кода. В последнем разделе статьи примеры более комплексные, их следует внимательно просмотреть. Там комбинируется и Flex, и Grid. Если данная тема интересна, подписывайтесь на курсы первого автора — Email записи в оригинальной первой-второй заметке.

Есть что добавить по CSS Grid? — пишите мысли, советы или присылайте интересные линки.

Где-то в 2012 или 2013 году я познакомился с веб-разработкой. Постепенно я начал изучать это направление самостоятельно. Вскоре я понял, что CSS придаёт смысл многим вещам, но не создаёт адекватную разметку. Существует столько хаков, что разобраться в них слишком сложно. Вот почему в современных стандартах, о которых пойдет речь в этой статье, работе с разметкой уделили особое внимание.

Что вы узнаете из этой статьи:

  • как раньше работали с CSS-разметкой;
  • разницу между устаревшими подходами и современными стандартами;
  • как начать работу с новыми стандартами (Flexbox и Grid);
  • почему вас должны волновать эти современные стандарты.

Как раньше работали с CSS-разметкой

Задача

Давайте смоделируем весьма стандартную задачу: как создать страницу с двумя секциями — боковой панелью и зоной с основным контентом, у которых одинаковая высота, независимо от размера контента?

Вот пример того, к чему мы стремимся:

Боковая панель и зона с основным контентом одинаковой высоты, независимо от размера контента

Для начала я покажу, как решить эту задачу с помощью устаревших подходов.

Почему стоит использовать CSS фреймворки вместо Grid Layout: плюсы и минусы

В этой статье вы найдете полный курс по сеткам CSS. Мы разберем что это такое, какие отличая с FlexBox и как с можно работать с CSS Grid.

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

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

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

Предлагаем вам посмотреть полноценное видео по изучению сеток CSS, чтобы моментально вникнуть в суть CSS Grid :

В ходе урока было создано три страницы, код каждой страницы вы можете скопировать ниже.

Топ-пост этого месяца:  Как зарегистрировать домен (купить доменное имя у регистратора)
Добавить комментарий