Skeleton — быстрый старт

skeleton
image-818

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

В этой статье я познакомлю вас с этим легким фреймворком.

Что такое Skeleton?

Как уже упоминалось выше, Skeleton  легкий CSS фреймворк, созданный Дейвом Гамашом. В частности, это два CSS файла: normalize.css и skeleton.css. Последний файл содержит стили фреймворка, это около 400 строк несжатого кода.

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

Чтобы скачать последнюю версию Skeleton, вы можете перейти на официальный веб-сайт. Альтернативный вариант сделать форк с репозитория GitHub.

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

Skeleton/
├── css/
│     ├── normalize.css
│     └── skeleton.css
├── images/
│     └── favicon.png
└── index.html

Аналогично фреймворкам Bootstrap и Foundation, Skeleton также использует мобильный подход. Тем не менее, он не включает в себя большое количество компонентов; он содержит только некоторые основные правила CSS, которые помогут вам начать процесс разработки.

Стоит отметить, что Skeleton является полностью функциональным во всех последних браузерах, включая IE9 +. И наконец, вы также можете выбрать Sass или Less расширения Skeleton.

Изменения по сравнению с последней версией

Есть много различий между текущей версией и предшествующей ее. В таблице ниже приведены наиболее важные различия:

Особенности V2.0.2 (Current Version) V1.2 (Previous Version)
CSS файлов 2 3
Мобильный вид Да Нет
Grid 12 адаптивных столбцов 16 адаптивных столбцов
Типографские единицы rem px

Grid

Последняя версия Skeleton определяет сетку из 12 столбцов.

1421719099grid-example[1]
image-819

Строки должны быть размещены внутри обертки, которая может иметь максимум ширины 960px. Чтобы создать обертку вы должны определяете div элемент и применить container класс к нему. Если вы знакомы с сеткой Bootstrap, вы знаете, что Bootstrap использует то же имя класса, чтобы определить его обертку.

Ширина элемента обертки в Skeleton варьируется в зависимости от размера экрана. В любом случае, как уже упоминалось, он не может превышать 960px.

Колонны вложены в ряды. Они масштабируются до 12 для каждой строки. Чтобы настроить колону вы должны определить div элемент и назначить ему два класса. Во-первых, вы добавляете класс, который отвечает за определение ширины столбца. Чтобы добиться этого, вы можете использовать классы one до eleven (от одного до двенадцати) или one-third, two-thirds, и one-half.

7661

Второй класс отвечает за настройки полей столбцов. Возможные классы columns и column. Если вы определите ширину столбцов с первым вариантом (например, с помощью two класса), вы должны использовать columns класс (вместо column) в качестве второго класса. Исключением является при использовании one класса, который может быть в равной степени в сочетании с columns и column.

В то время как другие механизмы поддерживает вложенные строки, Skeleton рекомендует не использовать вложенные строки в столбцах. Кроме того, grid система Skeleton обеспечивает дополнительные классы для отступов столбцов. Смещение (например, offset-by-two) позволяют увеличить пространство между колоннами, добавив свойство margin-left.

Кнопки

Как уже упоминалось, фреймворк содержит дополнительные стили. Например, есть класс button, который позволяет обернуть ссылку(a) в виде кнопки. Также возможно сделать кнопку светло-голубого цвета с помощью класса button-primary.

7661

Формы

Формы это частая проблема для проекта, но здесь есть большое количество классов для облегчения работы с ними.

7661

Вывод

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