Components πŸ’Ž

Sk
Last updated 9 days ago

Here's a list of all components that you can create, design and style inside of Sketch and that will output real code. All of these are made directly inside of Sketch with zero plugins.

{container}

Example of a {container} element
{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}

Since: v0.0.5

How to add in Sketch:

  1. Create a text node (T)

  2. Group that text node (⌘+G)

  3. Rename group {container}

  4. Delete text node or name it {text}

{container-fluid}

Example of a {container-fluid} element
{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}

Since: v0.0.5

How to add in Sketch:

  1. Create a text node (T)

  2. Group that text node (⌘+G)

  3. Rename group {container-fluid}

  4. Delete text node or name it {text}

{row}

{row}

Creates a Bootstrap Row element. A {row} is a direct child to {container} or {container-fluid}. This element's height is always at least as high as the corresponding element in the Sketch document.

Supports:

  • classes [ ]

  • Backgrounds {BG}

Pro tip!

By adding the Bootstrap 4 class no-gutters you will remove gutters from child {col}.

Example:

{row} [no-gutters]

Since: v0.0.5

How to add in Sketch:

  1. Create a text node (T)

  2. Group that text node (⌘+G)

  3. Rename group {row}

  4. Delete text node or name it {text}

{col}

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

Supports:

  • classes [ ]

  • Backgrounds {BG}

Since: v0.0.5

{text}

{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.p}

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

{text.span}

Fluid fonts

Pro tip! By adding the class js-font-fluid-12 you will have fluid font-size. The last part (12) refers to the number of px the font will span between. This is also dependant of the artboart size.

First example

  • You have a mobile-size artboard (576px wide).

  • You have a {text} with font-size 18px.

  • You have a {text} with the class js-font-fluid-10

{text} [js-font-fluid-10]

The font-size will then flow between 18px at the smallest screen-size and 28px at the largest screen-size.

Second example

  • You have a desktop-size artboard (>576px wide).

  • You have a {text} with front-size 18px.

  • You have a {text} with the class js-font-fluid-12

{text} [js-font-fluid-12]

The font-size will then flow between 6px at the smallest screen-size and 18px at the largest screen-size.

Supports:

  • classes [ ]

Since: v0.0.5

Updates: v0.0.55 - Fluid font support

{image}

{image}

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

Supports:

  • classes [ ]

Since: v0.0.5

{image-fixed}

{image-fixed}

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

Supports:

  • classes [ ]

Since: v0.0.5

​

{button-primary} (Symbol)

{button-primary}

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

Supports:

  • classes [ ]

  • Backgrounds {BG}

Since: v0.0.5

{button-secondary} (Symbol)

{button-secondary}

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

Supports:

  • classes [ ]

  • Backgrounds {BG}

Since: v0.0.5

{button-submit} (Symbol)

{button-submit}

Creates a Bootstrap-style submit button. This is used for {form}.

Supports:

  • classes [ ]

  • Backgrounds {BG}

Since: v0.0.55

Form (Symbol)

Creates an HTML-form. Use the Form-symbol from the demo-document as reference.

Since: v0.0.55

{form}

Use the Form-symbol from the demo-document as reference.

contains: {button-submit}, {form-group}, {attribute.action}, {attribute.method}

{form}

Since: v0.0.55

{form-group}

Use the Form-symbol from the demo-document as reference.

contains: {text}, {input}

{form-group}

Since: v0.0.55

{input} (Symbol)

Creates an HTML text-input field.

Supports:

  • classes [ ]

  • Backgrounds {BG}

Since: v0.0.55

{rectangle}

The {rectangle} component is perfect for quick wireframing
{rectangle}

Creates a HTML-div element that is 100% of it's parent elements height and 100% width of it's parent element. This element's height is always at least as high as the corresponding element in the Sketch document.

By adding the Bootstrap class [rounded-circle] to the {rectangle} you'll get a rounded circle.

{rectangle} [rounded-circle]

This is a Sketch "Rectangle"-Shape

Pro tip! This is an awsome way to create responsive wireframes πŸŽ‰

Supports:

  • classes [ ]

Since: v0.0.55

{BG}

{BG}

Can be a rectangle or an image.

Since: v0.0.5

{navbar-light}

{navbar-light}

Creates a Bootstrap Navbar element.

contains: {nav}

Supports:

  • classes [ ]

  • Backgrounds {BG}

  • Breakpoints (xs, sm, md, lg, xl) See cheetsheet for details.

Since: v0.0.5

Updates: v0.0.55 - Now possible to style

{navbar-dark}

{navbar-dark}

Creates a Bootstrap Navbar element.

contains: {nav}

Supports:

  • classes [ ]

  • Backgrounds {BG}

  • Breakpoints (xs, sm, md, lg, xl) See cheetsheet for details.

Since: v0.0.5

Updates: v0.0.55 - Now possible to style

{nav}

{nav}

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

contains: {nav-item}, {nav-item-active}

Supports:

  • classes [ ]

  • Backgrounds {BG}

Since: v0.0.5

Updates: v0.0.55 - Now possible to style

{nav-item} (Symbol)

{nav-item}

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

Since: v0.0.5

Updates: v0.0.55 - Now possible to style

{nav-item-active} (Symbol)

{nav-item-active}

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

Since: v0.0.5

Updates: v0.0.55 - Now possible to style

{externalasset.css}

{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 :)

Since: v0.0.5

{oval}

{oval}

Using the O inside of Sketch you can create an oval element.

Supports:

  • classes [ ]

Since: v0.60

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!