Living Styleguide by Devbridge

Devbridge Styleguide helps you create, share, and automate a living visual style library of your brand. Share your digital brand standards, improve team collaboration, and implement an independent easily-extendable modular structure.

npm install devbridge-styleguide --save-dev |

View Sample Styleguide Read Installation Instruction

01.

Transform Scss, Stylus and Less variables into elegant styles

Color swatches and typography charts generated automatically
from your variables files. Just group them with comments
and run the scrape.

a b c d e f g h i j k l m n o p q r s t u v w x y z
A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
1 2 3 4 5 6 7 8 9 0

    $color-yellow: #ffa960;
    $color-yellow-110: #de883f;
    color-sky-d10: #538292;
    $color-sky: #70b1c7;

    //-- typo:start --//
    $font-playfair: 'Playfair', serif;
    $font-chaparral: 'Chaparral W01', sans-serif;
    //-- typo:end --//

    $src-icon-down: 'images/icon-down.svg';
    $weight-black: 900;
    $weight-heavy: 800;
    $weight-bold: 700;

#F8533B

#FDA400

#205B67

#00A5BC

#95BF15

    ($gutter / 2);
    $footer-height: 200px;

    //-- color:start --//
    $color-red: #f8533b;
    $color-yellow: #fda400;
    $color-blue: #205b67;
    $color-blue-120: #00a5bc;
    $color-green: #95bf15;
    //-- color:end --//

    $body-font:font-chaparral;
    $heading-font: $font-avenir;
    $src-icon-down: 'images/icon-down.svg';

02.

Live edit styles in the browser

Manage snippets, organize categories, and preview
styles all directly in the browser:

Manage snippets

Create, delete, edit or move snippets.

Document snippets

Write detailed information about your snippet.

Resize Snippets

Preview how snippets interact on different screen sizes.

Organize categories

Manage and assign categories to snippets.