Webflow Stylesheet Template

Hello and welcome to the Supper Webflow space! This template is intended to be duplicated and manipulated to create new websites that are consistent and clean in their styling. Feel free to refer back to this document for styling and and structure examples.

Primary Elements

These are classes and elements that have been established as a suggested site structure, but can be manipulated to fit the design of the specific site. Once they are established, they should not be changed without first adding a combo class.
01

Section

This is class that can be applied to each section dropped in. It has a default padding of 40px on top and bottom.
02

container-horizontal and container-vertical

These are the containers that can be used if your content will primarily be stacked vertically or will sit side by side inside the container. The default settings are 100% width, centered, 80px of padding on left and right, and max width of 1440px.
03

Heading Text Style

These are set cascading downward in size and importance of text. They can be changed by clicking into the class selector box and choosing "All H1 headings" before styling. Combo classes have been established for center, left, right, and white.
04

Body Text Style

These are set cascading downward in size and importance of text. They can be changed by clicking into the class selector box and choosing "All H1 headings" before styling. Combo classes have been established for center, left, right, and white.

Heading Styles

Heading styles should be used in order on a page for best SEO practices. For example, you should never started a page headline with H2 and then use an H1 further down on the page. Plan for this use case when setting your styling

Heading

Heading

Heading

Heading

Heading
Heading

Heading

Heading

Heading

Heading

Heading
Heading

Heading

Heading

Heading

Heading

Heading
Heading

Body Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Reverse Heading Styles

This can be accomplished simply by typing "white" into the combo class selector field. If you want your reverse text to be a different color, like cream, simply change the color with the combo class selected, and then change the name of the class from "white" to "cream."

Heading

Heading

Heading

Heading

Heading
Heading

Heading

Heading

Heading

Heading

Heading
Heading

Heading

Heading

Heading

Heading

Heading
Heading

Reverse Body Styles

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Button Styles

Create primary, secondary, and tertiary button styles to establish a hierarchy. Add combo classes for different color options.
primary button
secondary button
Text Link
primary button
secondary button
Text Link

Happy site building! :)