All Projects → crecotun → Fabium

crecotun / Fabium

+100 for productivity

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Fabium

Bathe
The simplest WordPress starter theme including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, Eslint, imagemin, Browsersync, etc.
Stars: ✭ 65 (-39.81%)
Mutual labels:  autoprefixer, postcss, browsersync
Frasco
Quick starter for Jekyll including full setup for Sass, PostCSS, Autoprefixer, stylelint, Webpack, ESLint, imagemin, Browsersync, etc.
Stars: ✭ 123 (+13.89%)
Mutual labels:  autoprefixer, postcss, browsersync
Kratos Boilerplate
🔥 A simple boilerplate for creating statics PWA using Webpack, Pug, PostCSS and CSS Modules
Stars: ✭ 308 (+185.19%)
Mutual labels:  postcss, pug
Gulp Tutorial
Code examples for my Gulp.js tutorial series
Stars: ✭ 383 (+254.63%)
Mutual labels:  postcss, browsersync
Gulp Autoprefixer
Prefix CSS
Stars: ✭ 676 (+525.93%)
Mutual labels:  autoprefixer, postcss
tailwindcss-postcss-browsersync-boilerplate
Tailwind CSS + PostCSS + BrowserSync boilerplate
Stars: ✭ 28 (-74.07%)
Mutual labels:  postcss, browsersync
Webpack-Starter-Kit
Webpack 4 stater kit with SCSS, PostCSS, Babel & ESLint
Stars: ✭ 41 (-62.04%)
Mutual labels:  postcss, browsersync
Nth Start Project
Startkit for HTML / CSS / JS pages layout.
Stars: ✭ 578 (+435.19%)
Mutual labels:  postcss, pug
stylus-playground
Stylus environment for practice and testing.
Stars: ✭ 16 (-85.19%)
Mutual labels:  browsersync, autoprefixer
Stencil Postcss
Autoprefixer plugin for Stencil
Stars: ✭ 19 (-82.41%)
Mutual labels:  autoprefixer, postcss
Webpack Es6 Sass Setup
A basic setup for Webpack with ES6, Babel, Sass and stylelint
Stars: ✭ 63 (-41.67%)
Mutual labels:  autoprefixer, postcss
Angular-Gulp-Boilerplate
Clean but full-featured AngularJS boilerplate using Gulp workflow and best practices
Stars: ✭ 30 (-72.22%)
Mutual labels:  browsersync, autoprefixer
gulp-starter-kit
My Gulp Starter Kit
Stars: ✭ 91 (-15.74%)
Mutual labels:  browsersync, autoprefixer
genesis-sample-task-runner
Gulp workflow for Auto prefixing, Sass compiling, CSS minification, automatic browser reloading and more
Stars: ✭ 23 (-78.7%)
Mutual labels:  browsersync, autoprefixer
gulp-boilerplate
Gulp boilerplate
Stars: ✭ 24 (-77.78%)
Mutual labels:  postcss, pug
Long Haul
A minimal, type-focused Jekyll theme.
Stars: ✭ 524 (+385.19%)
Mutual labels:  autoprefixer, browsersync
Gulp Pure Start
Start your project with 'Gulp Pure Start' easily than ever!
Stars: ✭ 89 (-17.59%)
Mutual labels:  task-runner, pug
emitty
A platform for finding dependencies between files and building tools for incremental compilation or build.
Stars: ✭ 69 (-36.11%)
Mutual labels:  postcss, pug
bb8
Starter kit for automating tasks in everyday front-end development. 👨🏻‍💻 ⚡️ 🛠 ✨ 🤖
Stars: ✭ 13 (-87.96%)
Mutual labels:  postcss, browsersync
Turretcss
Turret is a styles and browser behaviour normalisation framework for rapid development of responsive and accessible websites.
Stars: ✭ 729 (+575%)
Mutual labels:  autoprefixer, postcss

Front-end automated boilerplate

How to use

  1. Install deps npm i
  2. Run npm run prepare
  3. all tasks should be started via npm. e.g. npm run gulp, npm run gulp dev. It looks a bit ugly, but this is the only way to work with 4 ver of gulp until it'll be finally released.

So, what do we have under the hood for now?

  • pug -> html
  • sass -> postcss -> css
  • browsersync
  • autoprefixer
  • es2015 compilation
  • watch 'n compile
  • generator for styles and templates

Boilerplate for UI development

Навигация

What is this?

This is a boilerplate for reducing amount of routine tasks in UI development. The boilerplate is built based on my experience and needs, so I don't guarantee it will be useful for you as is. You can use it as an example and modify it or build your own.

Intallation

  • Download and install node.js
  • Clone this repository and remove .git in order to connect your own git repository later
  • Install all dependencies npm i
  • Run npm run prepare

Что в мешке?

Автоматизированные задачи

  • Компиляция es2015
  • Компиляция Jade-шаблонов
  • PostCSS с синтаксисом sugarss
  • Добавление вендорных префиксов к свойствам
  • Минификация css и js
  • Оптимизация картинок
  • авто-обновление браузера
  • подготовка стилей rtl
  • загрузка зависимостей js через npm
  • загрузка файлов на сервер по ssh
  • Валидация html на w3c
  • архивирование файлов dist и src папок
  • слежение за изменениями файлов
  • генерация файлов стилей и шаблонов
  • stylelint

PostCSS plugins

  • sugarss
  • postcss-scss
  • postcss-import
  • precss
  • postcss-inline-svg
  • postcss-assets
  • postcss-svgo
  • postcss-hexrgba
  • postcss-sass-color-functions
  • postcss-short
  • autoprefixer

Файловая структура

  • gulpfile.js — папка в которой лежит gulpfile и таски.
  • src — исходные файлы проекта
  • dist — результат билда

Содержимое папки src

  • assets
    • styles — стили проекта
      • common
      • components
      • helpers
    • images — картинки проекта, включая content папку для картинок в контенте
    • scripts — скрипты
  • templates
    • pages — шаблоны страниц
    • components — блоки из которых будут собираться страницы.
    • partials
    • layout

Как все работает?

В gulpfile.js/index.js описаны таски, которые выполняют те или иные действия. Таски можно вызывать по отдельности и группами. Вызов группами — самый частый юзкейс. Все gulp-плагины загружаются автоматически из package.json с помощью плагина gulp-load-plugins. Это позволяет уменьшить объем gulpfile. Gulp в процессе работы берет файл из 1 папки, выполняет с ним необходимые операции и сохраняет в другой папке. Для удобства, все пути к файлам я вынес в переменные и храню их в файле config.json.

Генератор файлов

В процессе работы много времени уходит на создание файлов для компонентов и страниц. Я решил это дело автоматизировать. Теперь одной командой npm run add можно создать:

  • стиль для компонента
  • миксин
  • шаблон для компонента
  • и страницу

При создании стиля для компонента, можно создать файл для респонсив версии, и все это автоматически подключится в main.sass При создании новой страницы, она добавится в список всех страниц в файле index.pug

Задачи

Все задачи запускаются посредством npm scripts.

NPM

  • npm start — запуск gulp dev. Чтобы запустить browsersync на другом порту, можно писать PORT=8080 npm start
  • npm run production — запуск gulp production
  • npm run deploy — запуск gulp deploy
  • npm run validate — запуск gulp validate
  • npm run minify — запуск gulp minify
  • npm run add — запуск генератора файлов

Gulp

Отдельные
  • styles — компиляция sass
  • styles:min — минификация csso
  • styles:rtl — вариант стилей справа-налево
  • scripts — компиляция es2015
  • scripts:min — минификация js
  • images — перенос картинок из src в dist
  • images:min — оптимизация картинок в dist
  • templates — компиляция jade-шаблонов
  • sprites — сборка спрайтов
  • watch — слежение за изменениями файлов
  • browsersync — автообновление в браузере
  • archive — архивация dist и src папок
  • archive:dist — архивация dist
  • archive:src — архивация src
  • ssh — запуск задач ssh:clean, ssh:upload, ssh:unzip
  • ssh:clean — заходит на сервер, чистит папку проекта
  • ssh:upload — загружает на сервер архив dist папки
  • ssh:unzip — распаковывае на сервере dist архив и удаляет его
  • w3c:html — валидация html кода
Группы
  • defaultbower, images, styles, scripts, templates, sprites
  • dev — default, browsersync, watch
  • minify — images:min, styles:min, scripts:min
  • productiondefault, styles:rtl, minify
  • deployproduction, archive, ssh
  • validate — w3c:html
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].