L o a d i n g . . .

(Ru) Современные способы сборки HTML макетов

Modern ways of creating HTML layouts

2017 год

Download presentation

(Ru) Доброго времени суток

(Ru) Я как и многие из вас обучался программированию самостоятельно, начинал я верстать макеты float позиционированием, затем перешел на bootstrap3 а после узнал про flexbox. Это значительно упростило и улучшило вёрстку. Я хотел бы вкратце рассказать про Flexbox, CSS-Grid и то, почему не стоит злоупотреблять библиотеками. Начнём с последнего.

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

(Ru) Второй причиной стало использование дефолтных компонентов библиотеки, таких как коллапсы, попапы, многоуровневое меню и т.д. Когда я начинал использовать bootstrap3 я не знал как сделать большую часть из этого руками и как только вставала задача сделать что-то нестандартное я сразу терялся, потому как не знал как переделать готовое решение от библиотеки. В итоге всё пришло к тому, что я просто перестал их использовать и абсолютно все фичи, кроме самых тяжелых, таких как слайдер, стал делать сам. Это открыло много возможностей к кастомизации, и значительно улучшило мои знания jQuery.

(Ru) И последняя причина это размер этих самых библиотек. Хоть и есть возможность скачивать только то, что нужно. Например для bootstrap3 можно скачать только стили для сетки, не смотря на это часто встречаются проекты где висит вся библиотека размером в 300+ кб.
Как по мне, использования bootstrap/materialize допустимо при создании макетов которые будут видоизменяться, либо-же тогда, когда этого хочет клиент.

(Ru) Flexbox

(Ru) Узнав про flexbox я очень удивился тому, что с помощью пары строчек кода можно очень гибко выстраивать элементы на странице. Вот немного теории: Модуль Flexbox-лейаута предлагает более эффективный способ вёрстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и/или динамический. Если при работе вы используете препроцессор, в моём случае SASS с диалектом SCSS тогда использование flexbox стилей значительно упрощается. По фактку всё, что я использую в своей работе это вот этот миксин:

(Ru) Свойством display:flex мы указываем что контейнер будет иметь свойста флексбокса. Затем указываем основное направление дочерних элементов свойством flex-direction, то есть будут ли они идти в строку либо в колонку, flex-wrap позволяет или запрещает элементам в переноситься на следующую строку. И остались два самых на мой взгляд интересных свойства. О них чуть позже.
И собственно таким образом мы вызываем миксин и как итог всего 1 строчкой кода позиционируем необходимые элементы:

(Ru) Как показала практика, остальные свойства используются крайне редко.

(Ru) И вот самые интересные возможности flexbox. Свойство justify-content определяет выравнивание элементов относительно главной оси, за главную ось отвечает свойство flex-direction. И свойство align-items, можете считать это версией justify-content для поперечной оси. Вот эти два свойства то, без чего мне уже сложно обойтись при вёрстке.

(Ru) Вот какие значения имеет свойство justify-content:

(Ru) И вот какие значение есть у align-items

(Ru) Теперь примеры:
Тут у нас обычная шапка

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

(Ru) И с flexbox

(Ru) Всё это приведет к такому позиционированию элементов.

(Ru) Самое же интересное происходит после перехода брейкпоинта. Так будет выглядеть меню с использованием flexbox технологии:

(Ru) А так при использовании стандартного решения:

(Ru) Как вы видите, при использовании стандартного решения, нам придется писать media запрос, а при использовании flexbox(a), нам не нужно будет добавлять никаких стилей, влияющих на позиционирование элементов.

(Ru) И еще один пример:

(Ru) Обратите внимания на значение stretch у свойства align-items, оно позволяет выровнять высоту всех дочерних элементов по самому большому в одном ряду.

(Ru) Еще важно помнить, что если у вас больше чем 1 ряд элементов, стоит использовать значение flex-start у свойства justify-content, и выставлять margin вручную, иначе получится вот так.

(Ru) CSS-Grid

(Ru) Css-Grid это очень обширная тема, освещать её можно очень долго, я же постараюсь вас заинтересовать, рассказав об основном.

(Ru) Css-Grid принёс в таблицы стилей новую сисему измерения, сейчас мы рассмотрим её поподробнее. У нас есть контейнер с новостями, ширина которого является 970px; В нём мы создаём 4 колонки, ширина первой будет равнятся 240px, а остальные будут расчитыватся новой системой измерения. Расстояния между колонками равняется 10px. Итого у нас 2/4 оставшегося пространства а именно 350px отходит на вторую колонку, а на третью и четвертую остается по 1/4 (175px).

(Ru) Что-бы лучше объяснить для чего нужен css-grid, посмотрите на этот слайд и представьте что любой из этих элементов, можно поместить в любое другое место с помощью от 1 до 3 строк css кода, без изменения html, и при этом элемент не будет иметь привычного для подобных случаев абсолютного позиционирования. CSS-Grid отлично может справляется как с такими масштабными вещами как на этом слайде, так и может стать альтернативой flexbox(у) в более простых решениях.

(Ru) Рассмотрим данный пример из flexbox, только реализованный на css-grid.

(Ru) Решение с использованием CSS-Grid:

(Ru) Решение с использованием Flexbox:

(Ru) Как вы видите при стилизации через css-grid мы не задаём никаких стилей для дочерних элементов. За расстояния между новостями отвечает свойство grid-gap. В итоге всё выглядит одинаково. Что из этого использовать - решать вам.

(Ru) Сравнивая эти две технологии в первую очередь нужно смотреть на их совместимости с браузерами. Если использовать кросс-браузерные префиксы, то технология flexbox совместима почти со всеми используемыми версиями браузеров, а именно с 99.57 процентами.

(Ru) В свою очередь технология css-grid совместима всего с 76.88 процентами браузеров.

(Ru) Вот как мы можем определить браузеры, которые не поддерживают CSS-Grid

(Ru) Но к сожалению всеми любимый IE не понимает данных стилей, и для него придется прописать такой маленький скрипт, который в свою очередь повесит класс "browserIE" на тэг body, если версия IE браузера 9 или ниже.

(Ru) По-этому какие-то простые вещи предпочтительнее делать через flexbox.

(Ru) Исходя из всего сказанного можно сделать вывод, что css-grid и flexbox не взаимозаменяемые а взаимодополняемые технологии, выучив которые создавать новые проекты станет намного приятнее и быстрее. Тем, кто еще совсем знаком с ними, рекомендую начать изучение с этих игровых обучалок.
Flexbox и CSS-Grid

(Ru) Успехов в обучении!

Следующий проект

Blog is preparing