Верстка \ CSS 3

В защиту методологии Utility-First CSS

От автора: композиция, а не наследование. Этот кусочек мудрости от Design Patterns, одной из самых влиятельных книг по разработке программного обеспечения, является основой utility-first. Он также разделяет многие принципы с функциональным программированием: неизменность, композитивность, предсказуемость и предотвращение побочных эффектов. Цель всех этих причудливых терминов — написать код, который легче поддерживать и масштабировать.

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

Верстка \ CSS 3

Как воссоздать макет статьи с Medium с помощью CSS Grid

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

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

Верстка \ CSS 3

CSS Scroll Snap: Что это? Нужен ли он нам?

От автора: веб-разработчикам сложно гарантировать хороший UX при прокручивании страницы, но, к счастью, CSS модуль «Scroll Snap» должен помочь в этом. Модуль принудительно устанавливает конечную позицию скрола после выполнения прокрутки. Помимо всего прочего, в модуле есть функции управления, такие как панорамирование в сочетании с «привязками». Модуль CSS Scroll Snap обеспечивает выравнивание контента внутри контейнера со скролом. Недавно W3C выпустили Scroll Snap как Candidate Recommendation с хорошо продуманными реализациями и примерами, а также с обновленным синтаксисом. Давайте разбираться.

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

Верстка \ CSS 3

Как создать разворачивающееся меню, используя только CSS

От автора: когда только начинаешь заниматься разработкой, то смотришь на разные сайты в интернете и думаешь: «Вот же, как бы я хотел сделать что-то подобное…», и понимаешь, скольким вещам ещё нужно научиться. Вы, наверняка, уже задумывались над тем, чего можно добиться, если знать основы HTML и CSS, но не до конца разбираетесь в тех вещах, которые делают интернет таким крутым. (Я имею в виду JavaScript).

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

Верстка \ Препроцессоры css

Используйте @import в CSS-препроцессорах аккуратно

От автора: вдохновлённые функцией CSS import, которая импортирует правила стилей из других таблиц стилей, такие популярные CSS-препроцессоры как Sass, Less и Stylus также ввели собственные директивы @import. Они эффективно помогают начать компилировать модульные таблицы стилей с использованием переменных, миксинов и других функций каждого препроцессора.

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

Верстка \ CSS 3

Знакомство с CSS Gridish: инструмент, помогающий команде адаптировать CSS Grid

От автора: сегодня с удовольствием хочу вам представить новый open-source инструмент от IBM, который может помочь в работе с CSS Grid, под названием CSS Gridish! CSS Gridish берет спецификации дизайна сетки вашего продукта и делает несколько ресурсов, которые ваша команда может использовать.

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

Верстка \ CSS 3

Создание интерактивных эффектов с помощью CSS clip path

От автора: помните, как в детстве вы вырезали картинки из журналов? Вы клеили их на бумагу и создавали коллажи? Этот пост посвящен вырезанию изображений в вебе с помощью свойства clip-path CSS. Мы узнаем, как проводить вырезку, а также как с помощью вырезанных частей создавать интересные эффекты, комбинируя части с оригинальным изображением.

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