Верстка \ CSS 3

Исправляем нежелательное влияние пустых пространств на высоту строки

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

Читать далее

Верстка \ CSS 3

CSS: проблемы и способы их решения

От автора: чем больше я использую CSS, тем больше я думаю, что это абсолютно непаханое поле. Он зрелый, везде встречается, но в нем нет базовых, понятных функций, которые в других подобных инструментах есть. Поработав с несколькими современными MVC веб-приложениями с хорошей структурой back end, обширным тестовым покрытием и хорошей документацией, зачастую мне кажется, что стили похожи на гигантские дымящиеся горы спагетти.

Читать далее

Верстка \ CSS 3

Создание тем с помощью переменных: глобальные и локальные

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

Читать далее

Верстка \ CSS 3

CSS Grid макет приложения в продакшене

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

Читать далее

Верстка \ CSS 3

Merry Gridmas! Создание праздничного календаря с помощью CSS Grid

От автора: эта статья является частью серии «CSS Grid Layout». В этом руководстве мы собираемся создать праздничный календарь CSS, для этого мы будем использовать CSS Grid, SVG и несколько праздничных изображений! Сначала посмотрите на то, что мы будем создавать.

Читать далее

Верстка \ CSS 3

Как я организую архитектуру CSS в больших проектах с помощью UFOCSS

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

Читать далее

Верстка \ CSS 3

CSS Grid Layout и создание комиксов (на примере кота Барри)

От автора: эта статья является частью серии «CSS Grid Layout». Оказывается, CSS Grid может внести немалый вклад в создание комиксов, особенно если вы хотите, чтобы ваши комиксы были адаптивными. В этом руководстве мы используем кота Барри, чтобы продемонстрировать, как создать адаптивный комикс.

Читать далее

Верстка \ CSS 3

Как создать макеты веб-форм с использованием CSS Grid

От автора: эта статья является частью серии «CSS Grid Layout». В этом руководстве мы рассмотрим, как создать пару различных веб-форм с использованием CSS Grid. Для каждого примера мы сначала будем использовать float, а затем посмотрим, как можно создать тот же CSS макет с помощью Grid. Если у вас нет базовых знаний по CSS Grid, ознакомьтесь с предыдущими статьями этой серии. Давай приступим!

Читать далее

Верстка \ CSS 3

«Алгоритм автоматического размещения» CSS grid-auto-flow

От автора: эта статья является частью серии «CSS Grid Layout». В одном из наших ранних руководств по реализации CSS Grid мы рассмотрели гибкие столбцы и улучшенные зазоры. Мы узнали, что нам не нужно точно указывать, где мы хотим разместить элементы сетки; если мы объявим свойства сетки, Grid поместит наши элементы в соответствии с алгоритмом автоматического размещения. Это делается с помощью CSS Grid auto-flow. В этом руководстве мы рассмотрим, как этот алгоритм работает и как мы можем влиять на это.

Читать далее