Започнете с Bulma

намирам
(Кредит за изображение: Bulma)

Искате ли да започнете да използвате Bulma? Вие сте на правилното място. Bulma е популярна CSS рамка с проста система от мрежи на flexbox. Той се различава от другите рамки, като използва по-лек подход и не включва никакъв JavaScript - оставяйки това решение изцяло на разработчика (за да разгледате други опции, вижте нашия избор на най-добрите CSS рамки ).

В този урок ще демонстрираме как да инсталираме Bulma и да изградим уебсайт с различните му класове. За да се докаже колко гъвкави са класовете в Bulma, цялата страница на урока е изградена, без да се пише нито един ред CSS. Искате други опции? Опитайте отличен уеб конструктор . И за да сте сигурни, че вашият сайт работи най-добре, изберете правилния уеб хостинг обслужване.



Генериране на флаш продажба



(Кредит за изображение: бъдеще)

Generate CSS е най-горещото уеб събитие в града. От 20-22 септември можете да вземете билет на половин цена, като използвате кода ФЛАШСАЙЛ5. Щракнете върху изображението, за да научите повече.

01. Започнете

Булма: започнете



(Кредит за изображение: Bulma)

Създайте нова директория и в нея създайте index.html файл. Отворете този файл в редактор на код и създайте прост начален HTML документ, с DOCTYPE html и отзивчив таг за изглед.

Page Title

02. Намиране на инсталиране

Използването на Bulma out the box е толкова бързо, колкото добавянето на един CSS файл. С помощта на CDN добавете връзка в HTML. Ако е необходимо да промените променливите и да имате по-голям контрол върху рамката, npm инсталирайте Bulma може да се използва (вижте пълна документация ). За пълното изживяване трябва да се включи и страхотен шрифт 5.

03. Изградете страница

Булма: здравей свят



рисунки с писалка и мастило за начинаещи
(Кредит за изображение: Bulma)

Вътре в маркера на тялото създайте елемент от раздел и div с класа контейнер . В контейнера създайте h1 с класа заглавие след това абзац с класа субтитри . Засега въведете „здравей, свят“ в заглавието и малко текст в абзаца. Вече имаме основния стартов шаблон за Bulma.

Hello World

This is the basic starter template for Bulma

04. Създайте най-добрата лента за герои

Направете нов раздел над предишния и вместо класа раздел , дайте му класа герой . Класът герои позволява създаването на банер с пълна ширина, с множество опции, контролиращи височината му. В този нов раздел създайте div с класа тяло-герой и след това a контейнер това ще съдържа съдържанието.



...

05. Добавете заглавие и субтитри

Вътре в контейнера div добавете етикет h1 и h2 с класовете заглавие и субтитри . Това са класове по типография, които ще увеличат размера на тяхното съдържание. Bulma е умен да знае кога заглавие и подзаглавие са комбинирани и ще ги сближи.



06. Добавете цвят

Находка: цвят

(Кредит за изображение: Bulma)

Добавете класа е-първичен към секцията за герои. Това ще приложи основния цвят към фона и ще промени текста към по-светлия вариант. Вместо първичен , информация , успех , внимание , опасност , светлина и тъмно също може да бъде избран



07. Разделете съдържанието на колони

Първата област на съдържанието на уебсайта е разделена на две колони. Направете нова секция със секцията за клас и добавете контейнер. За да настроите колоните, се добавя div с колони клас. Всяка колона се добавя в родителския контейнер. Колоните ще се разпределят еднакво в наличното пространство с малка разлика между тях, освен ако не е посочено.

шрифтове, които се съчетават с вековна готика

Ако имате много съдържание, не забравяйте да архивирате активите си в надеждно облачно хранилище.

... ...

08. Създайте отзивчиви изображения

Bulma: отзивчиви изображения



(Кредит за изображение: Bulma)

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

09. Предложете действие с бутони

Класът на бутоните създава цветни бутони и може да се прилага елементи или елементи във форми. Добавете два бутона към първата колона и приложете модификатори на цвета към тях. Ако използвате повече от един бутон, ги увийте в div с класа бутони , който коригира разликата и позволява прилагането на класове като група.

canon eos 5d mark iv най-добра цена
Find out more Buy now

10. Създайте съдържание в кутия

Bulma: съдържание в кутия

(Кредит за изображение: Bulma)

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

Test

11. Използвайте емблематични кутии

Bulma се интегрира с Font Awesome 5, но е съвместим с всички библиотеки на шрифтове и има класове за извикване на повечето налични икони. Във всяко поле добавете контейнер за съдържание, последван от елемент span с класа икона . Вътре в диапазона използвайте елемент за извикване на необходимите класове за желаната икона. Иконите са оцветени по същия начин като текста.

... ...

12. Бъдете смели

Булма: Бъдете смели

(Кредит за изображение: Bulma)

Създайте нова секция за герои с две колони в долната част на страницата, като дадете е информация клас към раздела. За интересен ефект приложете и е смел клас към този раздел за фин градиент. Този модификатор работи с всичките седем от основните цветове.

13. Променете нивата

Нивата са чудесен начин да се гарантира, че елементите са вертикално центрирани в един ред. В рамките на нова секция в долната част на страницата добавете div с класа на ниво и вложете в елементи от четири нива. Всяко съдържание, добавено в елемент от ниво, ще бъде вертикално подравнено.

... ...

14. Добавяне и контрол на формуляри

За да добавите формуляр в долната част на страницата, направете нов раздел с две колони за герои с е-първичен . Разделете го на две колони и в дясната колона създайте a поле клас. Класът поле се използва за групиране на няколко входа на формуляра заедно, като се гарантира, че са разположени правилно. Всеки вход също трябва да бъде обвит в отделно лице .контрол клас.

15. Дайте обратна връзка на потребителите

Намиране: обратна връзка

(Кредит за изображение: Bulma)

След като формулярът бъде изпратен, той трябва да върне съобщение на потребителите, за да знаят какво се случва след това. Въпреки че Bulma не може да контролира кога ще се показва това съобщение, предният край може да бъде изграден с класа на съобщението.

Thank you!

...

Класът на гъвкавия долен колонтитул позволява добавянето на всеки елемент в долната част на страницата, осигурявайки място за информация за авторските права и навигация отдолу, както и за завършване на уеб сайта.

как да снимам изкуство за портфолио

...

17. Персонализирайте променливите

Повечето проекти, освен прототипите, ще имат изискване да работят с насоки и цветове на марката. По същия начин е безопасно да се предположи, че дизайнерът ще трябва да промени шрифтовете, цветовете или други аспекти на Bulma. Основна част от Bulma е, че е адаптивна и модулна. Не само модулите могат да бъдат селективно импортирани, но до 415 променливи Sass могат да бъдат променяни в рамките.

Използването на променливи означава, че задаването на нов цвят като основен ще промени този цвят в цялата рамка на Bulma за този проект. Първоначално настройването на това може да бъде сложно, но с помощта са предоставени ръководства три различни метода в документацията.

Тази статия първоначално е публикувана в брой 289 на списание за творчески уеб дизайн Уеб дизайнер . Купете брой 289 или абонирайте се тук .

Прочетете още: