🗄{container}

Creates a Bootstrap Container element. This is the outermost element in a Bootstrap grid. Note: You can also have {container} elements inside of {col} elements (known as nesting).

Supports:

• classes [ ]

• Backgrounds {BG}

🌊{container-fluid}

Creates a Bootstrap Container-fluid element. This element (as opposed to {container}) always covers 100% of the available width (screensize or, if nested, the width of the parent {col} element)

Supports:

• classes [ ]
• Backgrounds {BG}

🚣‍{row}

Creates a Bootstrap Row element. A {row} is a direct child to {container} or {container-fluid}.

Supports:

• classes [ ]
• Backgrounds {BG}

🗂{col}

Creates a Bootstrap Col element. A {col} is a direct child to {row}. {col} can contain {container} or {container-fluid} elements (Known as nesting). It is within this element you place all your content. Available content types are:

{text} - Text

{image} - Image with a responsive size

{image-fixed} - Image with a fixed size

{button-primary} (Symbol) - Bootstrap primary button. Use symbol from Sketch demo doc!

{button-secondary} (Symbol) - Bootstrap secondary button. Use symbol from Sketch demo doc!

{navbar-light} - Bootstrap Navbar element with the light theme

{navbar-dark} - Bootstrap Navbar element with the dark theme

Supports:

• classes [ ]
• Backgrounds {BG}
• Breakpoints (xs, sm, md, lg, xl) See cheetsheet for details.

{text}

The text-layers created in Sketch needs to be named {text} in order for the previewer app to find them and parse them properly. By default {text} generates an HTML paragraph tag

. You can set which kind of HTML element should be created by specifying e.g. {text.span}. Available types are:

{text.p} (same as default {text}) - This creates an HTML paragraph tag

{text.span} - This creates an HTML span tag

Supports:

• classes [ ]

{image}

Creates an image with a responsive size. It scales according to available width.

Supports:

• classes [ ]

{image-fixed}

Creates an image with fixed width and height (taken from Sketch).

Supports:

• classes [ ]

{button-primary} (Symbol)

Creates a Bootstrap primary button element. You need to use the symbol Primary-button from the Sketch demo-document!

{button-secondary} (Symbol)

Creates a Bootstrap secondary button element. You need to use the symbol Secondary-button from the Sketch demo-document!

{BG}

Can be a rectangle or an image.

Please note that for now the navbar does not support Sketch-styling properly (fonts, colors etc)

{navbar-light}

Creates a Bootstrap Navbar element with the light theme.

Supports:

• Backgrounds {BG}

{navbar-dark}

Creates a Bootstrap Navbar element with the dark theme. Contains {navbar-collapse} element.

Supports:

• Backgrounds {BG}

{navbar-collapse}

Creates a Bootstrap Navbar-collapse element. Contains {nav} element.

{navbar-toggler}

Creates a Bootstrap Navbar toggler (the mobile menu button).

{nav}

Creates a Bootstrap Nav element. Contains one or more {nav-item} and {nav-item-active} elements.

{navitem} (Symbol)

Creates a navigation-link (HTML [a] tag). You need to use the symbol nav-item from the Sketch demo-document!

{navitem-active} (Symbol)

Creates an active-style navigation-link (HTML [a] tag). You need to use the symbol nav-item-active from the Sketch demo-document!

{externalasset.css}

Links to external assets such as fonts or your own custom style-sheets.

When in doubt, use the demo document as a reference :)

Experimental 👨‍🔬👩‍🔬

We have a few more components that are in the experimental stage like cards and stuff! Check out the demo document! We'll keep you updated!