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
Просмотров: 10497
Правила перепечатки
5 последних уроков рубрики "CSS"
-
Забавные эффекты для букв
Небольшой эффект с интерактивной анимацией букв.
-
Реализация забавных подсказок
Небольшой концепт забавных подсказок, которые реализованы на SVG и anime.js. Помимо особого стиля в примере реализована анимация и трансформация графических объектов.
-
Анимированные буквы
Эксперимент: анимированные SVG буквы на базе библиотеки anime.js.
-
Солнцезащитные очки от первого лица
Прикольный эксперимент веб страницы отображение которой осуществляется “от первого лица” через солнцезащитные очки.
-
Раскрывающаяся навигация
Экспериментальный скрипт раскрывающейся навигации.