Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.

Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.

Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.

// Блочный код
// Вторая строка

// Блочный код
// Вторая строка

Ассоциативный список

dl представляет собой ассоциативный список, состоящий из нуля и более пар имя-значение. Варианты использования: глоссарий, диалог, анонсы новостей.

Второй термин

Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное. Некое, возможно, относительно длинное определение. Скорее всего, длинное, весьма многострочное и многословное.

Второе определение подряд.

Конституционально-эзотерический концептуализм

Некое определение многословного термина.

Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.

Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.

Цитата. Далеко-далеко за словесными горами в стране. Далеко-далеко за словесными горами в стране.

Внимание! Адаптивные таблицы требуют добавления дата-атрибутов. Фиксация минимальной ширины имитатора th будет полезной (делается индивидуально).

Приоритетным является не использование класса .table-responsive, а использование семантических БЭМ-классов и LESS-примеси .table-responsive(sm); (принимает в себя значение той ширины вьюпорта, на которой таблица ещё адаптивна).

Размеры задаются в em — зависят от размера шрифта родительского элемента.

Размеры задаются в em — зависят от размера шрифта родительского элемента.

Элемент переключателя стилизован с ипользованием px (с em нельзя настроить точные пиксельные размеры для всех font-size родителя). Сам блок подстраивается под размер шрифта родителя, переключатель — нет.

Кнопки

            <input type="text" value="Текстовое поле для сравнения высоты" style="width:70px">
             
            <a class="btn" href="">Cсылка</a>
            <input class="btn" type="submit" value="Input">
            <button class="btn">Button</button>
             
            <a class="btn  btn--main" href="">Cсылка</a>
            <input class="btn  btn--main" type="submit" value="Input">
            <button class="btn  btn--main">Button</button>
             
            <a class="btn  btn--success" href="">Cсылка</a>
            <input class="btn  btn--success" type="submit" value="Input">
            <button class="btn  btn--success">Button</button>
             
            <a class="btn  btn--danger" href="">Cсылка</a>
            <input class="btn  btn--danger" type="submit" value="Input">
            <button class="btn  btn--danger">Button</button>
          

Стилизованные формы

Стилизация: БЭМ-блоки и модификаторы. Опирается на стилизацию форм по умолчанию.

Кнопки

Стилизация: БЭМ-блок .btn и модификаторы.

Выпадающие элементы

Свойства:

• Требуют jQuery.
• Управление с клавиатуры.
• Выпадать может ul или div с произвольным содержимым.
• Cобытия с пространством имён.

События

<span role="presentation" class="dropdown" id="test">
  <a href="#" class="dropdown__toggler" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Ссылка с выпадающим элементом</a>
  <ul class="dropdown__menu" aria-labelledby="qwer">
    <li><a href="#">Пункт списка (выпадает <code>ul</code>)</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</span>

// Факт открытия
$('#test').on('shown.nth.dropdown', function () {
  console.log('shown.nth.dropdown');
});

// Факт закрытия
$('#test').on('hidden.nth.dropdown', function () {
  console.log('hidden.nth.dropdown');
});

Breakpoints

Ширины, на которых возможна перестройка блоков проекта:

Модульная сетка на flexbox

Стилизация: БЭМ-блоки .row, .col-[ID]-[COL], .col-[ID]-offset-[COL]

Возможные ID сетки: xs, sm, md, lg, xl, xxl (xxl по умолчанию закомментированы). Вдохновлено Bootstrap 4.

LESS-примеси

Приоритетным является подход, в котором вместо упомянутых классов модульной сетки используются семантические БЭМ-овские классы и LESS-примеси (см. файл с примесями).

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

Вызов примеси .col(xs, 12); (возможно, не 12, а какое-то своё кол-во колонок) обязателен для элементов, являющихся прямыми потомками родителя модульной сетки.

.block-name {
  .row(); // БЭМ-блок — обёртка элементов модульной сетки

  &__element {
  // Разные ширины элемента на разных вьюпортах
  .col(xs, 6);
  .col(sm, 5);
  .col(md, 4);
  .col(lg, 3);
  .col(xl, 2);
  .col(xxl, 1);
  }
}

.block-name {
  // в примесь можно передать ширину промежутка между ячейками
  .row(10px);

  &__first-element {
    // xs-сетка, 6 колонок из @grid-columns (12 по умолчанию),
    // промежутки 10px
    .col(xs, 6, @grid-columns, 10px);
  }
}

Максимально подробный пример:

.root {
    // При указании переменных подряд имена можно не писать, оставлены для наглядности
    // @xs-grid-gutter: 1rem;  // XS-ширина: указан промежуток между ячейками сетки
    // @sm-grid-gutter: 1.8rem;// SM-ширина: указан промежуток между ячейками сетки
    // @md-grid-gutter: 2rem;  // MD-ширина: указан промежуток между ячейками сетки
    // @lg-grid-gutter: 3rem;  // LG-ширина: указан промежуток между ячейками сетки
    // @xl-grid-gutter: 4rem;  // XL-ширина: указан промежуток между ячейками сетки
    // @xxl-grid-gutter: 5rem; // XXL-ширина: указан промежуток между ячейками сетки
    // Короткая форма указания промежутков для всех ширин:
    // 1rem; 1.8rem; 2rem; 3rem; 4rem; 5rem
  .row(
    @xs-grid-gutter: 1rem;
    @sm-grid-gutter: 1.8rem;
    @md-grid-gutter: 2rem;
    @lg-grid-gutter: @grid-gutter-width;
    @xl-grid-gutter: 4rem;
    @xxl-grid-gutter: 5rem;
  );

  &__cuprum {
    // Для каждого вызова примеси указан промежуток между колонками (совпадает с тем, что у соответствующего вызова .row() для родительского элемента)
    .col(xs, 1, 2, 1rem);   // XS-ширина, 1 колонка в 2-колоночной сетке
    .col(sm, 2, 5, 1.8rem); // SM-ширина, 2 колонки в 5-колоночной сетке
    .col(md, 2, 8, 2rem);   // MD-ширина, 2 колонки в 8-колоночной сетке
    .col(lg, 2, @grid-columns, @grid-gutter-width); // LG-ширина, 2 колонки в 12-колоночной сетке (если @grid-columns оставлена по умолчанию)
    .col(xl, 3, 10, 4rem);   // XL-ширина, 3 колонки в 10-колоночной сетке
  }

  &__aurum {
    .col(xs, 1, 2, 1rem);
    .col(sm, 3, 5, 1.8rem);
    .col(md, 6, 8, 2rem);
    .col(lg, 10, @grid-columns, @grid-gutter-width);
    .col(xl, 7, 10, 4rem);
  }
}
    

Реальный пример 1:

.root {
  // Промежуток между колонками будет отличаться только на XS-ширине, это первый
  // ожидаемый примесью параметр, указываем только его.
  .row(1rem);

  &__cuprum {
    .col(xs, 1, 2, 1rem); // 1 из 2, нужно указать измененный для .row() промежуток
    .col(sm, 4); // начиная с SM — 4 из 12 (12 по умолчанию, можно не указывать)
    .col(md, 3); // начиная с MD — 3 из 12 (12 по умолчанию, можно не указывать)
  }

  &__aurum {
    .col(xs, 1, 2, 1rem);
    .col(sm, 8);
    .col(md, 9);
  }
}
    

Реальный пример 2:

.root {
  .row(); // Промежуток везде одинаковый (берется из переменной)

  &__cuprum {
    // Пока вьюпорт не стал равен или шире MD, блок 100% ширины родителя
    .col(xs, 12); // по умолчанию — 12 из 12 (обязательный вызов примеси)
    .col(md, 3);  // начиная с MD — 3 из 12
  }

  &__aurum {
    // Пока вьюпорт не стал равен или шире MD, блок 100% ширины родителя
    .col(xs, 12); // по умолчанию — 12 из 12 (обязательный вызов примеси)
    .col(md, 9);  // начиная с MD — 9 из 12
  }
}
    

Примеси адаптивности

Стилизация: нет, только примеси.

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

В примесях указано только значение display: none;, без !important.

.block-name {
  .hidden-up(lg);   // Скрыть на LG (включительно) и более широких
  .hidden-down(sm); // Скрыть на SM (включительно) и более узких
}

1. Автоматизируйте всё

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

   Автоматизировать

2. Используйте голову

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

   Начать

3. Верстайте быстро

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

   Приступить

4. Испытывайте удовольствие от работы

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

   Да, детка, сверстай мне!

Метки с иконками: Метка Метка Метка Метка