Styleguide

Living Styleguide Made Easy

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 |
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.

Aa

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.

Brought to you by the creative team
at Devbridge Group.