Style guide

Powered by Mast CSS framework, this style guide is your roadmap to creating a functional website. Dive into the  design system and branding principles to craft a solid website.

ColorTypographyComponentsUtilitiesGrid 
MAST DOCS
HomeStyle GuideLicensesChangelog
Powered by webflowTemplate By emicorneau

Color:

Color backgrounds utilities

Customize colors using variables. To change a container's background color,  apply the class U BG 'Yourcolor'.

U BG Orange

Orange

#E65300
U BG Text Orange

Orange Text

#E65300
U BG Beige

Beige

#F6F4E7
U BG Black

Black

#141413
U BG Dark Grey

Dark Grey

#141413 (66% opacity)
U BG Light Grey

Light Grey

#141413 (33% opacity)
U BG Background Grey

BG Grey

#141413 (3% opacity)
U BG Beige

Transparent

#141413 (0% opacity)

Text color utilities

To change a text color, simply apply the class U Text 'Yourcolor'.

U Text Black

Black

#141413
Aa
U Text Dark Grey

Dark Grey

Black (66% Opacity)
Aa
U Text Orange

Orange

#E65300
Aa
U Text Beige

Beige

#F6F4E7
Aa 
U Text White

White

#FFFEF9
Aa 

Typography:

U Font Anton

Anton

This is some text inside of a div block.
Headings
Google Fonts
Weights: Regular

Anton

U Font Switzer

Switzer

This is some text inside of a div block.
Paragraph & links
Fontshare
Weights: Variable font

Switzer

HTML headings tags

HTML tags define default Heading styles.

H1 Headings

All H1

H2 Headings

All H2

H3 Headings

All H3

H4 Headings

All H4

Heading classes

Heading classes when typography style doesn't match the default HTML tag.

H1

H1

H2

H2

H2

H3

H2

H4

Text HTML tags

HTML tags define default text styles.

All Paragraphs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique .

All Unordered Lists
  • Example Unordered  List: Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  • Example Unordered  List: Lorem ipsum dolor sit amet, consectetur.
  • Example Unordered  List: Lorem ipsum dolor sit amet, consectetur adipiscing .
All Ordered Lists
  1. Example Ordered  List Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  2. Example Ordered  List Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
  3. Example Ordered  List Lorem ipsum dolor sit amet, consectetur adipiscing elit.  

Text styles

Text sizes classes when typography size doesn't match the default HTML tag.

Paragraph 2em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Paragraph 1.5em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Paragraph 1em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

All Caps Paragraph 2em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare.

All Caps Paragraph 1.5em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla.

All Caps Paragraph 1em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.

Rich Text

Default Rich Text class

Rich Text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Italic text

Components:

Text Links & Button Styles

Button
Button
Button
CC Secondary
Button
Button
CC Icon
Button
All Links
All linked text
Text Link
Button
Text Link
CC Icon
Button
black arrow

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Utilities:

Class modifiers

Margin

Top
U Margin Top 0
margin-top: 0;
U Margin Top 1em
margin-top: 1em;
U Margin Top 2em
margin-top: 2em;
U Margin Top 3em
margin-top: 3em;
U Margin Top Auto
margin-top: auto;
Bottom
U Margin Bottom 0
margin-bottom: 0;
U Margin Bottom 1em
margin-bottom: 1em;
U Margin Bottom 2em
margin-bottom: 2em;
U Margin Bottom 3em
margin-bottom: 3em;
Other
U Margin 0
margin: 0;
U Margin LR Auto
margin: 0 auto; (centers element))
U Margin Right 1em
margin-right: 1em;
U Margin Left 1em
margin-left: 1em;

Padding

Top
U Padding Top 0
padding-top: 0;
U Padding Top 1em
padding-top: 1em;
U Padding Top 2em
padding-top: 2em;
U Padding Top 3em
padding-top: 3em;
Bottom
U Padding Bottom 0
padding-bottom: 0;
U Padding Bottom 1em
padding-bottom: 1em;
U Padding Bottom 2em
padding-bottom: 2em;
U Padding Bottom 3em
padding-bottom: 3em;
Other
u-p-0
padding: 0;
u-p-1
padding: 1em;

Alignment

U Text Center
text-align: center;
U Text Right
text-align: right;

Overflow

U Overflow Hidden
overflow: hidden;
U Overflow Visible
overflow: visible;

Display + position

U Display None
display: none;
U Display Block
display: block;
U Display Flex
display: flex;
U Position Relative
position: relative;

Size

U Width 100
width: 100%;
U Height 100
height: 100%;

Helpers

U Image Cover
Multiple properties
U Link Cover
Multiple properties
Open link
U Aspect 1x1
Multiple properties
U Z-Index 1
Multiple properties
U Screen Reader
Multiple properties
Screen Reader Only

Grid:

12 column Grid System

Section

Section

Container

Container

Grid

Column
Column
Column
Column
Column
Column
Column
Column
Column
Column

Grid - Desktop

Column
Col Large 1
Column
Col Large 11
Column
Col Large 2
Column
Col Large 10
Column
Col Large 3
Column
Col Large 9
Column
Col Large 4
Column
Col Large 8
Column
Col Large 5
Column
Col Large 7
Column
Col Large 6
Column
Col Large 6
Column
Col Large 12

Grid - Tablet

Column
Col Med 1
Column
Col Med 11
Column
Col Med 2
Column
Col Med 10
Column
Col Med 3
Column
Col Med 9
Column
Col Med 4
Column
Col Med 8
Column
Col Med 5
Column
Col Med 7
Column
Col Med 6
Column
Col Med 6
Column
Col Md 12

Grid - Mobile Landscape

Column
Col Small 1
Column
Col Small 11
Column
Col Small 2
Column
Col Small 10
Column
Col Small 3
Column
Col Small 9
Column
Col Small 4
Column
Col Small 8
Column
Col Small 5
Column
Col Small 7
Column
Col Small 6
Column
Col Small 6
Column
Col Small 12

Grid - Mobile Portrait

Column
Col XSmall 1
Column
Col XSmall 11
Column
Col XSmall 2
Column
Col XSmall 10
Column
Col XSmall 3
Column
Col XSmall 9
Column
Col XSmall 4
Column
Col XSmall 8
Column
Col XSmall 5
Column
Col XSmall 7
Column
Col XSmall 6
Column
Col XSmall 6
Column
Col XSmall 12

Align columns

Column
Column
Column
Column
Column
Column

Justify columns

Column
Column
Column
Column
Column
Column
Column
Column

Reorder columns

Column
Col Large First
Column
Col Med First
Column
Col Small First
Column
Col XSmall First
Column
Col Large Last
Column
Col Med Last
Column
Col Small Last
Column
Col XSmall Last

Other columns modifiers

Shrink Column
Column
Col Shrink
Column
Gutterless Column          
Within   
Row
Row No Gutters
Column
Col No Gutters
Column
Col No Gutters
Column
Col No Gutters
Powered by webflowTemplate By emicorneau
Buy $49 USD