В этой статье мы посмотрим на CSS фреймворк BULMA, тут я покажу несколько примеров и сравним его с Bootstrap, думаю будет интересно и полезно.
Также если вас интересует CSS, то посмотрите статью «CSS Grid и Flexbox. В чем разница и для чего нужны», тоже вполне вероятно будет интересно.
Установка CSS BULMA:
Для начала как обычно нужно установить фреймворк, для этого можете использовать CDN, NPM или сами можете скачать, давайте всё по порядку.
Чтобы подключить через CDN добавьте в свой HTML файл вот этот тег:
1 | <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"> |
Если хотите через NPM, то введите в терминал такую команду:
1 | npm install bulma |
Также можете через YARN:
1 | yarn add bulma |
Если же вы хотите скачать, то тогда нажмите скачать, и вы скачаете .zip файл, там заходим в папку и внутри неё заходим в «css», там берём файл «bulma.min.css», перемешаем его в папку с проектом, и подключаем.
Примеры CSS BULMA:
Мы рассмотрим несколько примеров, разных компонентов, и сравним их с компонентами Bootstrap, для начала давайте посмотрим на пример формы:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <form class="box"> <div class="field"> <label class="label">Email</label> <div class="control"> <input class="input" type="email" placeholder="e.g. alex@example.com"> </div> </div> <div class="field"> <label class="label">Password</label> <div class="control"> <input class="input" type="password" placeholder="********"> </div> </div> <button class="button is-primary">Sign in</button> </form> |
Вот как будет выглядеть результат:
Как видите всё достаточно симпатично, но давайте посмотрим, как подобная форма выглядит на Bootstrap:
Я бы сказал, что на Bootstrap более бледный, в том в плане, что не такой контрастный, не такие яркие цвета используются, что для тех кто любит всё более яркое, может быть минусом. Ещё хоть я тут это не показал, но в BULMA более понятная вёрстка, сами классы они понятнее и короче.
Теперь посмотрим на кнопки, с кнопками всё немного интереснее, вот как они выглядят в HTML:
1 2 3 4 5 6 7 8 9 10 11 | <div class="buttons"> <button class="button is-primary">Primary</button> <button class="button is-link">Link</button> </div> <div class="buttons"> <button class="button is-info">Info</button> <button class="button is-success">Success</button> <button class="button is-warning">Warning</button> <button class="button is-danger">Danger</button> </div> |
Вот что отображаются:
Вот как те-же кнопки выглядят в Bootstrap:
Тут уже как видно, кнопки в Bootstrap более яркие, и в целом больше вариантов как их можно сделать, например можете просто виде ссылки, и здесь мне больше классы понравились в Bootstrap.
Последние что я покажу, так это пример работы с колонами, на мой взгляд это самое важное, вот не большой пример из BULMA:
1 2 3 4 5 | <div class="columns"> <div class="column is-one-third">is-one-third</div> <div class="column">Auto</div> <div class="column">Auto</div> </div> |
Вот что вышло:
То есть мы просто взяли одну треть экрана, можно так сказать, здесь я покажу как выглядит тоже самое на Bootstrap в HTML:
1 2 3 4 5 6 7 8 9 10 11 | <div class="row"> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> <div class="col"> One of three columns </div> </div> |
Здесь особо нет разницы что использовать, но в целом всё одинокого, с минимальными отличиями.
Вывод:
Здесь мы разобрали CSS фреймворк BULMA, показали несколько примеров и сравнили с Bootstrap, и как вы можете заметить он не сильно отличается, но стоит сказать, что Bootstrap весит меньше, но у него есть ещё JS скрипты, что тоже могут нагружать сайт, поэтому Bootstrap во многим подоёдт болше чем BULMA, но это на ваше усмотрение.
Если ваз заинтересовал этот Фреймворк, то рекомендую. почитать всю его документацию.
Подписываетесь на соц-сети:
Оценка:
Загрузка...