Как построить A? Адаптивный дизайн блога с Bulma CSS

1656614655 kak postroit a adaptivnyj dizajn bloga s bulma css

Содержание статьи

от ZAYDEK

Оооооо

?‍‍ Спасибо, Бульма!

Прежде чем перейти к статье, я просто хочу поделиться, что я создаю продукт, и я хотел бы собрать некоторые данные о том, как лучше обслуживать веб-разработчиков. Я создал краткую анкету, чтобы проверить ее до или после прочтения этой статьи. Пожалуйста, посмотрите это – спасибо! А теперь вернемся к нашему обычному запланированному программированию.

Привет интернет!

Я здесь, чтобы развить вас в том, что создание веб-сайтов должно быть сложным. Кроме того, в считанные минуты мы, простые смертные, научимся создать красивый и (!) адаптивный дизайн блога с помощью Bulma.

Картошка?! Bulma – это фреймворк CSS и детище @jgthms. ?

Я также преподавал бесплатный полноценный курс Bulma CSS на Scrimba.com, где мы создаем эти? дизайны. Нажмите здесь, чтобы зарегистрироваться! ?

Бульма? ¯\_(ツ)_/¯

Bulma решает много проблем – много. Независимо от того, нужен ли вам визуальный компонент или хотите понять, как компонент может быть кодифицирован, с помощью передового опыта и лучшей в своем классе документации, Bulma здесь, чтобы помочь! ?‍?

Bulma даже не является версией 1.0, и имеет широкое распространение с более чем 150 тысячами загрузок в месяц и 26 тысячами звезд на GitHub. Думайте о Bulma как о конкуренте Bootstrap, несмотря на то, что это просто CSS. ? Посмотрите, ма, нет YavaScript!

Как работает Bulma?

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

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

Растерянный? Начать? здесь, чтобы сначала изучить основы Bulma.

Что на счет того? дизайн?

Этот дизайн можно лучше понять как три части:

☝️Сеть CSS
✌️ Компоненты Bulma
? Содержание

The CSS Grid спецификация – это то, как мы собираемся создать индивидуальный адаптивный дизайн, где Компоненты Bulma дайте нам полезные шаблоны и разделы для разделения нашего содержимого, и содержание это… наше содержимое, конечно! ?

☝️ CSS Grid

Несмотря на то, что Bulma готова реагировать, мы вместо этого выберем CSS Grid, чтобы сохранить полный контроль над адаптивным дизайном. боишься? Не будь! Вот секрет; это всего 8 строк понятного кода! ?

Это происходит так: мы создаем заявку .grid класс для общего использования, поэтому в определенных обстоятельствах, когда мы хотим, чтобы наше содержимое выделялось и было шире, мы создаем специальный .grid-xl класс, который мы можем использовать для каждого элемента:

1*eW7qDO0PdmJOUJvcLIgD8g — Вау… это все? CSS Grid *это* волшебное! ??

Сначала мы создаем шаблон адаптивной сетки с 5 столбцами с идентификаторами. xl и md. Тогда мы рассказываем .grid * чтобы охватить md столбец, например столбец содержимого, и .grid-xl охватывать колонны xl, например, все столбцы. ?️

А теперь представьте, что создаете разнообразные .grid-sm, .grid-lg, и т.д. для расширения разной ширины оговорки. Подумайте об этом… это не просто лаконичный или классный, это 100% современный адаптивный дизайн. Смотрите, без медиа-запросов!

Растерянный? Вы можете узнать больше о CSS Grid? здесь с Пером!

✌️ Компоненты Bulma

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

Теперь, поскольку Bulma может быть лаконичным или трудно понять на первый взгляд, ? Я воспроизвел дизайн с помощью ASCII, чтобы продемонстрировать, как мы можем смоделировать дизайн, используя разные компоненты Bulma:

1*WN-brZSHX68U0B8D_QeBJA — Что если бы мы могли написать такой код?

Правда в том, что Bulma более лаконичен, но это понятно, учитывая HTML. Обратите внимание, что я также затуманиваю некоторые детали, чтобы лучше подчеркнуть, как работает Bulma. Однако вы можете просмотреть этот интерактивный скринкас, чтобы увидеть полный код. ?

Посмотрите еще раз; сообщение .container (.grid) и .columns (.grid-xl)? Первый, например, будет переведен на <div class="container grid»>. Вот *как* мы можем интерполировать нашу сетку с компонентами Bulma!

Вы можете узнать больше о компонентах Bulma? здесь. В этом дизайне блога мы использовали раздел, контейнер, хлебную крошку, медиа, изображения, столбцы и содержимое. И, несмотря на это, я запутал это, мы также использовали модификаторы! ?

Представьте HTML в качестве пластика, CSS как краску, а Bulma как LEGO. ?

? Содержание

Как и обещали, последний содержание наш веб-сайт. Из которых принадлежит внутри нашей .content компонент. Помните, я говорил, что Bulma полагается на курсы по желанию? Ну – это 99% времени; внутри .contentBulma применяет CSS к:

• p параграфы
• ul, ol, dl списки
• h1 к h6 заголовки
• blockquote цитаты
• em и strong
• table, tr, th, td таблицы
• тому подобное

И где сияет Bulma️s ✨ это .content можно совмещать с модификаторами. К ним относятся .is-small, .is-mediumи .is-large изменять .contentдетский font-size! Вы можете узнать больше о .content здесь.

Поздравляю! Спасибо, что прочли! 6(^ω^)9

Сейчас феноменальное время, как никто другой, чтобы начать разработку интерфейса. С введением спецификаций CSS, таких как Flexbox и CSS Grid и фреймворков, таких как Bulma, создание для Интернета еще никогда не было более доступным!