Знайомство зі Skeleton, простим стартовим CSS шаблоном
У цій статті я познайомлю вас із легким CSS фреймворком. Спочатку я трохи розповім про нього та про його основні можливості. Потім я покажу, як його використовувати в реальному проекті, який ґрунтуватиметься на демо-сторінці, яку я створив.
Що таке Skeleton?
Як уже було сказано, Skeleton – це легкий CSS фреймворк (або стартовий шаблон (boilerplate), якщо ви віддаєте перевагу цій назві), створений Дейвом Гаманшем (Dave Gamache). А точніше, це два CSS файли: популярний файл normalize.css і сам файл skeleton.css. В останньому файлі містяться стилі фреймворку, близько 400 рядків коду в стислому вигляді.
Найбільш важливою частиною Skeleton є його сіткова система, яку я трохи пізніше проаналізую у цій статті. Додатково фреймворк надає базові стилі типових HTML компонентів, наприклад, кнопок, списків, таблиць і форм.
Щоб завантажити останню версію Skeleton, ви можете відвідати офіційний сайт та завантажити zip-архів. Як альтернативний варіант можна зробити «форк» репозиторію на GitHub. Після скачування та розпакування архіву у вас буде наступна файлова структура:
Практичний курс з верстки адаптивного сайту з нуля!
Вивчіть курс і дізнайтеся, як верстати сучасні сайти на HTML5 та CSS3
Як і у фреймворках Bootstrap і Foundation, Skeleton використовує підхід «спочатку мобільні» (mobile-first). Проте, як говорилося, він включає величезної кількості компонентів, які пропонують інші фреймворки; він містить тільки деякі, основні, CSS правила, які дозволять вам швидко почати процес розробки.
Слід зазначити, що Skeleton працює у всіх сучасних браузерах (включно з IE9+) без будь-яких обмежень. Нарешті, ви такожВи можете використовувати Sass або Less розширення для Skeleton.
Версії: остання та попередня
Є багато відмінностей між поточною версією та попередньою. У наступній таблиці наведено найбільш значні відмінності:
В останній версії Skeleton, на підставі підходу "спочатку мобільні", створена 12-колонова гумова сітка, що складається з рядків і колонок (як і у всіх CSS сітках).
Рядки повинні розташовуватися всередині обгортки, максимальна ширина (властивість max-width) якої може бути 960px. Щоб створити обгортку, ви визначаєте елемент div і надаєте йому клас container. Якщо ви знайомі з мережевою системою Bootstrap, ви напевно знаєте, що Bootstrap використовується той же клас для визначення обгортки.
Ширина елемента обгортки в Skeleton варіюється в залежності від розміру екрана. У будь-якому випадку, як уже було сказано, вона не може перевищувати 960px. У наступній таблиці наведено можливі значення:
Колонки вкладені у рядок. В одному рядку може бути максимум 12 колонок. Щоб створити колонку, вам потрібно визначити елемент div і присвоїти йому два класи. Спочатку ви призначаєте клас, який відповідає за розрахунок ширини колонок. Для цього ви можете використовувати будь-які класи, починаючи з one і закінчуючи twelve, або використовувати класи one-third, 2-thirds, а також one-half.
Потім ви призначаєте клас, який відповідає за зовнішні відступи у колонок. Можливими класами є columns та column. Якщо ви визначили ширину колонок за допомогою класів типу 2 та інших, то вам слід використовувати клас 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 рівнозначні колонки. Однак, для дуже маленьких екранів (