This style guide page contains styles and components that are to be used throughout a website. You can find out more about having a style guide here.
The different text sizes used throughout the site.
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.
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.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Formatted rich text element used for long sections of text such as blog posts.
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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Block Quote: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Colors assigned as variables to use throughout the website. When we add new colors for campaigns, preface the color name with the campaign name. See RND example below.
The different types of buttons used throughout the website.
Style these classes to create consistent spacing throughout the site
Spacer elements to provide vertical or horizontal spacing. Use class "Spacer" then the amount.
Social icons used across the website.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Examples of combo elements used across the site.
Style these classes to create consistent spacing for headline and sub-headline blocks. This system makes it easy to adjust spacing on tablet and mobile.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button TextLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Button TextModified from Whiteboard.is conventions
We use title case for our naming our CSS classes in Webflow - capitalize each word with spaces in between words. In other words, we use Section Header rather than section-header
Here are a few more example class names:
Using title case makes our classes very user friendly. They’re a lot easier to read in the designer and more understandable for our non-developer clients.
Webflow automatically generates CSS from the class names we create by converting our class names to lowercase and replacing spaces with hyphens. For example, FAQ Item Trigger becomes faq-item-trigger allowing us to use .faq-item-trigger in any custom code.
If a classname starts with a number, Webflow will add an underscore to the beginning of the generated classname. For example, 3 Column Grid becomes _3-column-grid
Our development style focuses on modular, component-based building. A component is a standalone, reusable group of elements that you can copy and paste onto another page without it losing its functionality.
Examples:
We focus on components because, in Webflow, it makes it easy to use copy-and-paste to add to an existing page or create whole new pages in the Designer.
To help identify components, we can use the following three types of classes:
Let’s take our FAQ list as an example. The outermost HTML element that we can copy and paste should be given the suffix Component and named something that clearly describes what the component is. So, we could use: FAQ List Component. Then, elements inside of the component should reference what component it is inside of. So, the class structure could look like:
Utility classes are global classes that can be used independently or to make slight tweaks to existing classes. For example, let’s say that our Button class has 16px of top margin, but there’s one instance where it needs to have 24px of top margin. We can quickly make this change by adding the Margin Top 24 utility class as a combo class to Button.
In general, utility classes should only be used one layer deep. If you need to add two utility classes to achieve the desired result, that’s an indicator that you should go ahead and create a custom class.
Modified from Whiteboard.is conventions
We use title case for our naming our CSS classes in Webflow - capitalize each word with spaces in between words. In other words, we use Section Header rather than section-header
Here are a few more example class names:
Using title case makes our classes very user friendly. They’re a lot easier to read in the designer and more understandable for our non-developer clients.
Webflow automatically generates CSS from the class names we create by converting our class names to lowercase and replacing spaces with hyphens. For example, FAQ Item Trigger becomes faq-item-trigger allowing us to use .faq-item-trigger in any custom code.
If a classname starts with a number, Webflow will add an underscore to the beginning of the generated classname. For example, 3 Column Grid becomes _3-column-grid
Our development style focuses on modular, component-based building. A component is a standalone, reusable group of elements that you can copy and paste onto another page without it losing its functionality.
Examples:
We focus on components because, in Webflow, it makes it easy to use copy-and-paste to add to an existing page or create whole new pages in the Designer.
To help identify components, we can use the following three types of classes:
Let’s take our FAQ list as an example. The outermost HTML element that we can copy and paste should be given the suffix Component and named something that clearly describes what the component is. So, we could use: FAQ List Component. Then, elements inside of the component should reference what component it is inside of. So, the class structure could look like:
Utility classes are global classes that can be used independently or to make slight tweaks to existing classes. For example, let’s say that our Button class has 16px of top margin, but there’s one instance where it needs to have 24px of top margin. We can quickly make this change by adding the Margin Top 24 utility class as a combo class to Button.
In general, utility classes should only be used one layer deep. If you need to add two utility classes to achieve the desired result, that’s an indicator that you should go ahead and create a custom class.
Webflow University. Webflow's bank of resources – lots of good and helpful resources for learning how to build in Webflow!