Верстка \ Адаптивная верстка

Как создать адаптивный макет CSS Grid

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

Продолжить чтение

Верстка \ Адаптивная верстка

Адаптивный табличный макет

От автора: меня раздражает, что очень часто таблицы плохо оптимизированы под мобильные устройства. К примеру, я на википедии со своего iPhone просматриваю список серий сериала Звёздный путь: Следующее поколение (да, я вырос в поздних 80-х), а в таблице очень много колонок и информации. И мне приходится долго листать назад и вперед, переворачивать телефон. Все это сильно раздражает.

Продолжить чтение

Верстка \ Адаптивная верстка

Элементные запросы: будущее адаптивного веб-дизайна

От автора: медиа запросы – неотъемлемая часть веб-дизайна, однако они далеко не всегда хорошо работают. В этой статье мы рассмотрим идею «элементных запросов», вокруг которой ходит много споров. Многие считают, что элементные запросы – это будущее адаптивного веб-дизайна.

Продолжить чтение

Верстка \ Адаптивная верстка

Руководство по улучшению селекторов и медиа запросов в PostCSS

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

Продолжить чтение

Верстка \ Адаптивная верстка

Совет: как создать адаптивный макет сайта с помощью обтеканий

От автора: В сегодняшнем небольшом уроке мы научимся создавать адаптивные макеты сайта с помощью свойства CSS float — старого, но проверенного способа. После мы посмотрим, как с этим же справляется Bootstrap. Изначально обтекания не были предназначены для создания базовой структуры страницы (в последних стандартах типа flexbox и grid эта проблема решена), так что работа с ними может быть немного запутанной. Разберем пример.

Продолжить чтение

Верстка \ Адаптивная верстка

Как создать адаптивный многоколоночный шаблон с помощью CSS

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

Продолжить чтение

Фреймворки \ Foundation

Foundation 6: Новая гибкая сетка

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

Продолжить чтение

Верстка \ HTML&CSS

Как сделать адаптивный текст для баннера домашней страницы на SVG

От автора: адаптивный текст можно сделать с помощью vw единиц измерения, однако из-за отсутствия свойств max и mix-font-size в CSS вам придется добавить целый набор медиа запросов, которые будут контролировать отображение текста на больших экранах и экранах мобильных устройств. Vw текст находится между двух огней, зажатый медиа запросами.

Продолжить чтение

Верстка \ Адаптивная верстка

Создание адаптивной сетки изображений при помощи современного CSS

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

Продолжить чтение