Шаблон для быстрого старта разработки с Gulp, Pug и Stylus
Готовый собранный проект находится в папке /dist/
Все иконки собираются в спрайт который лежит в app/img/pack.html путь указывается в файле add-on.js 64 строка
Для правок используй файлы script-edit.js и style-edit.css !!!
- Быстрый и удобный сборщик (gulp)
- Простейшие модули (js, styl, pug, json, прочие файлы)
- Сборка svg спрайтов для инлайн подлючения и формирование превью (gulp-svg-sprite)
- Сборка png спрайтов и ретина спрайтов (gulp-spritesmith)
- Pug миксины для @media (rupture)
- Форматирование исходного html после jade (gulp-prettify)
- Склейка @media и перенос в конец файла (css-beautify)
- Сервер и синхронное тестирование сайта в браузерах (с помощью browser-sync)
- Авто-подстановка вендорных префиксов в CSS (autoprefixer)
- Шаблонизатор Jade и препроцессор HTML (gulp-jade)
- Конкатенация JavaScript и CSS файлов (gulp-useref)
- Сжатие изображений (gulp-imagemin)
- Препроцессор CSS (gulp-stylus)
- Минификация CSS (minifyCss)
- Минификация JavaScript (gulp-uglify)
- Настроенная типографика на базе normalize.css
- Упаковка скомпилированных файлов в zip архив
- Создание скриншотов готовых страниц (gulp-webshot)
- Формирование стайлгайдов всего проекта (kss)
- Подстановка путей пакетов установленных через Bower (wiredep)
- Копирование готового проекта на ftp (vinyl-ftp)
- Создание директорий с файлалами инкапсулированных модулей
- Создание скриншотов страниц в разном разрешении и браузерах (gulp-gemini)
-
Установить node.js
-
Клонировать сам репозиторий
git clone http://github.com/fantazer/tnormal.git .
-
Установить все пакеты
npm i
-
Установить зависимости
bower i
-
Набрать в консоли gulp
-
В браузере откроется страница с проектом, по адрессу
http://localhost:3000/
gulp
- запускает вотчеры и серверgulp build
- собирает проектgulp build:ftp
- собирает проект и выкладывает его на ftpgulp template
- Создание директорий с файлалами инкапсулированных модулейgulp guide
- Создание стайлгайодовstart sc gemini gather
- Создание скриншотов под разные разрешения и браузеры
В файле file.json есть два объекта block
и page
для добавления блока на страницу использовать миксин jade +nameblock()
flex()
- использовние свойства flexflex(between)
- использовние свойства flex + space-betweenflex(around)
- использовние свойства flex + space-aroundbgi('имя изображения')
- задание фонового изображенияbr(значение)
- border-radiusfl()
- свойство flex-columnfw()
- свойство flex-wrapcp()
- при наведении cursor pointerround()
- border-radius 50%up()
- текст заглавнымиplaceholder(color)
- замена цвета у текста формcenter(val,pad)
- создание основного контейнера по центру страницы val - ширина, pad - падингиtriangle($direction = 'up', $size = 10px, $color = #000)
- создание треуголникаgradient($color1, $color2 = null, $strength = 10%)
- создание градиентаhover-underline($border-size = 1px, $type = 'solid', $color = null)
- создание эфекта подчеркивания при наведенияtable($border = true, $striped = true, $condensed = false)
- оформление таблицыbreadcrumb($character = "/", $spacing = 10px, $divider-color = #CDCDCD)
- создание хлебных крошекsize(numbers)
- задание размеров элементаul-reset(), ol-reset()
- сброс отступов у списковcf()
- clearfixellipsis($width = 100%)
добавление многоточия к текстуicon-arrow($direction = 'right', $size = 40px, $color = #888, $stroke = 1px)
- иконка стрелкиicon-x($size = 40px, $color = #888, $stroke = 1px)
- иконка закрытияfont-url(file)
- указание пути к шрифтуwebfont(family, file, hack-chrome-windows = false, weight = 'normal')
- подключение шрифтаbg-full()
- background на весь контейнерfocus(color)
- добавление цвета при фокусе объектаinit($breakpoints, $columns)
- задание настроек сетки
Tnormal/ # корень проекта
├──/dist # скомилированные файлы
├──/gemini # настройка сценариев для gemini
├──/app # исходные файлы
│ ├── /bower # скаченные зависимости
│ ├──/css # стили проекта
│ ├── /icon # стили для спрайтов растровых изображений
│ ├──/variable # переменные для стилей
│ │ ├──/ component # файлы стилей сетки
│ │ ├── _constant.styl # основные константы стилей проекта
│ │ ├── _default.styl # стили по умолчанию
│ │ └──_function.styl # описание основных миксинов и функций
│ │ └──_grid.styl # подключение сетки проекта
│ │ └──_helper.styl # стили помошники
│ │ └──_ie.styl # стили для старых версий браузеров
│ └── homepage.md # файл для создания стайлгайдов
│ └── styles-edit.css # файл для внесений изменений сторонним разработчиком
│ └── styles.styl # основной файл стилей
│ ├── /fonts # папка для шрифтов
│ ├── /html # папка с основными страницами
│ ├──/block_html # папка с файлами для конфигурации jade
│ │ ├──_const.jade # файл для создания объектов используемых в jade
│ │ ├──_mixin.jade # файл для создания миксинов в jade
│ │ ├──_script.jade # файл для подключения всех скриптов (footer)
│ │ └──_style.jade # файл для подключения всех стилей (header)
│ ├── /img # папка с изображениями
│ ├──/css # файлы стилей для спрайтов
│ ├──/svg # папка для всех svg иконок
│ ├──favicon.ico # иконка для сайта
│ ├──pack.html # файл спрайта svg
│ └──sprite.html # файл для просмотра спрайта svg
│ ├── /js # папка со скриптами
│ ├──script.js # основной файл скриптов
│ └──script-edit.js # файл скриптов для сторонних разработчиков
│ ├── /module # папка с создаными модулями проекта
│ ├── /index.html # основная страница проекта
│ ├── /allpage.html # страница для вывода всех страниц
├──/template # файлы для стайлгайда
├──/zip # архив всего проекта
├──.gemini.yml # конфигурация gemini
└──file.json # файл для быстрого создания страниц и модулей
├──gulpfile.js # конфиг gulp.js
└──readme.md # файл который вы читаете