Маленький привлекательный фреймворк для работы с сеткой и UI-kit'ом, который сбережёт вам время, для наиболее важных вещей.
Для начала работы требуется установить все зависимые пакеты, для этого в корневой директории данного проекта необходимо выполнить комманду в консоли:
npm iЕсли установка пакетов прошла успешно, значит можно запускать Gulp-сборщик. Его миссия:
- компилировать jade в html
- компилировать stylus в css
p.s. при горячей необходимости сменить препроцессор для исходников, можно это проделать, предварительно установив нужный пакет:
npm i <название пакета препроцессора>Для компиляции веб-страниц и их модульной разработки используется препроцессор для HTML - Jade.
Для компиляции стилей и их модульной разработки используется препроцессор для CSS - Stylus.
Все исходники находятся в ./src:
- /styles/
- style.styl — главный файл стилей, компилируется в корень проекта в папку ./css. 3десь подключаются нужные и отключаются ненужные стилевые файлы, о них далее по порядку;
- _grid.styl — основной файл сетки (не рекомендуется изменять) подробнее о сетке;
- _grid-show-up.styl — файл сетки для демонстрации (в случае необходимости можно изменить);
- reset.styl - файла сброса стилей браузера, взято с reset.css
- _ui-kit.styl - основной файл UI-kit`а, содержит в себе все основные стили веб-сайта(шрифты, заголовки, кнопки, формы ввода), вёрстку необходимо начинать именно с него подробнее;
- _ui-kit-show-up.styl - аналогично как и для _grid.styl, этот файл содержит демонстрационные стили для UI-kit'а (в случае необходимости можно изменить);
- /grid.jade — демонстрационный файл сетки, компилируется в корень проекта, доступен для просмотра;
- /ui-kit.jade — демонстрационный файл UI-kit'a, также компилируется в корень проекта, доступен для просмотра.
Sexy CSS позволяет добавить 1 - 6 блоков в строку, с последующим расположением на всех разрешениях экрана.
Для добавления например трёх блоков в строку достаточно обернуть их следующим образом:
<div class="line">
<div class="wrap">
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
</div>
</div>При использовании двух блоков в строке есть возможность сделать один блок сделать больше относительно второго.
<div class="line left-main"> //левый блок будет больше правого
<div class="line right-main"> // и наоборотНа разрешении экрана менее 768px блоки могут опционно иметь предустановленную ориентацию, а именно вертикальнyю, либо горизонтальную.
Для этого достаточно <div class="line"> добавить класс vertical, либо horizontal соответственно.
На мобильных устройствах (т.е. на разрешении экрана менее 768px) родитель блоков может становится областью вертикального скролла. В которой блоки обретают ширину равной половине своего родителя (≈половина экрана).
Для этого достаточно <div class="line"> добавить класс scroll.
| экран | 1 блок | 2 блока | 3 блока | 4 блока | 5 блоков | 6 блоков |
|---|---|---|---|---|---|---|
>768px |
D | D | H,V,S | H,V | H,S | H,V,S |
>320px |
D | H,V | D,S | H,V | D,S | D,S |
- H - есть возможность горизонтального расположения
- V - есть возможность вертикального расположение
- S - есть возможность горизонтального скролла
- D - нет модификатора ориентации
p.s. Для лучшего понимания, можно открыть локальный пример и поресайзить окно.
Изначально UI-kit содержит в себе базовые элементы сайта, которые при необходимости можно изменять. Обо всех элементах далее по порядку.
Данный пункт является невидимым для демонстрационного варианта, но является самым основным для вашего удобства работы с UI-kit`ом.
Для начала производим подключение шрифтов из сторонних источников. Если требуемого шрифта нет в свободном доступе в сети, можно создать дополнительный файл _fonts.styl, в котором и прописать все необходимые вам шрифты(font-face). После чего каждый шрифт добавить в функцию по аналогии с уже существующими.
Для задания цветов используются переменные. Цвета для фона блоков в демонстрационном варианты задаются в файле _ui-kit-show-up.styl
Для всего сайта принимается одинаковая анимация(transition), в качестве функции, в которой есть возможность при вызове менять длительность применяемой анимации.
Для каждого стиля типографики создаётся класс, которому определены размер, шрифт и прочие дополнительные параметры.
Создаётся класс button где указаны все css-правила для кнопок, а также определены все состояния.
Создаётся класс link где указаны все css-правила для ссылок, а также определены все состояния.
Переопределяются стандартные чекбоксы на кастомные. Подробнее о кастомизации на хабре.
Создаётся класс input где указаны все css-правила для полей ввода, а также определены все состояния.
Стилизация выпадающего списка находится в файле _chosen.styl
Подробнее о библиотеке можно узнать здесь. Помимо этого, важно не забыть инициализировать chosen, как это сделано в файле front_init.js
Для демонстрации UI-kit'a на отдельной странице требуется ещё небольшой свод css-правил. Они расположены в файле _ui-kit-show-up.styl По-большому счёту там добавлены расстояния для более привлекательного внешнего вида, а также оформление цветовых блоков.
Flip Animation - это небольшое решение для простого и стильного анимирования вашего веб-приложения. Для его инициализации требуется подключить flip_animation.js к вашей html-странице:<script src="./js/flip_animation.js"></script>###6.1 Всплывающее окно Для создания всплывающего окна достаточно добавить простую html-разметку к вашему документу:
<div data-bind="popUpOpen"> Call PopUp</div>
<div class="popup hide">
<div data-bind="popUpClose">X</div>
<div data-bind="popUpClose"></div>
<div class="popup-container">
<!--Контент всплывающего окна-->
</div>
</div>Как видно из примера, элементы, которые вызывают всплывающее окно, должны иметь атрибут: data-bind="popUpOpen", для закрывающих элементов атрибут: data-bind="popUpOpen".
В блоке с классом popup-container распологается ваш контент всплывающего окна.
Вот впрочем и всё. А, ну ещё у всплывающего окна есть приятная анимация, оно выплывает снизу и уплывает наверх. локальный пример.
При загрузке странице блоки плавно появляются из нуля прозрачности одни за другим, а затем, при скроле они появляются по мере прокрутки страницы один за другим.
Для того чтобы анимировать блок таким образом, как описано выше, достаточно добавить ему класс flip-section