Верстка \ HTML&CSS

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

От автора: начать данную статью я должен с признания: очень долгое время я не мог никак понять, как работают w дескриптор в адаптивных HTML5 изображениях, а также работу атрибута sizes. Принцип использования тега picture и изменение разрешения картинки с помощью srcset и x дескриптора были ясны, но когда все это стало намного сложнее, с приходом запятой-разделителя в синтаксис, а также появление атрибута sizes и w все стало очень запутанно. Статьи на эту тему и спецификации только усугубляли все: для чего это было все создано, и почему я хочу их применять?

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

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

Как создать прилипающее меню с помощью CSS или JQuery

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

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

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

Улучшение отзывчивого веб-дизайна с помощью RESS

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

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

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

Больше никаких CSS Grid фреймворков

От автора: пару минут назад я прочитал пост на Designer News. Пост написал парень, который хочет создать очередной CSS grid фреймворк, основанный на flexbox. Скорее всего, он знает, что таких фреймворков уже полно в сети, но это не удержало его от того, чтобы узнать, что по этому поводу думают другие.

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

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

Настройка Bootstrap: выбор нужных компонентов

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

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

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

Знакомство со Skeleton, простым стартовым CSS шаблоном

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

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

Верстка \ HTML&CSS

Сетки, созданные с помощью calc(), — лучшие сетки

От автора: Привет. Меня зовут Кори (Cory). У меня есть одна небольшая страсть. Я уже очень давно и серьезно увлекаюсь сеточными системами. По факту, я помог создать достаточно популярную сеточную систему под названием Jeet. Я всегда любил, когда математика используется для упорядочивания и расстановки вещей.

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

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

Маленький, большой: используя CSS значение fit-content

От автора: В предыдущих статьях я рассказал о новых поддерживаемых (и не только) CSS значениях, например, object-fit, max-content и min-content. И хотя данные значения до сих пор официально являются «экспериментальными», они имеют отличную браузерную поддержку (при наличии соответствующих вендорных префиксов).

Находясь где-то между max-content и min-content, значение fit-content может быть очень полезным, особенно при создании отзывчивых дизайнов.

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

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

Знакомство с Bootstrap

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

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