Знайомство з Skeleton, простим стартовим CSS шаблоном

12

Від автора: В кінці минулого року вийшла оновлена версія Skeleton. Насправді це перше оновлення за майже два з половиною роки. І це хороші новини для тих, хто вже користувався Skeleton і полюбив його за простоту!

У цій статті я познайомлю вас з легким CSS фреймворком. Спочатку я трохи розповім про нього і про його основні можливості. Потім я покажу, як його використати в реальному проекті, який буде ґрунтуватися на демо-сторінці, яку я створив.

Що таке Skeleton?

Як вже було сказано, Skeleton – це легкий CSS фреймворк (або шаблон (boilerplate), якщо ви віддаєте перевагу цю назву), створений Дейвом Гаманшем (Dave Gamache). А точніше це два CSS файлу: популярний файл normalize.css і сам файл skeleton.css. В останньому файлі містяться стилі фреймворку, близько 400 рядків коду в стислому вигляді.

Найбільш важливою частиною Skeleton є його сіткова система, яку я трохи пізніше проаналізую в даній статті. Додатково фреймворк надає базові стилі для типових HTML компонентів, наприклад, кнопок, списків, таблиць і форм.

Щоб завантажити останню версію Skeleton, ви можете відвідати офіційний сайт і завантажити zip-архів. В якості альтернативного варіанту можна зробити «форк» репозиторію на GitHub. Після скачування та розпакування архіву у вас буде наступна файлова структура:

Знайомство з Skeleton, простим стартовим CSS шаблоном

Також, як і в фреймворках Bootstrap і Foundation, Skeleton використовує підхід «спочатку мобільні» (mobile-first). Проте, як вже мовилося, він не включає величезної кількості компонентів, які пропонують інші фреймворки; він містить лише деякі, самі основні, CSS правила, які дозволять вам швидко почати процес розробки.

Варто відзначити, що Skeleton працює у всіх сучасних браузерах (включаючи IE9+) без будь-яких обмежень. Нарешті, ви також можете використовувати Sass або Less розширення для Skeleton.

Версії: остання і попередня

Є багато відмінностей між поточною версією та попередньої. У наступній таблиці наведені найбільш значні відмінності:

Знайомство з Skeleton, простим стартовим CSS шаблоном

Сітка

В останній версії Skeleton, на підставі підходу «спочатку мобільні», створена 12-колоночная гумова сітка, яка складається з рядків і колонок (як і у всіх CSS сітках).

Знайомство з Skeleton, простим стартовим CSS шаблоном

Рядки повинні розташовуватися всередині обгортки, максимальна ширина (властивість max-width) якої може бути 960px. Щоб створити обгортку, ви визначаєте елемент div і привласнюєте йому класу container. Якщо ви знайомі з сітковою системою Bootstrap, ви напевно знаєте, що в Bootstrap використовується той же клас для визначення обгортки.

Ширина елемента-обгортки в Skeleton варіюється в залежності від розміру екрана. У будь-якому разі, як уже було сказано, вона не може перевищувати 960px. У наступній таблиці наведено можливі значення:

Знайомство з Skeleton, простим стартовим CSS шаблоном

Колонки вкладені в рядок. В одному рядку може бути максимум 12 колонок. Щоб створити колонку, вам потрібно визначити елемент div і присвоїти йому два класу. Спочатку ви призначаєте клас, який відповідає за розрахунок ширини біля колонок. Для цього ви можете використовувати будь-які класи, починаючи з one і закінчуючи twelve, або використовувати класи one-third, two-thirds, а також one-half.

Потім ви призначаєте клас, який відповідає за зовнішні відступ (margin) у колонок. Можливими класами є columns і column. Якщо ви визначили ширину колонок за допомогою класів типу two та інших, то вам слід використовувати клас columns (замість column) в якості другого класу. Винятком є клас one, який можна однаково поєднувати з класом columns або column.

У той час як інші фреймворки підтримують вкладені рядка, Skeleton не рекомендує вкладати рядки всередині колонок. Більш того, сіткова система Skeleton надає додаткові класи, що відповідають за зміщення колонок. Дані класи (наприклад, offset-by-two) дозволяють вам збільшити простір між колонками, додавши до них властивість margin-left.

Утиліти

Як уже згадувалося, крім добре структурованої сітки, в Skeleton є додаткові зумовлені стилі. Наприклад, клас button, який дозволяє вам стилізувати елемент a, як кнопку. Також є можливість задати для кнопки світло-синій колір тла (властивість background-color), використовуючи клас button-primary.

Іншим прикладом може послужити використання обтікання (ліворуч або праворуч завдяки властивості float). Для цього можна використовувати клас u-pull-left або u-pull-right. Також для очищення обтікання існує клас u-cf. І це всього лише пара прикладів допоміжних класів, наявних у Skeleton.

Використання Skeleton

Тепер настав час використовувати потужні можливості Skeleton в демо-проекті. Ми будемо розглядати три різних прикладу.

На рисунку показано, як повинен виглядати наш елемент header на маленьких екранах і не тільки (≥ 550px). Зверніть увагу на те, що ми розділили рядок на 2 рівнозначні колонки. Однак, для дуже маленьких екранів (< 550px) нам потрібно, щоб колонки розташовувалися один під одним. Це означає, що кожна колонка має займати всю доступну ширину рядка.

Знайомство з Skeleton, простим стартовим CSS шаблоном

Ось HTML:


На даному етапі нам потрібно згадати, що Skeleton підтримує підхід «спочатку мобільні». Це означає, що коли ширина (властивість width) буде менше, ніж 550px, буде виконуватися наступний шматок коду:

.column,
.columns {
width: 100%;
}

Це гарантує нам те, що колонки будуть розташовані один під одним. Потім, коли ширина вікна браузера буде ширше, ніж 549px, спрацює сітка Skeleton, і наші колонки будуть займати 50% від доступною ширини рядка (оскільки їм заданий клас one-half). Звичайно, наша розмітка ґрунтується на значеннях, закладених у Skeleton за замовчуванням. Однак, у нас є можливість їх змінити.

Примітка: замість використання пари класів one-half і column, ми могли б використовувати класи six та columns, і отримали б такий самий результат.

Давайте подивимося на наш другий приклад. На рисунку показана наша розмітка для блоку section.about, коли область перегляду стає ширше, ніж 549px.

Знайомство з Skeleton, простим стартовим CSS шаблоном

Зверніть увагу на те, що перша колонка займає дві третини від ширини рядка, а друга – одну третину. І знову колонки будуть розташовані одна під одною і займати 100% від ширини рядка для дуже маленьких екранів. А ось і відповідна розмітка:

Примітка: замість використання пар класів two-thirds, column і one-third, column, ми могли б використовувати пари класів eight, і four columns, columns для отримання рівнозначного результату.

Давайте подивимося на наш останній приклад. Ось якою ми б хотіли бачити наш елемент footer:

Знайомство з Skeleton, простим стартовим CSS шаблоном

В цьому випадку потрібна нам рядок складається всього з однієї колонки. Вона займає 65.33% від ширини рядка. Нам також потрібно відцентрувати її. Для цієї мети ми використовуємо допоміжний клас offset-by-two. А ось і відповідна розмітка:

Подивіться на приклад на сайті CodePen.

Висновок

У цій статті ми розглянули основні можливості Skeleton, стартового CSS шаблону, який дозволить вам прискорити процес розробки фронтенда. Звичайно, пам’ятаєте про те, що Skeleton необов’язково повинен підходити для всіх проектів. Він є простим, хоч і з певними обмеженнями.

Чи доводилося вам використовувати Skeleton у ваших проектах? Чи подобається вам його простота або ви віддаєте перевагу працювати з більш складними фреймворками (Bootstrap або Foundation)?