КатегорииBulmaУроки

CSS фреймворк Bulma Урок 1. — Основные понятия

CSS фреймворк Bulma — это легкий, настраиваемый CSS-фреймворк, основанный на Flexbox. Flexbox в свою очередь является относительно новой спецификацией CSS, которая на данный момент имеет хорошую поддержку браузеров.
Bulma делает использование Flexbox легким и выполняет почти всю работу за нас, так что нам не обязательно знать что-либо о нем, чтобы начать. Тем не менее, знание основ CSS является предпочтительными.
В этом уроке рассмотрим Bulma на высоком уровне, чтобы познакомиться с ним, его терминами и концепцией.

Почему Bulma?

Вот несколько причин, по которым Bulma выгодно отличается от других CSS-фреймворков:

  • Современный: Bulma основана на CSS Flexbox.
  • 100% отзывчивость: Bulma разработан как для мобильных устройств, так и для ПК.
  • Прост в освоении: большинство начинает работать с ним в течение нескольких минут.
  • Простой синтаксис: Bulma гарантирует использование минимального необходимого HTML, поэтому код легко читать и писать.
  • Настраиваемый: Имеет более чем 300 переменных SASS и можно изменять их как душе угодно.
  • Нет JavaScript: Поскольку Bulma это только CSS, он изящно интегрируется с любыми JS фреймворками или библиотеками (Angular, VueJS, React или просто Vanilla JavaScript)

Простая система колонок

Bulma в основном известен простотой колоночной сетки:

<div class="columns">
  <div class="column">
    <!-- Первая колонка -->
  </div>
  <div class="column">
    <!-- Вторая колонка -->
  </div>
</div>

Вот так просто! Требуется только два класса (colums для контейнера и column для дочернего элемента) для двух «резиновых» столбцов. Нам не нужно указывать какие-либо размеры: оба
столбцы автоматически занимают 50% ширины.
Если нам нужен третий столбец, мы просто добавляем его:

<div class="columns">
  <div class="column">
    <!-- Первая колонка -->
  </div>
  <div class="column">
    <!-- Вторая колонка -->
  </div>
  <div class="column">
    <!-- Третья колонка -->
  </div>
</div>

Читабельность

Bulma легко освоить, потому что его легко читать. Например, кнопка это просто класс button (кнопка).

<a class="button">
  Bulma рулит!!!
</a>

Чтобы изменить кнопку, Bulma предоставляет классы модификаторов. Они существуют только как способ предоставить базовой кнопке альтернативные стили. Чтобы сделать кнопку основной и увеличьте его размер, просто добавьте классы is-primary (primary — основной) и is-large (large — большой).

<a class="button is-primary is-large">
  Bulma рулит!!!
</a>

Совет: Желательно придерживаться «первичных (primary)», «вторичных (secondary)» соглашений об именах. Эта поможет в дальнейшем проще вносить изменения в проект.

Настраиваемый

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

@charset "utf-8"
// 1. Импортируем изначальные значения
@import "bulma/sass/utilities/initial-variables"
@import "bulma/sass/utilities/functions"

// 2. Устанавливаем свои значения
// Обновляем голубой цвет
$blue: #72d0eb
// И розовый
$pink: #ffb3b3
$pink-invert: #fff
// Добавляем свой шрифт
$family-serif: "Merriweather", "Georgia", serif

// Ставим розовый цвет как основной
$primary: $pink
$primary-invert: $pink-invert
// Для цвета опасности ставим оранжевый
$danger: $orange
// Задаем шрифт
$family-primary: $family-serif
// 4. Подключаем основной файл
@import "bulma/bulma"

Каждый компонент имеет свой собственный набор переменных:
• столбцы имеют размеры отступов
• меню имеет фон и цвет
• кнопка имеет цвета для каждого из состояний (наведение, нажатие, фокус …)
• и т. д.

Модульность

Поскольку Bulma разбит на десятки файлов, легко импортировать только те части, которые нам на самом деле нужны.
Например, некоторые разработчики хотят только систему колонок. Все, что им нужно сделать, это создать файл SASS со следующим кодом:

@import "bulma/sass/utilities/_all"
@import "bulma/sass/grid/columns"

Колонки

Flexbox — это одномерная сеточная система, предоставляющая нам строки или столбцы. В Bulma мы разрабатываем веб-сайты с учетом колонок объединенных в группы. Вот самая основная функциональность.
Начнем с групп колонок.

<div class="columns">
</div>

Сюда мы можем добавить одну колонку или несколько. Bulma
и Flexbox изменить размер наших колонок в зависимости от их количества в группе.

<div class="columns">
  <div class="column">
  </div>
</div>

В этом примере ширина колонки составляет 100% от ширины окна браузера, потому что она только одна.

<div class="columns">
  <div class="column">
  </div>

  <div class="column">
  </div>
</div>

Теперь их две и ширина каждого 50%. Чем больше колонок мы добавим, тем меньше они становятся. Если у нас три колонки, каждая будет иметь ширину 33,33%, а если четыре каждая будет шириной 25%.

Модификаторы

Модификаторы — это дополнительные CSS-классы, которые используются, чтобы изменить внешний вид. Например, давайте посмотрим на кнопку, как добавление модификатора может изменить ее.

<button class="button">Моя кнопка</button>

Пока что она очень по обычному выглядит. Тем не менее, давайте изменим ее на бирюзовый цвет, который по умолчанию основной в Bulma Чтобы изменить цвет на «основной», используйте
модификатор is-primary.

<button class="button is-primary">Моя кнопка</button>

Теперь кнопка действительно стала бирюзовой. Но давайте не будем останавливаться на достигнутом. Мы можем добавить еще модификатор, например сделаем ее «призрачной» (кнопка с контуром) используя модификатор is-outlined.

<button class="button is-primary is-outlined">Моя кнопка</button>

Мы также можем использовать модификатор is-loading, чтобы показать анимированный загрузчик на нашей кнопке. Это информирует пользователя, что происходит длительный процесс, например, когда отправляются данные на сервер.

<button class="button is-primary is-outlined is-loading">
  Моя кнопка
</button>

Примечание: все модификаторы в Bulma начинаются с is- или has-. Рекомендуется максимально использовать модификаторы Bulma перед добавлением своих классов.

Компоненты

Bulma поставляется с набором компонентов, которые представляют собой предварительно стилизованные фрагменты кода и служат определенной цель. При работе с ними вы должны следовать определенной структуре HTML.
Обратитесь к документации Bulma для получения дополнительной информации о них.
Вот пример компонента карточки (card):

<div class="card">
  <header class="card-header">
    <!-- Заголовок карточки -->
  </header>
  <div class="card-content">
    <div class="card-image">
      <!-- Изображение карточки -->
    </div>
  </div>
  <footer class="card-footer">
    <!-- Нижний колонтитул карточки -->
  </footer>
</div>

Если еще и другие: menu (меню), dropdown (раскрывающийся список), message (сообщения), modal (всплывающие окна) и т.д.

Вспомогательные классы

Вспомогательные классы (служебные классы) — это модификаторы, которые мы можем использовать, чтобы структурировать
контент и/или наш пользовательский интерфейс. Так же не следует путать их с традиционными модификаторами которые меняют внешний вид компонента или элемента. Эти вспомогательные классы помогают в позиционирование интерфейса.
Примеры вспомогательных классов:
• is-marginless: удаляет все отступы.
• is-unselectable: предотвращает выделение текста.
• is-pull-left: перемещает элемент влево.
Существуют и другие вспомогательные классы, которые помогают с адаптивной версткой, текстом и т. д.

На этом вводный урок закончен. Успехов.

Далее: Урок 2. — Создание формы входа

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *