- используется препроцессор SCSS
- используется CSS-сетка smart-grid на основе Bootstrap для быстрой адаптивной вёрстки
- используется normalize.css
- используется gulp-sourcemaps
- используется gulp-file-includer для разделения html на компоненты
- теперь все файлы сразу складываются в папку /builds, все минимизируется и компилируется прям во время верстки.
- установите NodeJS
- установите сборку с помощью: Git:
git clone https://github.com/Ko2doo/gulp-task-manager.git - установите
gulpглобально:npm i --global gulp-cli - после установке необходимого, перейдите в папку со скачанным проектом
- скачайте необходимые зависимости введя в терминал команду:
npm i - для запуска проекта введите в терминале:
gulp(режим разработки)
! Если всё этапы пройдены верно, должен открыться браузер с запущенным локальным сервером.
gulp-task-manager
|-- src fgsfdsdfsd
| |-- fonts
| |-- html
| | |-- section
| | |-- index.html
| |
| |-- img
| |-- js
| |-- scss
| |-- blocks
| |-- stylesheets
|
|--- .gitignore
|--- gulpfile.js
|--- LICENSE
|--- package-lock.json
|--- package.json
|--- readme.md- Папка
src- используется во время разработки:- шрифты:
src/fonts - JS-файлы:
src/js - html компоненты сайта:
src/html/section/ - главный файл в котором прописываются вызовы компонентов:
src/html/index.html - SCSS-файлы:
src/scss
- шрифты:
- Папка
build- папка, в которую складывается готовый проект (прям по время разработки)
gulp- запуск сервера для разработки проекта
- все сторонние библиотеки устанавливаются в папку
node_modules- для их загрузки воспользуйтеcь командой
npm i package_name - установка (пакеты необходимые для разработки) devDependencies
npm i package_name --save-dev - установка (пакеты от которых зависит проект) dependencies
npm i package_name --save - для подключения в проект нужно отредактировать gulpfile.js в тех тасках, в которых подключаются необходимые пакеты, например если это файлы стилей то в таске css-lib в массив подключаемых файлов добавить путь до скачанной библиотеки.
- для их загрузки воспользуйтеcь командой
В сборщик включена CSS-сетка smart-grid от Дмитрия Лаврика. Она позволяет избавиться от лишних классов в разметке за счёт использования примесей в SCSS и ускоряет адаптивную вёрстку. Конфигурация уже настроена в соответствии с сеткой Bootstrap. За улучшение сетки спасибо Алексеевичу
P.S. Полезный ресурс smart-grid Пример использования:
SCSS
.items{
@include row-flex();
@include md(justify-content, center);
.item{
@include col();
@include size(3);
@include size-md(5);
@include size-xs(10);
}
}Результат
.items {
display: flex;
flex-wrap: wrap;
margin-left: -15px;
margin-right: -15px;
}
.items .item {
box-sizing: border-box;
margin-left: 15px;
margin-right: 15px;
word-wrap: break-word;
width: calc(100% / 12 * 3 - 30px);
}
@media screen and (max-width: 992px) {
.items {
justify-content: center;
}
.items .item {
width: calc(100% / 12 * 5 - 30px);
}
}
@media screen and (max-width: 576px) {
.items .item {
width: calc(100% / 12 * 10 - 30px);
}
}Предпологается что в папке "src/html" будут находиться необходимые файлы для верстки
-
В папке "section" лежат html компоненты, а в основном файле index.html находятся вызовы этих компонентов.
-
Чтобы вызвать html компонент необходимо написать @@include('your_folder/your_file_name.html') пример см. ниже: HTML
<body>
@@include('sections/header.html')
</body>-
Предпологается что все глобальные стили будут храниться в этой папке, изначально она уже не пуста в ней содержится несколько полезных миксинов, сетка смарт-грид, файл reset.scss содержит сбросы некоторых стандартных стилей.
-
в файле helpers.scss находятся полезные миксины и функции пример их использования:
-
функции
em($px),rem($px)переводят пиксели в em или rem: SCSS
.header{
padding: rem(30) 0 rem(25);
}Результат
.header{
padding: 1.875rem 0 1.5625rem;
}:Внимание!: тоже самое и с функцией em()
- миксин
font($size, $weight)SCSS
.header{
& > p:first-child{
@include font(em(14), 600);
text-align: center;
}
}Результат
.header > p:first-child {
font-size: 0.875em;
font-weight: 600;
text-align: center;
}Реализована совместимость со старыми браузерами не поддерживающими нововведения CSS, для подключения совместимости в файле: /stylesheets/default-css-variables.scss необходимо: в переменной $compatibility пнаписать true, по умолчанию false.
Если не нужна совместимость просто писать как и раньше.
- в папке scss находится файл: main.scss
- в папке stylesheets храним глобальные стили
- в папке blocks храним стили секций сайта, подключаем секции в файле main.scss