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.

Learn more

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

Learn more

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

Learn more

Typography

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

Learn more

Heading tags

Always use the HTML tag to define default headings styles.

font-size: 50px

H1

font-size: 38px

H2

font-size: 28px

H3

font-size: 20px

H4

font-size: 17px
H5
font-size: 15px
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: 4rem

.heading-xlarge

font-size: 3rem

.heading-large

font-size: 2rem

.heading-medium

font-size: 1.25rem

.heading-small

Text size

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

font-size: 1rem

<p> 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: 1.5rem
.text-size-large
font-size: 1.25rem
.text-size-medium
font-size: .0875rem
.text-size-small
font-size: 0.4375rem
.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-medium

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 1

Heading 2

Heading 3

Heading 4

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 1

Heading 2

Heading 3

Heading 4

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)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Gray - #666666

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text Blue - #17acf8

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Text White - #FFFFFF

Spacing

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

Learn more

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: 4rem
.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.25rem

.icon-small

height: 2rem

.icon-medium

height: 2.5rem

.icon-large

height: 1.25rem; width: 1.25rem

.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