Simple project starter that generates a style guide using KSS methodology. Setup with Gulp. Place to learn, experiment and improve project delivery for clients.
npm install gulp npm install
You are done.
gulp for on–the–fly updates of your code (templates, js, css) and style guide.
This will create a
build directory for project assets and templates and a
styleguide directory from your KSS documentation in CSS without browser-sync live preview.
Feel free to modify everything in the
source directory and keep in mind that
build directories are rebuilt with each
gulp build command.
gulpfile.js package.json readme.md source/ ├── assets/ [images, fonts, scripts, stylesheets] ├── patterns/ [patterns that are included in templates] ├── templates/ [page templates and flows] ├── styleguide-template/ [modified KSS template for generating style guides] ├── kss-config.json [style guide configuration] └── styleguide.md [description of the project and the style guide] build/ [generated via gulp] styleguide/ [generated via gulp]
- Uses Bourbon, a lightweight Sass Tool Set
- Uses Susy for grids
- CSS architecture based on ITCSS (Inverted Triangle CSS) by Harry Roberts Article
More information about style guides.
Articles and tools to start documenting interfaces and build style guides: