Generating living styleguides with KSS
What is a styleguide?
Typography
Brand
Writing
Motion
Code
Components
https://k15t.github.io/k15t-website-styleguide/
How does our styleguide help?
- Develop a common design language
"that green rectangle with that button" vs "a primary card" - Single source of truth
"Was it #dede3b green or #bad954 green?" - Developers: See how to use components and how they work
- Designers: Look what existing components to use for new designs and how to extend it.
- How do they look and work in isolation?
Knyle Style Sheets
Syntax
- Language agnostic documentation language
Works with CSS/SASS/LESS/STYLUS - Can be rendered while developing
(available as Node module) - Documentation in markdown
- Document looks, html, usage & description
How do I create one?
/*
Card
A card is a box with a solid colored background and some padding
Usually containing a title, description and actions (buttons/icons)
Cards contain little and scannable content to quickly get to the desired full content.
Thus, a description should contain no more than 140 letters
Markup:
<div class="card {{modifier_class}}">
<h3>
Scroll Viewport
</h3>
<p>
Write templates with HTML, CSS, and JavaScript,
and take full control of how it's all presented to your end user audiences.
</p>
</div>
.card-primary - card with color primary
.card-secondary - card with color secondary
.card-light - card with color light
.card-dark - card with color dark
.card-aside - card with color aside
.card-small - small card
.card-medium - medium card
.card-large - large card
.card-image - Card with image as background
Styleguide Card - UI
*/
DEMO TIME
http://styleguides.io/
https://github.com/kss-node/kss-node
https://github.com/SC5/sc5-styleguide
Resources
Thank you
Presentation carefully prepared by
Martin Muzatko
@martinmuzatko
More about front-end dev by Martin?
Looking for an awesome company to work with?
Generating living styleguides with KSS
By Martin Muzatko
Generating living styleguides with KSS
- 1,151