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

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

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

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

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

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

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

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

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

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

Отзывчивая навигация по вкладкам

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

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

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

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

Как сайты с отзывчивым дизайном загружать чертовски быстро

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

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

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

Руководство по созданию удобных и отзывчивых CSS-колонок

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

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

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

Отзывчивые изображения: примеры использования

От автора: Наконец-то, по-настоящему отзывчивые изображения становятся реальностью в веб-разработке — на чистом HTML, без применения хитроумных хаков. Элемент picture и несколько новых атрибутов для элемента img уже появились в браузере Chromium 37 (а также скоро появятся и в браузере Opera), в браузере Firefox Nightly, и в настоящее время внедряются в движок WebKit (хотя еще предстоит узнать, будет ли компания Apple внедрять их в следующую версию браузера Safari).

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

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

Отзывчивые блоки одинаковой высоты на основе Flexbox

От автора: После публикации поста о том, как я создал отзывчивые блоки одинаковой высоты на сайте Readerrr, я получил несколько полезных отзывов от сообщества веб-разработчиков. Дэниел Стёрм (Daniel Sturm) предложил мне использовать модуль Flexbox из CSS3 вместо JavaScript, а Вирли Питерс (Veerle Pieters) оставил твит «… вы можете сделать это с помощью Flexbox, а JavaScript использовать для подстраховки». Точно! И почему я сам об этом не додумался?! Я читал до этого несколько статей про Flexbox, но сам никогда его не применял, поэтому он совершенно вылетел у меня из головы.

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

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

На пути от отзывчивого веб-дизайна к адаптивному

От автора: Сегодня не найти такого веб-разработчика, который не слышал бы о концепции отзывчивого веб-дизайна (responsive web design или RWD). С тех пор как Итан Маркотт придумал данный термин в мае 2010 года, отзывчивый веб-дизайн был признан одним из лучших направлений, успел сформироваться, а также появилось множество возможностей и способов его реализации.

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

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

Отзывчивая резиновая навигация с меняющимся числом пунктов на CSS

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

Подумав наперед, я решил, что было бы нерационально изменять CSS всякий раз, когда потребуется добавить или удалить один из пунктов меню. Нужно было найти подходящее решение, и, в идеале, без применения JavaScript.

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