Сайтостроение

FSD (Feature-Sliced Design) архитектура

Feature-Sliced Design (FSD) — это архитектурная методология для frontend-приложений. Проще говоря, это свод правил и соглашений по организации кода. Главная цель методологии — сделать проект понятным и структурированным, в условиях регулярного изменения требований бизнеса. Основные концепции […]

Сайтостроение

Модульная архитектура

Модульная архитектура — это подход, при котором проект разбивается на автономные блоки (модули), каждый из которых имеет четкую область ответственности и минимальные связи с другими. Это облегчает поддержку, тестирование и масштабирование приложения, а также помогает […]

Сайтостроение

Atomic Design (Атомарный дизайн)

Atomic Design (Атомарный дизайн) — это методология, разработанная Брэдом Фростом (Brad Frost) для построения дизайн-систем. Её суть — разбивать интерфейс на пять уровней абстракции, начиная от простейших элементов (атомов) и заканчивая полноценными страницами. Это облегчает […]

PHP, HTML, CSS...

display:none, visibility:hidden и opacity: 0 — в чем их различие?

CSS-свойства display: none и visibility: hidden могут быть использованы для скрытия элементов на странице. Однако, они работают по-разному и имеют свои особенности. В этой статье мы рассмотрим различия между этими свойствами и как использовать их […]

PHP, HTML, CSS...

Специфичность css селекторов — как определить какие стили применяться к элементу?

Специфичность селекторов определяет какие именно стили применить к элементу, если на него влияют сразу несколько css правил с разными селекторами. У какого правила это значение выше, то и применится для элемента. По-простому специфичность можно назвать […]

PHP, HTML, CSS...

Бургер меню на HTML и CSS

Делаем анимированное бургер меню без использования скриптов Для создания появляющегося гамбургер меню нам понадобится такая html структура: <div class=»menu»> <input type=»checkbox» id=»burger-checkbox» class=»burger-checkbox»> <label for=»burger-checkbox» class=»burger»></label> <ul class=»menu-list»> <li><a href=»#» class=»menu-item»>Главная</a><li> <li><a href=»#» class=»menu-item»>О нас</a><li> […]

PHP, HTML, CSS...

Бургер кнопка для меню

Верстаем бургер кнопку Добавляем в html кнопку с классом burger <button class=»burger»></button> Далее идем в CSS и задаем размер нашей кнопке и сбрасываем стандартные стили фона и границ. Верхнюю и нижнюю линии мы создадим с […]