• Главная»
  • Уроки»
  • CSS»
  • Sierra — Sass библиотека для реализации тёмного интерфейса

Sierra — Sass библиотека для реализации тёмного интерфейса

Sierra — это крутой фрэймворк для создания приятного пользовательского интерфейса.

Sierra — не просто набор заготовленных переменных и примесей. Помимо тёмно-синего интерфейса в ней содержатся стили для сеток, типографии, таблиц, кнопок, форм и других элементов сайта.

Компоненты:

  • Параграфы и заголовки
  • Кнопки
  • Элементы формы (выпадающие списки, переключатели и т.д.)
  • Таблицы
  • Пагинация
  • Отступы
  • Анимация загрузки

Все прелести данного фрэймворка можно увидеть на демонстрационной странице.

Большую часть переменных можно посмотреть в файле _variables.scss. Тут можно менять цвета различных элементов и задавать прочие базовые настройки.

Установка

1. Скачиваем копию библиотеки

Через bower

bower install sierra --save

Через npm

npm install sierra-library --save-dev

Через diamond

diamond install sierra

или вручную, пройдя по ссылке.

2. Подключаем стили в html файл

<link rel="stylesheet" href="dist/sierra.min.css">

Заметка: при импорте через diamond, подключение к Sass будет выглядеть так:

@import '~sierra';

3. Загружаем FontAwesome

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.1/css/font-awesome.min.css">

Теперь всё готово для использования библиотеки.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: http://www.hongkiat.com/blog/sierra-dark-ui-library-sass/
Перевел: Станислав Протасевич
Урок создан: 13 Мая 2017
Просмотров: 10288
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^