Style System

Classes

  • Empower a non-technical person to manage your website.
  • Empower a non-technical person to manage your website.
  • Give the reader as much context into the purpose of that class.
  • Read a class name and know what its purpose is.
  • No abbreviations, no shorthand, no confusion.

Global class systems

There are three primary global class systems that come with Client-first. We have identified these as our most important global-use classes when building in Webflow.

Structure

We defined a flexible core structure you can use on most pages.

Class explanations

.main

No styles required. Styles are optional.

Primary purpose is accessibility. The main content of the page. Use a <main> tag that wraps all or most of your website content sections. The nav and footer should not be inside this <main> tag.

.section

No styles required. Styles are optional.

Function is to identify the separate sections of a page. Use a <section> tag to properly identify the sections.

.container-[size]

margin-left: auto
margin-right: auto
width: 100%
max-width: [small/medium/large]

There are three defined container sizes - small, medium, and large.

Typography

We have a global system for headings, typography sizing, coloring, and customizations.

Heading tags

Always use the HTML tag to define default headings styles.

font-size: 3.052rem

H1

font-size: 2.441rem

H2

font-size: 1.953rem

H3

font-size: 1.563rem

H4

font-size: 1.25rem
H5
font-size: 1rem
H6

Heading text

Use class prefix heading- on H1, H2, H3, or any other piece of text to change the text to a specific H heading size. Notice how H1 = heading-xlarge, H2 = heading-large, etc.

font-size: 3.052rem

heading-xlarge

font-size: 2.441rem

heading-large

font-size: 1.953rem

heading-medium

font-size: 1.563rem

heading-small

Text size

Use class prefix text- on a piece of text to change the size of the text.

font-size: 1rem

paragraph tag - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sodales dictum nulla, non venenatis nunc. Mauris laoreet neque sed tempus fringilla. Aenean et tincidunt justo.

font-size: 1rem
text-size-large
font-size: 0.8rem
text-size-medium
font-size: .0875rem
text-size-small

Text style

Style font-style css to change the text styling.

text-decoration: underline
font-style: italic
text-style-italic
text-transform: uppercase
text-style-allcaps
opacity: 0.5
text-style-muted
Apply "..." after 2 lines of text
-webkit-line-clamp: 2;
text-style-2lines
Apply "..." after 3 lines of text
-webkit-line-clamp: 3;
text-style-3lines
Apply "..." after 4 lines of text
-webkit-line-clamp: 4;
text-style-4lines

Text weight

Style font-weight css to make text more or less bold.

font-weight: 700
.text-weight-xbold
font-weight: 600
.text-weight-bold
font-weight: 500
.text-weight-medium
font-weight: 400
text-weight-normal

Text alignment

Style text-align css to make text, or other elements, align left, center, or right.

text-align: left
text-align-left
text-align: center
text-align-center
text-align: right
text-align-right

Text color

Text colors should be globally managed when possible. These global colors should be changed based on the colors in your project.

text-color: #ffffff
text-color-white
text-color: #000000
text-color-black
text-color: #4fadff
text-color-blue
text-color: #666666
text-color-grey

Rich Text

Webflow native rich text element. Our default name is c-rich-text.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

  • Stuff
  • Stuff

Events Rich Text

Webflow native rich text element. Our default name is c-event-content__description.

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Paragraphs and caption

Neue Haas Grotesk is the standard typeface for Fellowship Church on the web for large texts, headings and 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 posuere.

Paragraph XXL - 32PX / 1.25

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

Paragraph XL - 24PX / 1.5

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

Paragraph LG - 19PX/1.6

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

Paragraph - 17PX/1.7

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

Paragraph SM - 15PX/1.6

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Black - #000000

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Faded - RGBA(0,0,0,0.5)
Text Gray - #666666

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Blue - #17acf8

Spacing

Spacing system that keeps vertical and horizontal spacing global on your website.

Margin direction

Global use of the direction of your margin. For example, margin-top.

Margin direction

Global use of the direction of your margin. For example, margin-top.

.margin-[direction]
margin-top
margin-bottom
margin-left
margin-right
margin-horizontal
margin-vertical

Margin size

Global use of the size of your margin. For example, large (48px).

font-size: 1rem
margin-0
Desktop
0px | 0rem
Tablet
0px | 0rem
Mobile Landscape
0px | 0rem
Mobile Portrait
0px | 0rem
margin-tiny
Desktop
2px | 0.125rem
Tablet
2px | 0.125rem
Mobile Landscape
2px | 0.125rem
Mobile Portrait
2px | 0.125rem
margin-xxsmall
Desktop
4px | 0.25rem
Tablet
4px | 0.25rem
Mobile Landscape
4px | 0.25rem
Mobile Portrait
4px | 0.25rem
margin-xsmall
Desktop
8px | 0.5rem
Tablet
8px | 0.5rem
Mobile Landscape
8px | 0.5rem
Mobile Portrait
8px | 0.5rem
margin-small
Desktop
16px | 1rem
Tablet
16px | 1rem
Mobile Landscape
16px | 1rem
Mobile Portrait
16px | 1rem
margin-medium
Desktop
32px | 2rem
Tablet
24px | 1.5rem
Mobile Landscape
20px | 1.25rem
Mobile Portrait
20px | 1.25rem
margin-large
Desktop
48px | 3rem
Tablet
40px | 2.5rem
Mobile Landscape
24px | 1.5rem
Mobile Portrait
24px | 1.5rem
margin-xlarge
Desktop
64px | 4rem
Tablet
48px | 3rem
Mobile Landscape
32px | 2rem
Mobile Portrait
32px | 2rem
margin-xxlarge
Desktop
80px | 5rem
Tablet
64px | 4rem
Mobile Landscape
48px | 3rem
Mobile Portrait
48px | 3rem

Margin direction

Global use of the direction of your margin. For example, margin-top.

Padding direction

Global use of the direction of your padding. For example, padding-top.

.margin-[direction]
padding-top
padding-bottom
padding-left
padding-right
padding-horizontal
padding-vertical

Padding size

Global use of the size of your padding. For example, large (48px).

.padding-[size]
padding-0
Desktop
0px | 0rem
Tablet
0px | 0rem
Mobile Landscape
0px | 0rem
Mobile Portrait
0px | 0rem
padding-tiny
Desktop
2px | 0.125rem
Tablet
2px | 0.125rem
Mobile Landscape
2px | 0.125rem
Mobile Portrait
2px | 0.125rem
padding-xxsmall
Desktop
4px | 0.25rem
Tablet
4px | 0.25rem
Mobile Landscape
4px | 0.25rem
Mobile Portrait
4px | 0.25rem
padding-xsmall
Desktop
8px | 0.5rem
Tablet
8px | 0.5rem
Mobile Landscape
8px | 0.5rem
Mobile Portrait
8px | 0.5rem
padding-small
Desktop
16px | 1rem
Tablet
16px | 1rem
Mobile Landscape
16px | 1rem
Mobile Portrait
16px | 1rem
padding-medium
Desktop
32px | 2rem
Tablet
24px | 1.5rem
Mobile Landscape
20px | 1.25rem
Mobile Portrait
20px | 1.25rem
padding-large
Desktop
48px | 3rem
Tablet
40px | 2.5rem
Mobile Landscape
24px | 1.5rem
Mobile Portrait
24px | 1.5rem
padding-xlarge
Desktop
64px | 4rem
Tablet
48px | 3rem
Mobile Landscape
32px | 2rem
Mobile Portrait
32px | 2rem
padding-xxlarge
Desktop
80px | 5rem
Tablet
64px | 4rem
Mobile Landscape
48px | 3rem
Mobile Portrait
48px | 3rem

Useful globals

Globals we like to use in most of our projects to build faster.

Built for developers, yet accessible to non-technical people. Some of this section requires Webflow and CSS knowledge.

Responsive visibility

Show and hide elements by screensize

display: none;
.hide - hide on all devices
hide-tablet - hide from tablet resolution
hide-mobile-landscape - hide from mobile landscape resolution
hide-mobile-portrait - hide from mobile portrait resolution
display: block;
show - show on all devices
.show-tablet - show from tablet resolution
.show-mobile-landscape - show from mobile landscape resolution
.show-mobile-portrait - show from mobile portrait resolution

Max width full

Sets max-width to 'none'.

max-width: none; width: 100%
max-width-full -sets max-width to none
max-width-full-tablet - sets max-width to none on tablet
max-width-full-mobile-landscape - sets max-width to none on landscape
max-width-full-mobile-portrait - sets max-width to none on portrait

Icons classes

Sets a height or height and width on your icon. Great for social icons, company logos, footer assets, etc. Avoid using on elements that likely need unique customizations on tablet or mobile.

height: 1.5rem

icon-small

height: 2rem

icon-medium

height: 2.5rem

icon-large

height: 1.5rem; width: 1.5rem

icon-1x1-small

height: 2rem; width: 2rem

icon-1x1-medium

height: 2.5rem; width: 2.5rem

icon-1x1-large

Useful SVG icons

Find more icons here https://feathericons.com and add property fill='currentColor' inside of <svg> tag to control color of the icon through font color style.

svg embed with fill ="colorCurrent"

Useful classes as you're building

More advanced. Not required to use.

z-index-1 - bring an element closer on the z-index, sets z-index to 1
z-index-2 - bring an element closer on the z-index, sets z-index to 2
align-center - sets margin left and right to auto, centers an element inside its parent div
div-square - creates and maintains a 1:1 dimension of a div. CSS magic
overflow-hidden - sets overflow to hidden
overflow-scroll - sets overflow to scroll
overflow-auto - sets overflow to auto

Colors

Use colors globally. Use global swatches.

We use classes to change the color and background-color CSS properties. These should be updated in your project based on the colors of your website. Text coloris shown in the Typography section.

background-color: #xxxxxx

background-color-grey

background-color: #ffffff

background-color-white

background-color: #000000

background-color-black

This is some text inside of a div block.
This is some text inside of a div block.