Подключение библиотеки bulma через CDN.

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

Этот этап является обязательным, чтобы приступить к работе.

В этом видео мы рассмотрим самый простой и удобный способ, как вы можете подключить библиотеку Bulma к вашей веб-странице. Мы с вами будем использовать так называемые CDN сервера.

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

Самое главное удобство этого способа в том, что подключение библиотеки происходит очень быстро и удобно. Но, у этого способа есть ряд недостатков, о которых мы позже поговорим.

Чтобы подключить фреймворк Bulma с помощью CDN, сначала нужно узнать ссылку, по которой веб-страница будет получать доступ к этой библиотеке. 

Для этого мы можем открыть любую поисковую систему (например, Google) и набрать ключевую фразу "CDN bulma" и первое, что мы получим в выдаче - это тот сайт, на котором находятся ссылки на эту библиотеку.

Вот этот сайт:

https://cdnjs.com/libraries/bulma

Если необходимо, чтобы библиотека максимально быстро загружалась, нам понадобиться ссылка с окончанием min.css.

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

Если вы хотите просматривать исходный код и скорость загрузки страницы пока не имеет особого значения, вы можете воспользоваться полной версией библиотеки (ссылка, которая оканчивается на bulma.css).

И для того, чтобы подключить эту библиотеку к веб-странице, нам понадобиться всего-лишь один элемент, который будет располагаться внутри раздела <head> html документа.

Сделать это можно с помощью элемента link.

<!doctype html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Пробный документ</title>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.css">
    </head>
    <body>
    </body>
    </html>

Первым признаком того, что стили Bulma подключились, будет являться то, что измениться шрифт текста на веб-странице.

Чтобы окончательно убедиться, что все подключилось и работает можно создать какой-нибудь элемент:

<a class="button">Кнопка</a>

Способ подключения стилей CSS с помощью CDN-серверов удобный, но самый главный недостаток использования такого способа заключается в том, что вы зависите от этого удаленного сервера. Если там произошел какой-то сбой, то все стили на вашей веб-странице "полетят". 

Использование CDN ссылки создает дополнительную нагрузку при загрузке веб-страницы. Браузеру приходится обращаться не только к вашему серверу, но также ему приходиться обращаться к удаленному серверу. Это лишние запросы, дополнительное время загрузки веб-страницы. В итоге, скорость загрузки веб-страницы падает.

Третий значительный недостаток использования CDN в том, что мы не можем пользоваться препроцессорами SASS. Библиотека Bulma интегрирована с этим, вы можете работа с переменными, гибко настраивать внешний вид Bulma. Этих возможностей у вас не будет при использовании CDN.

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