Bulma - це простий, елегантний і сучасний фреймворк CSS, якому багато розробників віддають перевагу перед Bootstrap. Особисто я думаю, що Bulma має кращий дизайн за замовчуванням, і він також відчуває себе легшим.

У цьому підручнику я дам вам супершвидкий вступ до бібліотеки.

Ми також створили безкоштовний курс Bulma. Клацніть тут, щоб перевірити!

Налаштування

Налаштувати Bulma надзвичайно просто, і ви можете зробити це кількома різними способами, віддаючи перевагу NPM, завантажуючи її безпосередньо з документів або використовуючи CDN. Ми просто зробимо посилання на CDN із нашого файлу HTML, наприклад:

Це дасть нам доступ до класів Bulma. І це власне все, що є «Бульмою» - колекція занять.

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

Перше, що ви повинні дізнатися про Bulma - це класи модифікаторів. Вони дозволяють встановити альтернативні стилі майже для всіх елементів Bulma. Всі вони починаються з is-*або has-*, а потім ви замінюєте на *потрібний стиль.

Щоб правильно зрозуміти це поняття, спершу подивимося на кнопки.

Кнопки

Щоб перетворити звичайну кнопку в кнопку Bulma, ми просто надамо їй клас button.

Click here 

В результаті чого виходить такий стиль:

Як бачите, він має гарний плоский дизайн за замовчуванням. Щоб змінити стиль, ми використаємо модифікатори Bulma. Почнемо з того, що зробимо кнопку більшою, зеленою та із закругленими кутами:

Click here 

Цей результат - приємна на вигляд кнопка:

Ви також можете використовувати модифікатори для управління станом кнопок. Давайте, наприклад, додамо клас is-focused, який додає межу навколо нього:

Нарешті, давайте також використаємо один із has-*модифікаторів. Вони зазвичай контролюють те, що знаходиться всередині елемента. У нашому випадку текст. Додамо has-text-weight-bold.

Ось результат:

Я рекомендую вам пограти з комбінаціями різних класів, щоб зрозуміти, наскільки гнучка ця система. Поєднання майже нескінченні. Щоб дізнатися більше, перегляньте розділ з кнопками в документації.

Стовпці

Основою будь-якого фреймворку CSS є те, як вони вирішують стовпці, оскільки це актуально майже для кожного веб-сайту, який ви коли-небудь створите. Bulma базується на Flexbox, тому створювати стовпці дуже просто. Створимо рядок із чотирма стовпцями.

 First column Second column Third column Fourth column 

Спочатку ми створюємо контейнер із класом columns, а потім даємо кожному з дітей клас column. Це призводить до наступного:

Я також додав межу навколо стовпців, щоб зробити їх більш наочними.

Зверніть увагу, що ви можете додати скільки завгодно стовпців. Flexbox дбає про розподіл простору між ними порівну.

Щоб надати колонкам кольори, ми можемо замінити текст усередині них на

тег і надайте йому notificationклас і is-*модифікатор. Наприклад, наприклад:

Перша колонка

Давайте робити це з допомогою is-info, is-success, is-warningі is-dangerмодифікатори, які призводять до наступного:

notificationКлас фактично призначений для оповіщення користувачів про що - то, як це дозволяє заповнити фон з кольором з допомогою is-*модифікаторів. Тут він добре працює для розділення стовпців.

Ми також можемо легко контролювати ширину стовпця. Додамо is-halfмодифікатор до зеленого стовпця.

Що призводить до того, що другий стовпець тепер займає половину ширини, тоді як три інших займають третину решти половини кожна.

Ось варіанти, якими ви можете керувати шириною стовпців:

• is-three-quarters
• is-two-thirds
• is-half
• is-one-third
• is-one-quarter
• is-four-fifths
• is-three-fifths
• is-two-fifths
• is-one-fifth

Герой

Нарешті, давайте також дізнаємося, як створити героя в Булмі. Ми будемо використовувати семантику , і дамо їй клас heroі, is-infoщоб надати йому якийсь колір. Нам також потрібно додати дитину до класу hero-body.

Для того, щоб змусити цього героя зробити щось значуще, ми збираємося додати елемент контейнера всередину тіла та додати заголовок та підзаголовок.

Primary title
Primary subtitle

Тепер це починає виглядати добре! Якщо ми хочемо, щоб він був більшим, ми можемо просто додати is-mediumна сам тег.

 ... 

І це все!

Тепер ви отримали базовий смак того, як працює "Булма". І найкраще - решта бібліотеки така ж інтуїтивна та легка, як і концепції, які ви бачили до цього часу. Тож, якщо ви це зрозумієте, решту зрозумієте без проблем.

Не забудьте ознайомитися з безкоштовним курсом Bulma на Scrimba, якщо хочете дізнатись більше!

Дякуємо за читання! Мене звуть Пер Борген, я співзасновник Scrimba - найпростішого способу навчитися кодувати. Якщо ви хочете навчитися будувати сучасний веб-сайт на професійному рівні, вам слід ознайомитися з нашим адаптивним веб-дизайном веб-дизайну.