Style Guide

Colors

Colors: Brand

$brand-1
$brand-1-light
$brand-1-x-light
$brand-2
$brand-2-light

Colors: Warm

$orange

Colors: Cool

$blue-aqua

Colors: Black, White

$black
$white

Colors: Gray Spectrum

$gray-coal
$gray-lead
$gray-cement
$gray-titanium
$gray-cloud
$gray-mist

Colors: Typography

$color-font

Colors: States

$color-error
$color-success
$color-info
$color-disabled

Spacing

Spacing: All Sides

Uses padding on all four sides to create spacing.

Spacing
Spacing-2
Spacing-3
Spacing-half

Spacing: Horizontal

Uses left and right padding to create spacing.

Spacing
Spacing-2
Spacing-3
Spacing-half

Spacing: Vertical

Uses top and bottom padding to create spacing.

Spacing
Spacing-2
Spacing-3
Spacing-half

Spacing: Left

Uses left padding to create spacing.

Spacing
Spacing-2
Spacing-3
Spacing-half

Spacing: Right

Uses right padding to create spacing.

Spacing
Spacing-2
Spacing-3
Spacing-half

Spacing: Top

Uses top padding to create spacing.

Spacing
Spacing-2
Spacing-3
Spacing-half

Spacing: Bottom

Uses bottom padding to create spacing.

Spacing
Spacing-2
Spacing-3
Spacing-half

Spacing: Reset padding on all sides

Column: Reset Padding

Spacing: Reset margins on all sides

H2 Heading: Margins reset

Alignment

Auto Margins: Horizontal Centering

Auto margins are used for centering elements horizontally.

Horizontally Centered

Alignment: Inline Block: Alignment

Use classes to position elements with an inline-block level display.

Vertical Align: Top
Vertical Align: Middle
Vertical Align: Bottom

Alignment: Flexbox

Use flexbox mixins or classes to center elements and push them to the right or left edge of their parents.

Flexbox: Horizontal Centering
Flexbox: Horizontal Centering

Flexbox: Vertical Centering

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora cumque adipisci atque ab quam, non, maiores nostrum. Necessitatibus, sit quae magnam nesciunt totam culpa reiciendis amet molestiae libero natus iusto.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita soluta dolores nostrum, autem illum, aut a debitis tempore sunt enim quasi quos explicabo quae quaerat itaque cumque sit repellendus eaque.

Flexbox: Vertical Centering
Child of flex container
Flexbox: Push element to the right
Flexbox: Push element to the left
Child of flex container

Positioning: Vertical & Absolute Centering

Vertically Centered
Absolutely Centered

Media Queries

Min-width media query variables: $media-sm, $media-mid, $media-lg.

Max-width media query variables: $media-sm-max, $media-mid-max, $media-lg-max.

Grid

A 12 column grid is provided with classes for each media query breakpoint. E.g. col-12, col-6-sm, col-4-mid and col-3-lg.

Containers

Container sizes are obtained from the media query variables.

Container: Large: Most Common Size
Container: Mid
Container: Small
Container: Full Width

Rows & Columns

Rows have negative margins to offset the left and right padding of the first and last columns respectively.

Default Gutters

Column 1
Column 2

Small Gutters

Column 1
Column 2

Large Gutters

Column 1
Column 2

Column 2 automatically fills up remaining width

Column 1
Column 2

Column 2 is pushed to the right

Column 1
Column 2

Horizontally centered

Column 1
Column 2

Vertically centered

Column 1

Column 2: Flexbox: Vertical Centering
Notice how the two containers are vertically centered with flexbox. Flexbox makes horizontal and vertical centering easy as pie! It's the coolest thing since floats. And it allows elements to squeeze and stretch to fill up space as needed.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora cumque adipisci atque ab quam, non, maiores nostrum. Necessitatibus, sit quae magnam nesciunt totam culpa reiciendis amet molestiae libero natus iusto.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita soluta dolores nostrum, autem illum, aut a debitis tempore sunt enim quasi quos explicabo quae quaerat itaque cumque sit repellendus eaque.

Halves

Column 1
Column 2

Thirds

Column 1
Column 2
Column 3

Different sizes on different breakpoints

Column 1
Column 2
Column 3
Column 4

Accessibility

  • show-on-screen-readers is used to display content only for screen readers but hide it visually.
  • aria-hidden attribute is used to hide content from screen readers but display it visually.
  • aria-label attribute is used to give information to screen readers when labels can't be used.
  • A descriptive value for the alt attribute of images and text are added.
  • For SVGs referred to in image tags, add the attribute and value role="img" to help screen readers interpret the element as an image.
  • Users should be able to navigate the site via the keyboard.
  • Ensure that every input has an ID that matches the for attribute of its label.

Screen Readers: Informative images

Informative images should have meaningful alt text which can be used by screen readers.

Logo: Natole

Screen Readers: Decorative images

Images with empty alt text are ignored by screen readers.

Screen Readers: Informative font icons

This example uses the aria-hidden attribute and show-on-screen-readers class to make an "X" icon button accessible.

Screen Readers: Decorative font icons

This example hides font icons, which are purely decorative, from screen readers using the aria-hidden attribute.

The icon on the left is purely decorative.

Typography

Typography consists of helper classes for text styling and basic styling for HTML elements like headings, lists and paragraphs.

Font Families

Use a variable or class for font families.

Nunito Sans is the default font for the project and is available via Google Fonts.

$font-family-1

Font Sizes

Use variables or classes for font sizes.

The base font size is in pixels and the rest use the px-to-percent function to output pixel values as percentages.

$font-size
$font-size-sm
$font-size-xs
$font-size-lg

Font Weights

Use variables and classes for font weights.

$font-regular
$font-semi-bold
$font-bold

Text Styles

Text: Left Align
Text: Right Align
Text: Center Align
Text: Uppercase
Text: Underline

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Paragraph: Here's what a paragraph of text looks like.

Paragraph: Here's what a second paragraph of text looks like.

Links

Class to make something resemble a link

Lists

  • Unordered List: Item 1
  • Unordered List: Item 2
  • Unordered List: Item 3
  1. Ordered List: Item 1
  2. Ordered List: Item 2
  3. Ordered List: Item 3
  • List: Reset Styles: Item 1
  • List: Reset Styles: Item 2
  • List: Reset Styles: Item 3

Images

Responsive

By default, images resize according to the size of the screen and don't exceed the width of the parent's container.

Responsive Image: Example

Full Width

Class of full-width is added to stretch an image to the full width of its parent container.

Responsive Image: Full Width: Example

Icons

Natole's font icon set was created with the Icomoon app. It also includes font icon families like Feather, Font Awesome, Icomoon and Typicons.

Each icon has a class with a prefix of at-icon-.

Click here to see the list of all icons.

Types

Types: Logo

Types: Arrows and Chevrons

Types: Natole: Projects

Types: App

Icons: Sizes

There are 4 common icon sizes, including the default size.

Icons: Spacing

Left and right spacing for icons.

Icon: Left: Spacing: Default
Icon: Left: Spacing: Large
Icon: Right: Spacing: Default
Icon: Right: Spacing: Large

Buttons

Buttons have different sizes: (default, small, extra small and full-width).

Buttons can be different styles and states.

Brand 1 Buttons

Button: Small
Button: Extra Small
Button: Full Width

Brand 2 Buttons

Button: Small
Button: Extra Small
Button: Full Width

White Buttons

Button: White: Small
Button: White: Extra Small
Button: White: Full Width

Hollow Buttons: Brand 1

Button: Small
Button: Extra Small
Button: Full Width

Hollow Buttons: White

Button: Small
Button: Extra Small
Button: Full Width

Reset Styles

Forms

Labels

Inputs

Default

Sizes

Label

States: Errors

States: Disabled

States: Required

File Input: Custom

The file input uses the FileReader API to display an image thumbnail of the uploaded file.

Textareas

Selects

Forms: Inverse Styles

Content Blocks

The content block component is widely used across the site.

Progress Bars

Avatars

Avatar: State: Empty

Ed Green
24 years old
Vancouver, BC

Avatar: Image Uploaded

Ed Green
Ed Green
24 years old
Vancouver, BC

Banners

Banners are full-width sections with background images, overlays and text.

Heading

Heading, Subheading

Lists: Styled

Lists: Icons

  • List: Item 1
  • List: Item 2
  • List: Item 3
  • List: Item 4

Lists: Block

  • Company name
    Company name
    Location
    Date

Cards

Card with Banner Image and Progress Bar

dashboard
Menu:
1 Price in dollars:
Please login to enter a site
7%
Target: 155000

Loading

An icon font with a CSS animation is used to show loading behavior.

Tabs

Content: Projects
Content: Payment
Content: Profile

Slider

Leaf with blurry background
Collection of seedlings
Fern grove
Afforestation
Tree planting