WordCamp Style Guide
Read the article about the style guide on WordCamp Europe blog. See the current version of the generated style guide.
This blank style guide originated from the WordCamp Europe 2017 design team. Read the article about the style guide on the blog.
The main elements are based on the wordcamp-base-redux-2
Getting Started
Install node.js.
npm install gulp
npm install
You are done.
gulp
Use gulp for on–the–fly updates of your code (templates, js, css) and style guide.
gulp build
This will create a build directory for project assets and a styleguide directory from your KSS documentation in CSS without browser-sync live preview.
Directory Structure
Feel free to modify everything in the source directory and keep in mind that styleguide and build directories are rebuilt with each gulp build command.
gulpfile.js
package.json
readme.md
source/
├── assets/ [images, stylesheets]
├── 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]
Interesting Bits
- Uses Bourbon, a lightweight Sass Tool Set
- Uses Modular scale for typography
- Uses Susy for grids
- CSS architecture based on ITCSS (Inverted Triangle CSS) by Harry Roberts Article
Additional Resources
More information about style guides.
Articles and tools to start documenting interfaces and build style guides: