Уровнем выше? С Bulma CSS

1656620900 urovnem vyshe s bulma css

от ZAYDEK

КАМЕХАМЕХАААА?

Лучший фреймворк CSS со времен Bootstrap

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

1*4urWdQBOzdIhWfSmcaSfhg
О.Г. Бульма. →

Встречайте Bulma CSS! Бесплатный курс? здесь

Кроме того, что Bulma является вторым по долговременному персонажу в Dragon Ball Z, Bulma — это современный фреймворк CSS, основанный на Flexbox от Джереми Томаса @jgthms. И Bulma быстро набирает популярность с более чем 150 тысячами загрузок в месяц и 26 тысячами звезд на GitHub. Хорошо… расскажите мне больше. ?

С Bulma мы можем создавать красивые и адаптивные веб-сайты с легкостью. Джереми разработал Bulma как многоразовый набор шаблонов Sass для начала новых проектов. Не знаю дерзкий? Sass *компилирует* в CSS. И как только Flexbox стал стандартизированным, Джереми использовал его для создания того, что мы сейчас знаем как Bulma.

В этой статье я подробно расскажу о том, как работает Bulma и что мы можем создать с ней.

1*YUa4liSlBUoldpJGt0ovtg
1*4NZIFhHJqCZPERX-b1hxJQ
1*Ejl2VJMpj-2sKbSMN4cgyw
Хотите научиться построить эту 3D-графику? Дай мне знать!

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

Scrimba.com – это платформа для разработки интерфейса, где веб-сайты записываются как события, а не как видео, и их можно редактировать. ?

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

Bulma – это 4,5 тыс. строк Sass и 9,5 тыс. строк при компиляции в CSS. Что, чертовски, делает весь этот код?! Bulma касается 90% распространенных шаблонов веб-сайтов, таких как столбцы, формы, компоненты, модификаторы, макеты и элементы. Код *также* адаптивный и можно дополнительно тематизировать и настроить.

Bulma не решает всех проблем, но может быть гораздо производительнее, чем ручная кодировка Sass или CSS. И поскольку Bulma компилируется в CSS, он адаптируется к фреймворкам и библиотекам JavaScript, таким как Angular, React и Vue. Короче говоря, Bulma работает как Bootstrap, но без JavaScript.

В отличие от Bootstrap, Bulma полагается на CSS, а не JavaScript. Но, как и Bootstrap, поставляется с собственным сбросом CSS. Теперь давайте рассмотрим, как Bulma работает по первым принципам. Я предполагаю, что вы знакомы с HTML/CSS, но не больше, поэтому классический CSS выглядит так:

Примечание: Хотя это не Bulma, он демонстрирует, как работает Bulma.

<!DOCTYPE html><html>  <head>    …    <style>
p {  line-height: 2;}
    </style>  </head>  <body>    <p>      A long time ago in a galaxy far far away…    </p>  </body></html>

Здесь мы определили а p в нашем HTML и в нашем CSS определено все p‘, например, имеет двойной интервал line-height: 2. Подождите – а если мы не хотим всех ps быть через двойной интервал? Или что, если мы хотим, чтобы некоторые, но не все были разделены двойным интервалом? Тогда мы можем вместо этого подключиться к CSS с помощью классов:

<!DOCTYPE html><html>  <head>    …    <style>
.double-spaced {  line-height: 2;}
    </style>  </head>  <body>    <p class="double-spaced">      A long time ago in a galaxy far far away…    </p>  </body></html>

Итак, мы определили класс с именем double-spaced что мы выбираем против того, чтобы элементы наследовали CSS, как в первом примере. И это разумнее, потому что нам труднее впоследствии перезаписать наш CSS. Тем не менее, мы можем пойти еще дальше, чтобы сделать это тяжелее, и мы можем сделать наш класс условным:

<!DOCTYPE html><html>  <head>    …    <style>
p.double-spaced {  line-height: 2;}
    </style>  </head>  <body>    <p class="double-spaced">      A long time ago in a galaxy far far away…    </p>  </body></html>

А теперь double-spaced требует наличия а p элемент. Это есть условный CSS, и мы можем пойти еще дальше! Например, мы можем использовать только классы class-1.class-2 создать условные занятия. Это один из приемов, используемых Bulma для создания контрактов HTML/CSS.

*АХЕМ* Мы сейчас просто пишем CSS в нашем HTML?

(ง •̀_•́)ง

Разница здесь в том, что Bulma подчеркивает общие шаблоны, используя семантику, а не правила CSS друг к другу. Это означает, что мы используем Bulma для описания отношений, а не правил, и потому более мощным. Кроме того, новая документация Bulma удивительна и лишает CSS много догадок.

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

<section class="section">  <div class="container">    ...  </div></section>

Имея достаточно хорошо разработанных классов и контрактов, мы можем создавать все виды красивых и отзывчивых веб-сайтов при поддержке Bulma. Осмотрите выставку! ⭐️ Теперь, прежде чем зайти вперед, давайте начнем с Hello World, а затем со следующего слайда – это не слайд, это веб-сайт.

1*LN_Rupiz74q5b-yAfxgRQw
1*2hcqN-nehso7LlXNRNl7hQ
Нажмите любое из них, чтобы открыть интерактивную площадку Scrimba. ?

И в ближайшее время я опубликую еще две ✌️ статьи, в которых подробно расскажем, как мы можем создать хороший блог и стартовую страницу Tesla вместе с Bulma! Чтобы получить обновление, следите за мной на Medium ✍️ и Twitter. ? Однако я преподаю их на бесплатном интерактивном курсе Scrimba. Нажмите здесь, чтобы зарегистрироваться! ?

И без лишних разговоров…

«Привет Мир»

1*LN_Rupiz74q5b-yAfxgRQw
*немножко* увеличил масштаб. Нажмите для открытия интерактивной площадки Scrimba. ?

Теперь, когда мы поняли, как работает Bulma, давайте узнаем, как Hello World:

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <meta        name="viewport" content="width=device-width,        initial-scale=1">    <title>Hello Bulma!</title>    <link rel="stylesheet" href="    <script defer src="  </head>  <body>    <section class="section">      <div class="container">        <h1 class="title">          Hello World        </h1>        <p class="subtitle">          My first website with <strong>Bulma</strong>!        </p>      </div>    </section>  </body></html>

Возвращайся – не бойся! ? Все веб-сайты Bulma начинаются с этого шаблона. Остановимся на чead элемент первый; лink указывая на bulma.min.css грузы Бульма, а сcript указывая на аll.js скачивает иконки Font Awesome. Нпримечание: Bulma поддерживает все значки библиотеки шрифтов.

А Bulma предпочитает использовать элементы HTML5, например section против div где это уместно. Он более читабельный и идиоматический. Подождите – что делать, если браузер клиента устарел и поэтому не распознает элементы HTML5? Бульма также позаботится об этом!

/* bulma.css#L312 */
article,aside,figure,footer,header,hgroup,section {  display: block;}

Спасибо Bulma! ?‍ Это гарантирует, что элементы HTML5 отображаются как блочные элементы, несмотря на браузер клиента. Хорошо – давайте рассмотрим быody:

<section class="section">  <div class="container">    <h1 class="title">      Hello World    </h1>    <;p class="subtitle">      My first website with <strong>Bulma<;/strong>!    </p>  </div></section>

Когда я впервые узнал о Bulma, я (╯°□°)╯︵ ┻━┻, потому что это так коротко, но как только я успокоился, я начал распознавать возникающую закономерность: форму дерева нашего веб-сайта. И это гораздо проще, чем я подумал:

   .section       |  .container     /   \.title  .subtitle   /       \ ...       ...

Ааааа Где .section определяет начало нового содержимого, .container является классом обертки для содержимого (например, текста) и используется для адаптивного дизайна. И .title и .subtitle предназначены для эстетики. Сделав это, Bulma позаботилась о десятках деталей, таких как передовой опыт и адаптивный дизайн. ??

За пределами Hello World?

1*2hcqN-nehso7LlXNRNl7hQ
Нажмите для открытия интерактивной площадки Scrimba. ?

Думайте о Bulma как о частях Lego с модификаторами, таких как цветовые варианты. Итак, для создания этого веб-сайта требуется всего несколько частей и модификаторов, например .columns, .media, .icon – Это оно. Хотя код * является более сложным, это потому, что это код. Состав сайта прост:

         .column            |         .media          /   \.media-left  .media-content        /       \    .icon      .content      /           \    ...           ...

Выше показано, как выглядит одна колонна Bulma как дерево. И в коде:

…<div class="column">  <article class="media notification is-info">    <figure class="media-left">      <span class="icon is-medium">        <i class="fab fa-2x fa-css3-alt"></i>      </span>    </figure>    <div class="media-content">      <div class="content">        <h1 class="title is-size-4">          Bulma        </h1>        <p class="is-size-5">          <strong>Bulma</strong> is a modern CSS framework...        </p>      </div>    </div>  </article></div>…

Примечание: Модификаторы, такие как .notification, .is-info, .is-mediumи так далее помогают персонализировать наш веб-сайт. Некоторые модификаторы условны и требуют другого класса, а некоторые общедоступны. Детальнее о них можно узнать здесь. А для интерактивной игровой площадки полного сайта нажмите здесь. ?

1*AeG2UlfaWGBM7VVT0BZVmQ
Нажмите для открытия интерактивной площадки Scrimba. ?

Бульма увлекательная! Мы можем создавать красивые и адаптивные веб-сайты, используя семантику без написания CSS.

Последние мнения?

Больше всего мне нравится в Bulma то, что это средство понять, как думает его создатель, не спрашивая его. Как сделать X? Посмотрите! Это мощная идея – мы можем заглянуть в разум гуру CSS, чтобы найти ответы, а не самостоятельно взламывать неидеальные решения.

Спасибо, что прочли! Сначала я колебался в изучении Bulma, но потом понял, насколько мощным и идиоматическим он может быть. Поэтому я решил, что Bulma не должна оставаться незамеченной, потому что проектирование и разработка веб-сайтов часто может быть гораздо сложнее, чем ожидалось. Снова — спасибо за прочтение! ???

Нравится ли это? Есть еще два – нажмите здесь и здесь!

1*jYb2etzcRa1YfBSm_JYjGQ
1*lzMU40hG75TH-k1oNlSfdQ
Хотите научиться построить эту 3D-графику? Дай мне знать!

Рассмотрите возможность поддержки jgthms на Patreon! Он полон решимости сделать Bulma своим источником существования и полной преданностью. ?‍?

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

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