Верстка \ HTML&CSS

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

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

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

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

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

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

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

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

Foundation 6: Новый компонент меню

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

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

Верстка \ CSS 3

Дизайн макета страницы с товарами при помощи Flexbox

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

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

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

Что нового в Foundation 6?

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

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

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

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

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

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

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

Знакомство с sGrid: Flexbox Grid система на основе препроцессора  Stylus

От автора: прочитав заголовок, вы можете задаться вопросом: Почему еще одна сеточная система? И это хороший вопрос. По существу, существует множество grid систем, и все они на основе flexbox. Так почему же я решил построить еще один похожий инструмент? Ответ будет коротким – данная система полностью адаптивна для построения семантических сеток с использованием только лишь препроцессора Stylus.

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

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

Новый адаптивный шрифт для сайта

От автора: в ноябре этого года Nick Sherman выступил с докладом для сайта Ampersand. Выступление в основном было построено по его статье «изменяющиеся шрифты в адаптивном дизайне». И в статье и в своем выступлении автор предлагает новый адаптивный шрифт для сайта для решения сложных проблем адаптивного дизайна:.

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

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

Адаптивные изображения на сайте: создание с помощью атрибута srcset

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

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