styleguide.md

Styleguide

This styleguide generated by KSS・Knyle Style Sheets.

Index

0. Overview (this page)
1. {styleguide group name} (e.g. Buttons)
2. {styleguide group name} (e.g. Lists)
...
9. Custom mixins (include built-in custom mixins)

Sass file structure

Inspired by Sass file structure best practices. (How to structure a Sass project)

scss
├── modules/ ---------- Common modules (custom mixins)
│     ├── _animation.scss
│     ├── _image.scss
│     ├── _sprite.scss
│     └ ...
│
├── partials/ --------- Partials
│     ├── ...
│     └── _base.scss -- imports all mixins + global project variables
│
├── vendor/ ----------- CSS or Sass from other projects

│
├── main.scss ---------- Primary sass file
├── ...

KSS syntax

KSS documentation format. (KSS syntax)

Common

Minimal comments.

// <title>
//
// <description>

Minimal styleguide comments.

// <title>
//
// <description>
//
// Styleguide X.X.X.

// <title>
//
// <description>
//
// Markup: 
// <markup sample>
//
// Styleguide X.X.X.

Deprecated styles.

// <title>
//
// <description>
//
// Deprecated: <deprecated reason>
// July 18, 2014.（deprecated date）

UI styles (e.g. Buttons, Lists)

// <title>
//
// <description>
//
// Markup:
// <markup sample>
//
// <modifier or pseudo class> - <description>
// <modifier or pseudo class> - <description>
// 
// Styleguide X.X.X.

Mixin or Function

// <title>
//
// <description>
//
// **Usage:**
//
// <usage>
//
// **Parameters:**
//
// * `<name>` - <description>
// * `<name>` - <description>
//
//
// **Return:**
//
// <return>（function only）
//
// Markup: 
// <markup sample>
// 
// Compatible in XXX, XXX, XXX. （support browsers）
//
// Styleguide X.X.X.