Generate Styleguides for Every Project

Marc Friederich

Software designer & co-founder of ...

github.com/zufrieden

@zufrieden

Digital first / User needs / Problem solving / Handcrafted quality / Ping pong

github.com/antistatique

@antistatique

Awesome Generated web living styleguides

By default

Web styleguides definition

Web site style guides cover a publication's visual and technical aspects, along with text. Many style guides are revised periodically to accommodate changes in conventions and usage.

Problem solving

Let's go back 3 years ago ...


ul.nav-main .nav-sub .nav-sub-top, ul.nav-language .nav-sub .nav-sub-top {}
  • Duplicated code
  • Dead code
  • Communication problem
  • Hard to test

But How!?


/*
# Text components
## Titles
````

My title number 1

````
*/

h1{
color: #262626;
font-weight: 700;
}
  • Think before you code
  • Communication designers/developers
  • Envolve with your project
  • Testing platform
  • A better web!
2 year later ...

Hired to produce a web styleguide

For Switzerland public administration

Styleguide by default

Use a generated living styleguide for your next project!

Make it default, make it easy!

Generate a styleguide from a generator


$ yo styleguide


.
├── README.md
├── assets
├── bower.json
├── gulpfile.js
├── hologram_config.yml
├── node_modules
├── package.json
└── robots.txt


assets
├── README.md
├── doc_assets
│   ├── _footer.html
│   └── _header.html
├── fonts
├── js
│   └── FEC14.js
└── sass
├── FEC14-mixins.scss
├── FEC14-variables.scss
├── FEC14.scss
├── bootstrap-variables.scss
├── bootstrap.scss
├── components
├── javascript
└── layout

hologram_config.yml 


source: ./assets

destination: ./styleguide

documentation_assets: ./bower_components/Cortana

dependencies:
- ./build

css_include:
- 'css/FEC14.css'

index: README


$ gulp serve

Workflow

  1. Yeoman scaffolding
  2. Dependencies managment with npm and Bower
  3. Running tasks with Gulp serve with BrowserSync
  4. Modular styles inside the styleguide
  5. 4 again and again...

To conclude

  1. Start with a styleguide
  2. Communicate more often
  3. Develop future proof
  4. Think modular first
  5. Contribute! It's open source!

Give it a try

Thank you

Questions?

Find this presentation on slidedeck.io/antistatique or zufrieden.github.io/slides-styleguide-by-default

Sources