🪴 Quartz 4.0

Продвинутая верстка SASS БЭМ FlexBox

Dec 24, 202426 min read

5.2 Препроцессор SASS ч.1

SASS

Чтобы у нас была возможность компилировать sass-файлы, нам нужно установить сасс-компилятор. После его установки снизу нажимаем на кнопку Watching

Нужно взять за правило проверять настройки плагинов, если что-то не устраивает! В настройках программы находим плагин нашего компилятора и указываем путь до изменяемых файлов

И дальше тут у нас должен появиться технический документ

И чтобы у нас появился нормальный сас-синтаксис в вскоде, нужно установить Sass

5.3 Препроцессор SASS ч.2

У технологии САСС есть ряд преймуществ. Первое из них – ненадобность использовать скобки. Вместо них за отображение вложенности (инструкции или элемента в другом элементе) используется таб (именно таб, а не 4 пробела).

Так же слово block можно заменить одним знаком &, что тоже ускоряет написание кода и позволяет более эффективно использовать методологию БЭМ. Слово block берётся из верхнего названия родителя, т.е. если класс родителя будет называться box, то амперсанда будет обозначать box 

т.е. амперсанд = класс, к которому он применён

Так же есть очень крутая особенность в сасе: переменные и миксины.

Переменные позволяют в себе хранить заданные значения и использовать их во всём проекте (например, вставлять основные цвета и при изменении офис-дизайна у заказчика можно быстро поменять цвет из одного места)

Миксины – это переменные, которые хранят в себе целые инструкции. Это очень удобно для стилизации различающихся на малость блоков

Дальше идёт наша оптимизация кода. Теперь можно выкинуть нормалайз и ресет css, ведь теперь мы можем сохранить «.scss» их версию (не сасовскую, так как в этих файлах есть кавычки) и подключать эти файлы к нашему style.css через импорт, что будет куда удобнее (однако при каждом сохранении css версия файлов всё равно будет генерироваться)

И вот таким вот образом создаются комментарии

5.2-3 Препроцессор SASS - Full

Пререквизиты

Существует 5 CSS-препроцессоров: Sass, SCSS, Less, Stylus и PostCSS.

Эта статья по большей части охватывает SCSS, который похож на Sass. Детальнее об этих препроцессорах можете прочитать на Stack Overflow (оригинал) или на qaru (перевод на русский).

SASS  —  (.sass) Syntactically Awesome Style Sheets.

SCSS  —  (.scss) Sassy Cascading Style Sheets.

Расширения .sass и .scss похожи, но всё-таки не одинаковы. Для фанатов командной строки приводим способ конвертации:

# Конвертация из Sass в SCSS
$ sass-convert style.sass style.css
 
# Конвертация из SCSS в Sass
$ sass-convert style.scss style.sass

Sass — первая спецификация для SCSS с расширением файла .sass. Её разработка началась ещё в 2006 году, но позже был разработан альтернативный синтаксис с расширением .scss.

Обратите внимание Другие препроцессоры функциональностью похожи на SCSS, но синтаксис может отличаться. А ещё, всё то, что работает в CSS, будет также прекрасно воспроизводиться и в Sass, и в SCSS.

Переменные

Sass/SCSS позволяет работать с переменными. В CSS они обозначаются двойным тире (--), а в препроцессорах знаком доллара ($).

$number: 1;
$color: #ff0000;
$text: "tproger forever.";
$text: "IT forever." !default;
$nothing: null;

Вы можете присваивать значение по умолчанию переменным, у которых ещё нет значения, добавив метку !default в конце значения. В таком случае, если переменной уже было присвоено значение, оно не изменится; если же переменная пуста, ей будет присвоено новое указанное значение.

#container {
  content: $text;
}

Переменные в Sass могут быть присвоены любому свойству.

Вложенные правила

Стандартные вложенные CSS-элементы с использованием пробела:

/* Вложенные правила */
#A {
  color: red;
}
#A #B {
  color: green;
}
#A #B #C p {
  color: blue;
}

Те же вложенные элементы с помощью SCSS:

/* Вложенные правила */
#A {
  color: red;
  #B {
    color: green;
    #C p {
      color: blue;
    }
  }
}

Как видно, синтаксис выглядит более чистым и менее повторяющимся.

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

За кулисами препроцессор всё ещё компилирует его в стандартный код CSS (показано выше), чтобы он мог быть отображён в браузере. Мы лишь изменяем способ написания CSS.

Амперсанд

В SCSS используется директива &.

#p {
  color: black;
  a {
    font-weight: bold;
    &:hover {
      color: red;
    }
  }
}

С помощью символа & вы можете явно указать, где должен быть вставлен родительский селектор.

Результат компиляции Sass (из предыдущего примера) в CSS ниже.

#p {color: black;}
#p a {font-weight: bold;}
#p a:hover {color: red;}

В итоге амперсанд был компилирован в название родительского элемента a (a:hover).

Миксины (они же примеси)

Миксины объявляются директивой @mixin. После неё должно стоять имя миксина и, опционально, его параметры, а также блок, содержащий тело миксина. Например, можно определить миксин flexible(), который далее будет включён, например, в класс .centered-elements следующим образом:

@mixin flexible () {
    display: flex;
    justify-content: center;
    align-items: center;
  }
 
.centered-elements {
    @include flexible ();
    border: 1px solid gray;
  }

Теперь каждый раз после применения класса .centered-elements к HTML-элементу, последний будет преобразован во Flexbox.

Миксины могут также содержать селекторы, в том числе со свойствами. А селекторы могут содержать ссылки на родительский элемент через амперсанд (&), вы ведь помните про него?

Пример работы с несколькими браузерами

Некоторые вещи в CSS весьма утомительно писать, особенно в CSS3, где плюс ко всему зачастую требуется использовать большое количество вендорных префиксов( -webkit- или -moz-).

Миксины позволяют создавать группы деклараций CSS, которые вам придётся использовать несколько раз на сайте. Хорошей практикой будет использование миксинов для вендорных префиксов. Пример:

@mixin border-radius($radius) {        // Префиксы для:
    -webkit-border-radius: $radius;    // Chrome и Safari
       -moz-border-radius: $radius;    // Firefox
        -ms-border-radius: $radius;    // Internet Explorer
         -o-border-radius: $radius;    // Opera
            border-radius: $radius;    // Стандартный CSS
  }
// Пример использования миксина border-radius после его создания
.box { @include border-radius(10px); }

Арифметические операции

Как и в реальной жизни, вы не можете работать с числами, у которых несовместимы типы данных (например, сложение рх и em).

Сложение и вычитание
p {
    font-size: 10px + 2em;  // ОШИБКА!
    font-size: 10px + 6px;  // 16px
    font-size: 10px + 2;    // 12px
}

Всегда обращайте внимание на тип складываемых данных. То есть пиксели к пикселям, слоны к слонам. Таким же образом работает вычитание, но со знаком минус.

Пример вычитания:

div {
    height: 12% - 2%;
    margin: 4rem - 1;
}
Умножение

Выполняется точно так же, как в CSS, с помощью calc(a * b), но без calc и круглых скобок. Кроме того, можно ещё отделять знак умножения пробелами от чисел (5*6 == 5 * 6).

Исключение Нельзя умножать пиксели между собой. То есть, 10px * 10px != 100px. 10px * 10 == 100px.

p {
    width: 10px * 10px;           // ОШИБКА!
    width: 10px * 10;             // 100px
    width: 1px * 5 + 5px;         // 10px
    width: 5 * (5px + 5px);       // 50px
    width: 5px + (10px / 2) * 3;  // 20px
}
Деление

С делением дела обстоят немного сложнее, но разобраться можно, ведь в стандартном CSS косая линия (слэш) зарезервирована для использования краткой формы записи свойств. Пример ниже.

/* краткая форма записи свойств */
font: italic bold .8em/1.2 Arial, sans-serif;
 
/* стандартная форма записи свойств */
font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

Есть три помощника, которые намекнут на возможность деления:

  1. Значение (или любая его часть) хранится в переменной или возвращается функцией.
  2. Значения заключены в круглые скобки.
  3. Значение используется как часть другого арифметического выражения.

Пример:

$var1: 20;
$var2: 4;
 
p {
    top: 16px / 24px;          // Отображается без изменений в стандартном CSS
    top: (20px / 5px);         // Производится деление (но только при использовании скобок)
    top: #{$var1} / #{$var2};  // Выводится как обычный CSS-код, деление не выполняется
    top: $var1 / $var2;        // Деление выполняется
    top: random(4) / 5;        // Деление выполняется (если использовать в паре с функцией)
    top: 2px / 4px + 3px;      // Деление выполняется, если добавлена ещё одно арифметическое действие
}

Результат компиляции в CSS:

p {
  top: 16px / 24px;
  top: 4;
  top: 20 / 4;
  top: 5;
  top: 0.6;
  top: 3.5px;
}
Остаток

Остаток вычисляет остаток от операции деления. Ниже рассмотрим, как создать «зебру» для HTML-списка.

@mixin zebra() {
    @for $i from 1 through 7 {
        @if ($i % 2 == 1) {
            .stripe-#{$i} {
                background-color: black;
                color: white;
            }
        }
    }
}
* {
  @include zebra();
  text-align: center;
}

Создание миксина zebra показано во вставке кода сверху. Директивы @for и @if описаны в секции ниже.

Для создания образца надо написать несколько HTML-элементов.

<div class="stripe-1">zebra</div>
<div class="stripe-2">zebra</div>
<div class="stripe-3">zebra</div>
<div class="stripe-4">zebra</div>
<div class="stripe-5">zebra</div>
<div class="stripe-6">zebra</div>
<div class="stripe-7">zebra</div>

Результат в браузере:

Зебра успешно сгенерирована миксином zebra

Операторы сравнения

Директива @if принимает выражение SassScript и использует вложенные в неё стили в случае, если выражение возвращает любое значение, кроме false или null.

Ниже показано, как работают директивы @if и @else, вложенные в миксин.

@mixin spacing($padding, $margin) {
    @if ($padding > $margin) {
        padding: $padding;
    } @else {
        padding: $margin;
    }
}
 
.container {
    @include spacing(10px, 20px);
}

Сравнение в действии. Миксин spacing выберет размеры padding’а, если тот будет больше, чем margin.

После компиляции в CSS:

.container { padding: 20px; }

Логические операторы

Описание логических операторов

Использование логических операторов Sass для создания кнопки, у которой будет меняться фон в зависимости от её ширины.

@mixin button-color ($height, $width) {
    @if (($height < $width) and ($width >= 35px)) {
        background-color: blue;
    } @else {
        background-color: green;
    }
}
 
.button {
    @include button-color(20px, 30px)
}

Строки

В CSS определено 2 типа строк: с кавычками и без. Sass распознаёт и то, и другое. В итоге вы получите в CSS тот тип строк, который использовали в Sass.

В некоторых случаях можно добавить строки в допустимые значения CSS без кавычек, но только если добавленная строка является завершающим элементом.

p {
    font: 50px Ari + "al"; // Компилируется в 50px Arial
}

Пример ниже демонстрирует, как делать не надо.

p {
    font: "50px" + Arial; // ОШИБКА!
}

Можете складывать строки разных типов, если в них нет пробелов. Пример ниже не будет скомпилирован.

p:after {
    content: "Верните Линуса " + Торвальдса!; // ОШИБКА!
}

Строки, содержащие пробелы, должны быть отделены кавычками. Решение проблемы:

p:after {
    content: "Верните Линуса " + "Торвальдса!"; // обратите внимание на "Торвальдса!"
}

Пример сложения нескольких строк:

p:after {
    content: "Удел " + "человечества " + "—" + "итерация.";
}

Сложение строк и чисел:

p:after {
    content: "Рекурсия " + 2013 + " удел небожителей";
}

Обратите внимание Свойство content работает только с псевдоселекторами :before и :after. Рекомендуется не использовать content в CSS-документе, а напрямую использовать его между тегами в HTML.

Операторы управления потоками

В SCSS есть функции (function()) и директивы (@directive). Чуть выше мы уже рассматривали пример функции, когда изучали передачу аргументов внутри миксинов.

Функции обычно заключаются в скобки, следующие сразу за её именем. А директива начинается с символа @.

Подобно JavaScript, SCSS позволяет работать со стандартным набором операторов управления потоками.

if()

if() — это функция (и иногда основа искусственного интеллекта).

Её использование выглядит довольно примитивным: оператор вернёт одно из двух обозначенных в условии значений.

/* Использование функции if() */
if (true, 1px, 2px) => 1px;
if (false, 1px, 2px) => 2px;
@if

@if — это директива, использующаяся для разветвления на основе условия.

/* Использование директивы @if */
p {
    @if 1 + 1 == 2 { border: 1px solid;  }
    @if 7 < 5      { border: 2px dotted; }
    @if null       { border: 3px double;  }
}

Результат компиляции:

p { border: 1px solid; }

Ниже показано комбо-разветвление с добавлением директивы @else.

/* Создание переменной $type */
$type: river;
 
/* Окрашивание контейнеров в синий в случае, если значение для переменной $type — river */
div {
    @if $type == river {
        color: blue;
    }
}
 
/* Условные цвета для текста в теге <p> */
p {
    @if $type == tree {
        color: green;
    } @else if $type == river {
        color: blue;
    } @else if $type == dirt {
        color: brown;
    }
}

Проверка на наличие родительского элемента

Амперсанд выбирает родительский элемент, если тот существует. В ином случае вернёт null. Поэтому может использоваться совместно с директивой @if.

В следующих примерах рассмотрим создание условных CSS-стилей в зависимости от наличия родительского элемента.

/* Проверка на наличие родительского элемента */
@mixin does-parent-exist {
    @if & {
        /* Применение голубого цвета родительскому элементу, если он существует */
        &:hover {
            color: blue;
        }
    } @else {
        /* Родительский элемент отсутствует, применение голубого цвета к ссылкам */
        a {
            color: blue;
        }
    }
}

Директива @for

Директива @for выводит набор стилей заданное число раз. Для каждого повторения используется переменная-счётчик для изменения вывода.

Директива @for итерируется 5 раз.

@for $i from 1 through 5 {
    .definition-#{$i} { width: 10px * $i; }
}

Результат компиляции в CSS:

.definition-1 { width: 10px; }
.definition-2 { width: 20px; }
.definition-3 { width: 30px; }
.definition-4 { width: 40px; }
.definition-5 { width: 50px; }

Директива @each

Директива @each устанавливает $var в каждое из значений списка или словаря и выводит содержащиеся в ней стили, используя соответствующее значение $var.

@each $animal in platypus, lion, sheep, dove {
    .#{$animal}-icon {
        background-image: url("/images/#{$animal}.png")
    }
}

Результат компиляции в CSS:

.platypus-icon {
    background-image: url("/images/platypus.png");
}
.lion-icon {
    background-image: url("/images/lion.png");
}
.sheep-icon {
    background-image: url("/images/sheep.png");
}
.dove-icon {
    background-image: url("/images/dove.png");
}

Директива @while

Директива @while принимает выражение SassScript и циклично выводит вложенные в неё стили, пока выражение вычисляется как true. Она может быть использована для создания более сложных циклов, чем таких, для которых подходит @for, хотя она бывает необходима довольно редко. Например:

$index: 5;
@while $index > 0 {
    .element-#{$index} { width: 10px * $index; }
    $index: $index - 1;
}

Результат компиляции:

.element-5 { width: 50px; }
.element-4 { width: 40px; }
.element-3 { width: 30px; }
.element-2 { width: 20px; }
.element-1 { width: 10px; }

Функции в Sass/SCSS

Используя Sass/SCSS можно использовать функции так же, как и в других языках.

Создадим функцию three-hundred-px(), возвращающую 300px.

@function three-hundred-px() {
    @return 300px;
}
 
.name {
    width: three-hundred-px();
    border: 1px solid gray;
    display: block;
    position: absolute;
}

После применения класса .name ширина элемента будет равна 300 пикселям.

<div class = "name">Hello.</div>

Результат в браузере:

Функции в Sass могут возвращать любое корректное значение CSS и могут быть назначены любому свойству. Они даже могут быть рассчитаны на основе переданного аргумента.

@function double($width) {
    @return $width * 2;
}

Тригонометрия

Тригонометрические функции sin() и cos() часто встречаются в виде встроенных классов во многих языках, таких как JavaScript, например.

Их работу стоит изучать, если нужно сократить время, затрачиваемое на разработку анимаций пользовательского интерфейса, например для создания троббера. Мы, кстати, уже говорили об этом в одной из статей. Но в данном случае это будет код, а не gif-картинка, вставленная в HTML-документ.

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

Преимущество использования тригонометрии в сочетании с CSS выражается в отсутствии дополнительных HTTP-запросов, как это происходит с gif-изображениями.

Можно писать тригонометрические функции на Sass. Об этом читайте далее.

Написание собственных функций

В тригонометрии многие операции основаны на функциях. Каждая функция строится на основе другой. Например, функция rad() требует использования PI(). Функции cos() и sin() требуют использование rad().

@function PI() { @return 3.14159265359; }

Написание функций на Sass/SCSS очень похоже на написание функций в других языках.

Использование функции pow():

@function pow ($number, $exp) {
    $value: 1;
    @if $exp > 0 {
        @for $i from 1 through $exp {
            $value: $value * $number;
        }
    }
    @else if $exp < 0 {
        @for $i from 1 through -$exp {
            $value: $value / $number;
        }
    }
    @return $value;
}

Использование функции rad():

@function rad ($angle) {
    $unit: unit ($angle);
    $unitless: $angle / ($angle *0 + 1);
    //Если значение angle (угла) указано в градусах ('deg'), нужно конвертировать его в радианы.
    @if $unit == deg {
        $unitless: $unitless / 180 * PI();
    }
    @return $unitless;
}

Для вычисления тангенса функцией tan() нужно применить функции sin() и cos().

Пример:

@function tan($angle) {
    @return sin($angle) / cos($angle);
}

https://tproger.ru/translations/complete-sass-guide/#sass-preprocessor

5.4 FlexBox. Новый способ позиционирования элементов

FlexBox

И сейчас наконец-то будет описана технология, которая позволяет нормально выравнивать объекты на странице. Дело в том, что прошлые попытки выровнять через марджин или текст-алайн имели достаточно костыльную реализацию расположения контента на странице. Однако придумали и добавили в CSS такую технологию как FlexBox.

Чтобы применить её, нужно воспользоваться display: flex;

Помочь с изучением данной технологии может сайт Flexbox Froggy

Используя свойство justify-content, мы выравниваем элементы горизонтально, а также оно принимает следующие значения:

  • flex-start - Элементы выравниваются по левой стороне контейнера.
  • flex-end - Элементы выравниваются по правой стороне контейнера.
  • center - Элементы выравниваются по центру контейнера.
  • space-between - Элементы отображаются с одинаковыми отступами между ними.
  • space-around - Элементы отображаются с одинаковыми отступами вокруг них.

Теперь используем align-items - это CSS свойство выравнивает элементы вертикально и принимает следующие значения:

  • flex-start - Элементы выравниваются по верхнему краю контейнера.
  • flex-end - Элементы выравниваются по нижнему краю контейнера.
  • center - Элементы выравниваются вертикально по центру контейнера.
  • baseline - Элементы отображаются на базовой линии контейнера.
  • stretch - Элементы растягиваются, чтоб заполнить контейнер.

flex-direction - это CSS свойство задает направление, в котором будут расположены элементы в контейнере, и принимает следующие значения:

  • row: элементы размещаются по направлению текста.
  • row-reverse: элементы отображаются в обратном порядке к направлению текста.
  • column: элементы располагаются сверху вниз.
  • column-reverse: элементы располагаются снизу вверх.

Иногда изменения порядка отображения элементов в контейнере недостаточно. В таких случаях мы можем применить свойство order для конкретных элементов. По умолчанию, значение этого свойства у элементов равно 0, но мы можем задать положительное или отрицательное целое число этому свойству.

Еще одно свойство, которое можно применить к определенному элементу это align-self. Это свойство принимает те же значения, что и align-items.

Если объектов слишком много и их сплющило на одном ряду лилий, то раздвинуть их можно помощью свойства flex-wrap, которое принимает следующие значения:

  • nowrap - Размеры элементов устанавливаются автоматически, чтоб они поместились в один ряд.
  • wrap - Элементы автоматически переносятся на новую строку.
  • wrap-reverse - Элементы автоматически переносятся на новую строку, но строки расположены в обратном порядке.

Два свойства flex-direction и flex-wrap используются так часто вместе, что было создано свойство flex-flow для их комбинирования. Это свойство принимает значения двух этих свойств, разделеные пробелом.

Например, можно использовать flex-flow: row wrap, чтоб элементы располагались в ряд и автоматически переносились на новую строку.

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

  • flex-start - ряды группируются в верхней части контейнера.
  • flex-end - ряды группируются в нижней части контейнера.
  • center - ряды группируются вертикально по центру контейнера.
  • space-between - ряды отображаются с одинаковыми расстояниями между ними.
  • space-around - ряды отображаются с одинаковыми расстояниями вокруг них.
  • stretch - ряды растягиваются, чтоб заполнить контейнер равномерно.

Это может запутать, но align-content отвечает за расстояние между рядами, в то время как align-items отвечает за то, как элементы в целом будут выровнены в контейнере. Когда только один ряд, align-content ни на что не влияет.

В последнем примере стоит обратить внимание на wrap-reverse

Шпаргалка по FlexBox

5 Что такое Grid и как его использовать

CSSGrid

Кратка шпаргалка по всем свойствам гридов

Очень классная шняга. $ - подставит число в класс, {$} – впишет число внутрь тега (или любой другой текст)

Для начала инициализируем несколько объектов нашей сетки

Первым делом, чтобы у нас всё заработало, нужно воспользоваться display: grid, который включит сеточное отображение

Дальше, чтобы были видны изменения, нам нужно создать шаблон через grid-template-columns, в котором мы укажем размеры наших колонок. Сколько размеров мы укажем, столько размеров и будет. Единицы измерения поддерживаются любые

Но чтобы равномерно поделить колонки, используются фракции – fr. Они определяют какую часть будет занимать колонка от всей части таблицы

Так же можно описать куда больше колонок (число колонок, размер)

Так же можно вписать несколько размеров и они будут чередоваться

Когда мы задаём теплейт на строки, то мы меняем их размер (сколько значений – столько и размер каждой отдельной строки)

Так же мы можем добавить gapы по колонкам или строкам отдельно

Либо мы можем просто добавить гэпы сразу для всех одинаковые

grid-auto-rows указывает размер для тех строк, для которых он явно не задан

Для задания размера строки так же рекомендуется использовать функцию minmax(), которая позволяет задать размер для них и расширять строки под размер контента

Данные два параметра работают только если их родителю (тут - контейнеру) заданы фиксированные параметры размеров

justify-content – выравнивает элементы колонки по оси Y align-content - выравнивает элементы колонки по оси X

align-items позволяет сделать выравнивание относительно ячейки и она будет подстраиваться под контент, который в контейнере

justify-items же выравнивает колонки по икс-координате

И при комбинировании инструкций align-self и justify-self, которые влияют на сам объект отдельно, мы спокойно можем создавать макеты любой сложности

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

  1. Указывает, с какой колонки начинается элемент
  2. Указывает окончание колонки (последняя видимая колонка в таблице + 1)
  3. Указываем номер строки, с которой начинается объект
  4. И на которой заканчивается

И вот пример. Мы можем менять положение объектов из одного места в другое

А вот пример короткой записи прошлых значений, где через слэш мы пишем: откуда начинается/где заканчивается.

Так же девтулз спокойно отображает количество занимаемых строк и столбцов

Так же есть ещё один крайне полезный инструмент – это grid-template-areas

5.5 Методология БЭМ и как ее использовать

BEM

  • БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».

БЭМ – это:

  • Блок
  • Элемент
  • Модификатор

Используется БЭМ, чтобы реализовать методологию, по которой мы будем переиспользовать элементы много раз и не разводить копи-пасту

Блок – это заранее заготовленный элемент, который хранит в себе контент. Ему можно определить размер, расположение контента внутри него и всё остальное, что влияет только на контент внутри него.

Внутри блока находятся либо его дочерние элементы, либо другие блоки.

Блоки создаём, когда один и тот же элемент повторяется на странице несколько раз

Элемент показывает нам, что перед нами находится. Данный класс позволяет стилизировать и работать с определённым элементом блока отдельно. Ему позволяется задавать отступы и размеры. Стилизовать же желательно через миксы (например, создать класс text, которым мы будем модифицировать только текст)

Элементами блока называем все вложенные элементы, которые принадлежат родителю. Например, блок навигационного меню nav и его дочерние элементы nav__item, внутри дочерних элементов ссылки nav__link (вкладывать родительские элменты – нельзя nav__item__link - неправильно**)

Если описывать более конкретно, то слева у нас Блок – Блок – Элемент – это неправильно. У нас идёт Блок – Элемент – Элемент и пример справа нам показывает это. Справа мы видим привязку элемента к блоку, а не элемента к элементу (как слева, где элемент выражается как блок)

Модификатор уточняет сам объект. Если у нас несколько блоков текста внутри блока, то мы прописываем первым классом – блок__элемент, а вторым классом – блок__элемент_модификатор

Модификатор отдельно выделяет один конкретный объект среди многих, чтобы задать этому отдельному элементу уникальные стили

Миксы позволяют совмещать поведение и стили

В данном примере header-button__text является как элементом блока header-button, так и отдельным независимым элементом за счёт класса text

Такой подход позволяет задать внешнюю геометрию или позиционирование в header-button__text, а сами стили прописать в text, что позволяет использовать класс text для стилизирования отдельных таких же элементов на странице

5.6 Используем FlexBox и БЭМ в новом проекте

Нормализаторы кода закидываем в таком порядке

Ну и включаем все отступы (паддинги и марджины) в счёт размеров наших блоков

И сразу нужно объяснить, какую роль тут играет методология БЭМ.

Во-первых, мы сделали main-section, который будет отвечать за содержимое только нашей основной секции, в которой будет располагаться контент первого отдела.

Во-вторых, мы сделали внутри отдельный контейнер, который уже будет отвечать за центрирование и ограничение в ширину всего контента, который будет в нём находиться. Так же мы дописали ещё один класс (описательный - БЭМ), чтобы работать конкретно с ним (потому как класс контейнер мы будем переиспользовать по всему сайту)

Ну и дальше в хедере мы будем хранить то, что будет располагаться в хедере

Ну и тут мы уже описываем наше навигационное меню.

Во-первых, мы добавили после хэдера секцию нав, которая будет иметь БЭМовский класс (в котором у нас указано где находится и кому принадлежит навигационная строка) и отдельный класс для стилизации (он поможет сделать шаблон стиля навигационного меню, который в дальнейшем получится переиспользовать)

Во-вторых, мы сделали сам список. Для ul мы прописываем флекс-бокс свойство для расположения списка в строку. Каждому элементу списка приписываем отступ справа (по правилу право-низ) и описываем размер шрифта. Далее так же удобно прописываем псевдокласс через амперсанду и для последнего элемента убираем отступ.

В-третьих. В классе мэин-секшн делаем отступ сверху 16 пикселей (чтобы отодвинуть навигационное меню). Дальше обращаемся к контейнеру, который будет у нас регулировать расположение header и nav. Располагаем хедер и футер в строку (row) и через джастифай располагаем их в разных концах страницы (space-between – располагает элементы на равном удалении, равномерно заполняя строку, в которой элементы находятся). Далее выставляем высоту данного меню и центрируем лого и список

Конкретно этими двумя строчками мы задаём высоту контейнера с навигационным меню и располагаем элементы относительно друг друга по центру (текст становится вровень с логотипом)

5.7 Как превратить растровый логотип в векторный с помощью Illustrator

Если нам отправили некачественное изображение, да ещё и в png (несжатый формат с альфаканалом), то оно во-первых весит много и во-вторых имеет свойство пикселизироваться. Поэтому стоит заиметь его .svg версию. Сделать её мы можем сами в иллюстраторе

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

5.8 Закругление, поворот и тени для элементов

Закругление: border-radius: 100px

Тени: box-shadow: 0px 4px 4px 4px rgba(0, 0, 0, 0.25) Отступ по горизонтали, по вертикали, ширина тени, растяжение тени и последнее значение – цвет тени

Поворот: Тут уже стоит отдельно зайти на справочник и взглянуть на множество вариантов использования transform

Реализация самого контента первого блока уже будет поделена на две части: левую и правую.

Во-первых, мы создадим второй контейнер и дадим ему второй класс по БЭМу. В этом контейнере зададим два дива, где поделим блок пополам (гитарист с блоками – слева, текст - справа). В левый блок закинем картинку с нашим гитаристом. Под картинку закинем три дива, которые будут представлять у нас блоки позади гитариста (их мы будем стилизовать так же, как в фигме)

Во-вторых, приступаем к вёрстке стилей. Первым делом нашему родителю назначим позиционирование relative (для того, чтобы абсолютно спозиционированные объекты отталкивались от него, а таких объектов у нас будет 3 – и это блоки). Дальше нам нужно накинуть relative на нашу картинку. Позиционировать абсолютно мы её не будем, но нам нужно задать ей индекс, чтобы позиционированные блоки оказались под гитаристом.

В-третьих, стилизуем блоки. Большинство стилей, а именно цвет, поворот, размер и тени – берём из фигмы (задать им обязательно размер, чтобы они в принципе отображались на странице). Обязательно позиционируем их абсолютно на странице (топ и лефт определяем экспериментальным способом). И так же не забываем указать им правильный z-index

5.9 Что такое иконочные шрифты

И далее воспользуемся сервисом, который предоставляет иконки в виде шрифтов. Первым делом добавим js код к нам после стилей

Далее находим нужную иконку и копируем её код в наш блок

Основной особенностью этих иконок является то, что они представляют собой текст и редактируются как текст, но так как мы поместили их в блочные элементы, то и работать мы будем с текстом в блоках

Далее опишем бордеры для наших иконок (высота, ширина блока, бордер и закругление)

Далее к нашему контейнеру применим расположение объектов в ряд (левый и правый враппер будут находиться в одной строке)

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

Данный код позволит выровнять иконки (текст) внутри блоков по центру

Через фонт-сайз меняем размер иконки (так как она - текст). Ну и делаем отступы между иконками

5.10 Создаем первую кнопку

В первую очередь под нашими социальными сетями прописываем новый заголовок и прямо внутри заголовка можно прописать тег hr. Далее основная наша проблема: позиционирование элементов, а именно – текстовый блок над фотографией. Делается это через накидывание релэйтива на нашего родителя и через абсолют на наш райт-враппер (так же допишем ширину блока и положение от абсолюта)

Чтобы оттолкнуть иконки от блока райт-враппер, можно сделать внутренний паддинг. Так же нам нужно оттолкнуть текст от иконок, но уже через марджин-боттом

Сам тайтл уже преобретает больший шрифт и релэйтив позиционирование, так как нужно указать положение hr относительно нашего текста. Hr указываем позиционирование, ширину, положение снизу, уберём марджины, сбросим внешний вид линии и с одной стороны настраиваем линию (потому что если будем менять через просто бордер, то у нас задастся по всем 4ём сторонам он)

Текст под тайтлом добавляем с небольшим отступом от нашего основного тайтла. В качестве отталкивающего элемента мы выбираем бэм-блок (стилизуем все элементы через модификаторы)

И таким образом мы выравниваем кнопки и элементы внутри них в линию

Далее мы стилизуем нашу кнопку

Выравниваем, отодвигаем

5.11 Используем модификатор БЭМ. Новое свойство overflow

Тут мы уже вспомним про использование модификаторов БЭМ. Стилизация и БЭМизацция элементов.

В основных стилях мы описали размеры, градиент и закругление блока. Выравнивание сделали для внутреннего круга (который имеет цвет фона), который будет у нас отвечать за вырез в круге.

Первым делом мы создали первый блок кругов внутри контент-контейнера (располагаются под текстом).

Второй уже блок кругов мы расположили в мэйн-секшн, который отвечает впринципе за все элементы в основном блоке. 

Данный фрагмент кода отвечает за позиционирование круговых элементов на сайте. Спозиционировали круги мы относительно нашей основной секции на странице

Так же дополнительно стоит обратить внимание, что при изменении ширины страницы, у нас появляется данное выползание круга из-за границы. Это нужно исправлять

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

5.12 MinMax – HeightWidth

Тут представлен код с max-width. Данный пераметр указывает, что максимально размер элемента может растянуться до 1000 пикселей, но при уменьшении страницы, он будет уменьшаться

Это уже работа min-width. Минимально – 1000 пикселей, но растягивается до максимального значения

Но как мы можем увидеть, если наш элемент помещается в максимум 1000 пикселей, то он может и не вместиться в родительский элемент

Но так же минимальную высоту можно установить и для родительского элемента и тогда он будет размером с занимаемое пространство с два этих бокса

Такой подход с размерами для элементов страницы нужен, например, чтобы не угадывать с размерами блоков сайта. Потому что заказчик может вместо текста рыбы вставить свой текст

5.13 Практика. Создаем вторую секцию сайта

Лайфхак! Так же в браузере есть интересный лайфхак, который позволяет в реальном времени двигать объекты на странице, что позволяет их нормально спозиционировать без подгадываний и высчитываний

А чтобы быстро найти класс, не забываем пользоваться поиском

Секции лучше именовать секциями

Перед использованием изображений, лучше их кропнуть и потом выгрузить в таком формате

Пример структуры:

Лайфхак! Так же в консоли разработчика имеется подсказка флекс-расположений. Если на неё нажать, то можно выбрать предустановки отступов и посмотреть на них, что крайне удобно

Так же если нам нужно сделать равномерное расстояние между объектами (без привязки к margin-right), то можно воспользоваться данным свойством

5.14 Практика. Создаем третью секцию сайта

Небольшое пояснение. Если мы хотим расположить абсолютно-спозиционированный элемент под обычным, то нам достаточно просто указать z-index: -1. Однако если у нас прописан бэкграунд, то родительскому элементу нужно указать не просто релативную позицию, но и указать z-index: 0

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

Ну и так же можно подключить шрифты таким способом

5.16 Добавляем якорные ссылки на навигационное меню

Якорные ссылки добавляются через id элемента и позволяют создать связь между ссылкой и элементом на странице

5.17 Что такое fav-icons, и как их установить в свой проект

Фавиконки генерируются из изображений 512 на 512 пикселей.

И подключаются через линки

Graph View

Backlinks

  • No backlinks found