Classes
Scale your website without developers and empower your marketing team to market your brand. CSS class naming that a grandma can understand. No abbreviations, no shorthand, no confusion. Read a class name and know what it does.
Structure
We defined the core basics so you can build the complex with less effort.
Core structures and max width
Use the this structure to create most pages:
.page-wrapper
.section
.container
.page-padding
...(e.g. components, elements, etc.)
.container
.max-1152
.max-1024
.max-720
.max-512
.max-256
.max-128
By default, Client-first uses 4px spacing. This can be changed if required by your build. If the spacing system isn't well defined by the designer, default to the 4px system.
Tip: Use combo class .align-center to center align a div.
Global padding
Outer parent class to create global horizontal spacing site-wide
.page-padding
Grids
Build any layout with grids. Use it when you need columns and rows.
IMPORTANT: Grids are in here as an example. If this example doesn't fit well in your build, don't use it. You can completely remove this grid section. You can switch entirely to flex. You can keep css grid and change the naming and organization based on the design.
See this Grid section as more of a guide to building your own system based on your website requirements. If your build doesn't fit into a global grid system, consider using custom classes for grids, flex, and layouts (ie. .team_list with css grid styles to create the grid layout).
By default, Client-first uses 4px spacing. This can be changed if required by your build. If the spacing system isn't well defined by the designer, default to the 4px system.
IMPORTANT: Grids are in here as an example. If this example doesn't fit well in your build, don't use it. You can completely remove this grid section. You can switch entirely to flex. You can keep css grid and change the naming and organization based on the design.
See this Grid section as more of a guide to building your own system based on your website requirements. If your build doesn't fit into a global grid system, consider using custom classes for grids, flex, and layouts (ie. .team_list with css grid styles to create the grid layout).
By default, Client-first uses 4px spacing. This can be changed if required by your build. If the spacing system isn't well defined by the designer, default to the 4px system.
Grid columns
Recurring simple grid layouts
.grid-1-col
.grid-2-col
.grid-2-col
.grid-3-col
.grid-3-col
.grid-3-col
.grid-4-col
.grid-4-col
.grid-4-col
.grid-4-col
Grid rows
Create horizontal spacing between items.
.grid-row
item
item
Add-ons to 'Grid rows'
Add these classes in addition to the .grid-row class above for flexible spacing.
.gap-small
item
item
.gap-medium
item
item
.gap-large
item
item
Simple row and column (flex)
.row
item
item
.col
item
item
Spacing
Spacing system that keeps vertical and horizontal spacing global on your website.
By default, Client-first uses 4px spacing. This can be changed if required by your build. If the spacing system isn't well defined by the designer, default to the 4px system.
By default, Client-first uses 4px spacing. This can be changed if required by your build. If the spacing system isn't well defined by the designer, default to the 4px system.
Spacing - vertical
Global use margin-bottom and margin-top
Space bottom
.space-bottom-xsmall
.space-bottom-small
.space-bottom-medium
.space-bottom-large
.space-bottom-xlarge
Space top
.space-top-xsmall
.space-top-small
.space-top-medium
.space-top-large
.space-top-xlarge
Spacing - equal inner spacing for sections
Create equal spacing horizontally and vertically.
Equal
Equal padding around
.section-space-small
.section-space-medium
.section-space-large
Equal vertical
padding-top and padding-bottom
.section-space-vertical-small
.section-space-vertical-medium
.section-space-vertical-large
Equal horizontal
Equal padding-left and padding-right
.section-space-horizontal-small
.section-space-horizontal-medium
.section-space-horizontal-large
Spacing - horizontal
margin-left and margin-right
Space left
.space-left-xsmall
.space-left-small
.space-left-medium
.space-left-large
.space-left-xlarge
Space right
.space-right-xsmall
element
.space-right-small
element
.space-right-medium
element
.space-right-large
element
.space-right-xlarge
element
Remove all spacing from default Webflow components
.space-clean
Typography
Typography organization keeps your brand professional. Correct usage of H1, H2, H3 for SEO.
Heading tags
Always use tags to determine headings.
Page must have only one H1 - SEO requirement. Add class .heading-large to h2, h3, etc. if you need more then one heading with the same stile as H1.
H1
H2
H3
H4
H5
H6
Styling text
.heading-xlarge
.heading-large
.heading-medium
Paragraph text - 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.
.text-large
.text-small
.text-tiny
.text-link.text-quote
.text-strikethrough
Rich text
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.
We have created special .text-rich-text class with a special formatting for each component.
Font weight
.text-bold
.text-normal
.text-italic
Text alignment
.text-left
.text-center
.text-right
Buttons
IMPORTANT: Use the 'Button' element inside Webflow Designer. This element is Editor friendly. 'Link Block' is not. Only use 'Link Block' if you must based on design.
Tip: use .grid-row .gap-small/medium/large as a wrapper to put the space between two buttons
Tip: use .grid-row .gap-small/medium/large as a wrapper to put the space between two buttons
Use add-on class .invert-colors when placing button on dark background
Colors
Typography organization keeps your brand professional. Correct usage of H1, H2, H3 for SEO.
Text color
Add to sections, containers, and elements to change the background color
.text-color-white
.text-color-grey
.text-color-black
.text-muted - adds opacity to text
Background color add-ons
Add to sections, containers, and elements to change the background color
.background-white
.background-grey
.background-black
Responsive visibility
Unique experience on each device.
Show and hide elements by screensize
.hide - hide on all devices
.hide-tablet - hide starting from tablet resolution
.hide-landscape - hide starting from landscape resolution
.hide-mobile - hide starting from mobile resolution
.show-tablet - display starting from tablet resolution
.show-landscape - display starting from landscape resolution
.show-mobile - display starting from mobile resolution
Icons
Icon classes
.icon-xsmall
.icon-small
.icon-medium
.icon-large
.icon-xlarge
.icon-1x1-xsmall
.icon-1x1-small
.icon-1x1-medium
.icon-1x1-large
.icon-1x1-xlarge
Inline SVG icons
Find more icons here https://simpleicons.org and add property fill='currentColor' inside of <svg> tag to control color of the icon through font color style.</svg>
Webflow Elements
Forms, buttons, dropdown, tabs, slider, and more. Here are all of the components we find inside Webflow Designer. The classes for these elements show the Client-first recommended naming for these elements.
Forms
Webflow native form elements
Slider
Tabs
Dropdown
Dropdown
Lightbox
Search
Utility classes
Special add-ons to bring unique components to your site. Built for developers. This section requires Webflow and CSS knowledge.
.z-1 - Bring an element closer on the z-index. Sets z-index to 1.
.z-2 - Bring an element closer on the z-index. Sets z-index to 2.
.full-size - No maximum width on a .container. Sets max-width to none.
.full-size-tablet - .full-size on tablet. Sets max-width to none on tablet.
.full-size-mobile - .full-size on mobile. Sets max-width to none on mobile.
.align-center - Centers a .container on .max-xxx the screen. Sets margin left and right to auto.
.div-square - Creates and maintains a 1:1 dimension of a div. CSS magic.
.layer - Add to div to make it expand the entire size of the parent element. Make sure the parent div has 'position: relative'.
.clickable-off - Prevents all click and hover interaction with an element. Sets pointer-events to none.
.clickable-on - Enables all click and hover interaction with an element. Sets pointer-events to auto.
.crop - Prevents overflow of a .container. Sets overflow to hidden.
.sticky-on-page - Required add-on to .page-wrapper when 'position: sticky' is on a page. Sets overflow to visible.
Questions
ALL comments, suggestions, and notes about this Style System are welcomed
This is the SECOND iteration of the system. We must improve.
Questions? Talking points? Ask in Slack channel #stylesystem-chat
Let's talk about this as a team, figure out what works, what doesn't work, and iterate this build until it's ready to show the Webflow community.
Questions? Talking points? Ask in Slack channel #stylesystem-chat
Let's talk about this as a team, figure out what works, what doesn't work, and iterate this build until it's ready to show the Webflow community.