Antistatique is an agency providing web solutions

github.com/antistatique

@antistatique

You might have a communication problem

A project is a discussion

Documentation and deliverables help framing this discussion

What is a styleguide (CICD)

• Logo
• Colors
• Fonts
• Copywriting, guidelines
• Tone of voice (voiceandtone.com)
• Illustrations, icons
• Photographies

And a web styleguide ?

• Design pattern
• RWD behaviors
• Browser behaviors
• ...

Welcome to the world of dynamic styleguides

Generated from the code

Like JavaDoc, PHPDoc, ...

              
/*
# Button
````
<a class="btn">Action</a>
````
*/

.btn{
  color: green;
}

          

Benefits

• Force you to think by reusable modules
• Better communication between designers and developers
• Living documentation
• RWD testing platform
• A better web !

Case study

Derham – First version

Without web styleguides

• 6 developers
• New to LESS
• More than 9000 lines of CSS
• Dead code

              
ul.nav-main .nav-sub .nav-sub-top, ul.nav-language .nav-sub .nav-sub-top {}
              
          

Second version

With a web styleguides

• OOCSS and LESS experts
• Dynamic style guide first
• Living documentation
• Designer review
• Less work for frontend developers

YSS

Web styleguides generator

Existing tools

KSS (http://warpspire.com/kss/)

StyleDocco (http://jacobrask.github.io/styledocco/)

Pears (http://pea.rs)

Kalei Styleguide (http://warpspire.com/kss/)

No perfect tool

-> So I had to create one

• Markdown syntax
• RWD ready
• Dynamic navigation
• Good looking

              
/*
# Text components
## Titles
````
<h1>My title number 1</h1>
<h2>My title number 2</h2>
<h3>My title number 3</h3>
<h4>My title number 4</h4>
<h5>My title number 5</h5>
<h6>My title number 6</h6>
````
*/

h1, h2, h3, h4, h5, h6 {
  color: #262626;
  font-weight: 700;
}
          

DEMO