От автора: в этом уроке мы создадим адаптивную форму при помощи flexbox. Интересен и удивителен тот факт, что flexbox позволяет строить формы без медиа запросов.

Читать далее →

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

Читать далее →

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

Читать далее →

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

Читать далее →

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

Читать далее →

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

Читать далее →

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

Читать далее →

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

Читать далее →

От автора: автор статьи – наш гость, Левин Мехия, дизайнер адвокат с сайта Shopify. В своей новой теме, разработанной для Shopify, они использовали технологию Flexbox. Данной и другими техниками они хотят с нами сегодня поделиться в этой статье по дизайну макета страницы. На что я ответил – да, конечно.

Читать далее →

От автора: Так же как создавать системы с нуля, контролируя каждый этап дизайна и разработки, иногда будет намного легче, лучше и быстрее отдать базовое управление фреймворку и сосредоточить свое внимание на чем-то интересном. В данной статье, мы узнаем, что нового в фреймворке Foundation 6.

Читать далее →