Блог

В настоящее время широкое распространение получили библиотеки с заранее готовыми компонентами дизайна сайтов. Две популярные мы рассмотрим ниже, но начнем с того, как делается вёрстка руками. Сверстаем двухколончный список карточек, который на узких экранах (скажем, менее 991 пикселя шириной), становится одноколоночным.

"Ручная" верстка - эксклюзив!

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

Верстку обычно начинают с "лайаутов" (layouts) - то есть определения разметки в HTML. Затем добавляют стили CSS, и затем - обработку событий с помощью Javascript.

Пример верстки

Готовая верстка - скорость!

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

Bootstrap

Twitter Bootstrap - открытая библиотека от сотрудников Twitter. В ней множество готовых элементов и компонент, в частности сетка для адаптивности (та, которую мы сделали руками через запрос media), те же карточки (начиная с версии 4). Эта библиотека для верстки интерфейсов чрезвычайно популярна не только на Западе, но и в Росии.

Пример Twitter Bootstrap v4-aplha

Material

Материальный дизайн - это изобретение (и продукт) компании Google. Изначально в открытом виде существовала его облегченная версия Material Design Lite. Затем её стали развивать в другом виде (в виде мелких компонент), и помимо этого появились многочисленные библиотеки-"подражатели", и одна из лучших таких это MaterializeCSS.

Пример MaterializeCSS

Когда что лучше

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