Menu
OverviewColorsHTML TagsHeading ClassesText ClassesText WeightsText AlignmentsRich TextButtonsIconsElementsCustom CodeResourcesStructure
Protocore Style Guide
We create magic for companies and makers around the world

Overview

The purpose of this style guide is to help you understand how to manage this project in style. It lays out all the elements, components, tools, and resources used to develop it. Each section begins with a tutorial to reinforce you further. If you have any questions, please reach out hello@protocore.co

Global Styles

This project comes with a 'global' symbol embed block. This embed block goes on every page and holds CSS styles that are used everywhere in the project. Styles are added to an embed so we can see the CSS inside the Webflow Designer. Feel free to update and add to it.

Shortcuts

The Designer has many keyboard shortcuts to help you speed up your design workflow. The quickest way to see the list of all shortcuts in the Designer is pressing Shift + /. You can also access this list from the help menu on the bottom left of the Designer.

Do Math Within Input Fields

Everything in this project is measured using REM. The base font size is 1 rem. When you need to convert units such as pixels to REM, simply select your input field and type 14/16rem and it automatically calculates the difference and converts. You can do any other form of calculation, as well.

Remove Unused Elements

Once you're finished editing the project, open the Style Manager and click Clean Up to remove unused classes. Then open the Interactions panel and click Clean Up to remove unused interactions. Finally, open the Assets Panel, expand it from the top right, click Select All and Delete. Webflow will automatically dispose of any assets you haven't used. The rest will show up again once you publish your project and refresh the page.

Swatches

#000

Backgrounds

background-color-name

Texts

text-color-name

Gradients

#2E3192 → #1BFFFF

H1 • Title

H2 • Subtitle

H3 • Third Title

H4 • Fourth Title

H5 • Fifth Title
H6 • Sixth Title

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 Links
All Quotes

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

H1 • Heading-XLarge

H2 • Heading-Large

H3 • Heading-Medium

H4 • Heading-Small

H5 • Heading-XSmall
H6 • Heading-Tiny

text-size-large
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-medium
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-regular
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-small
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-size-tiny
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-strikethrough

text-style-italic

text-style-muted
text-style-allcaps
text-style-nowrap
text-style-link
text-style-quote
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-2lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

text-style-3lines
Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.dolor sit amet.

text-weight-xbold
text-weight-bold
text-weight-semibold
text-weight-medium
text-weight-normal
text-weight-light

Text Alignments

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

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,
  • The rich text element allows you to create and format headings,

This is a link

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.
Placeholder
This is a placeholder image.

Icons

Use global classes for your icons to easily manage them across the project. These are great for company logos, footer assets, etc. Avoid using them on elements that likely require unique customization on tablet or mobile. Please upload icons in the SVG format to avoid pixelation. If you want to embed them like the social media icons below, you can Find more icons here and add property fill='currentColor' inside of the <svg> tag to control the color of the icon through font color style.

Icon Sizes

Icons 1x1 Sizes

Social Media

Elements

In addition to the primary elements featured in this style guide, Webflow offers many more building blocks. This course walks through all the available elements, pointing out common examples and making suggestions to help you get the most out of each element.

List

  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.
  • Sample text is being used as a placeholder for real text that is normally present.

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Custom Code

The following snippets were used in this project. There are three ways to add custom code to this project. You can embed it directly into your page, insert it in your page settings, or host it on another server and then embed it as a script file. You can also upload the script file within your project as an asset and embed it.

Dynamic Copyright Year

<script>
const year = new Date().getFullYear();
$('.year').text(year);
</script>

Title

Your Code

Resources

Take your Webflow game to the next level with these tools and services.

Default Easings

Linear (None)
Ease
Ease In
Ease Out
Ease In Out
In Quad
In Cubic
In Quart
In Quint
In Sine
In Expo
In Circ
In Back
In Elastic
Out Quad
Out Cubic
Out Quart
Out Quint
Out Sine
Out Expo
Out Circ
Out Bounce
Out Back
Out Elastic
In Out Quad
In Out Cubic
In Out Quart
In Out Quint
In Out Sine
In Out Expo
In Out Circ
In Out Back
In Out Elastic
Bounce
Bounce Past
Swing From To
Swing From
Swing To

Structures

page-wrapper
main-wrapper
page-padding

Containers

container-large
container-medium
container-small

Max Widths

max-width-full
max-width-full-tablet
max-width-full-mobile-landscape
max-width-full-mobile-portrait
max-width-xxlarge
max-width-xlarge
max-width-large
max-width-medium
max-width-small
max-width-xsmall
max-width-xxsmall

Margins

margin-0
margin-tiny
margin-xxsmall
margin-small
margin-small
margin-medium
margin-large
margin-large
margin-xxlarge
margin-huge
margin-xhuge
margin-xxhuge
margin-custom1
margin-custom2
margin-custom3

Paddings

padding-0
padding-tiny
padding-xxsmall
padding-xsmall
padding-small
padding-medium
padding-large
padding-xlarge
padding-xxlarge
padding-huge
padding-xhuge
padding-xxhuge
padding-custom1
padding-custom2
padding-custom3

Padding Directions

padding-top
padding-bottom
padding-left
padding-right
padding-vertical
padding-horizontal

Margin Directions

margin-top
margin-bottom
margin-left
margin-right
margin-vertical
margin-horizontal

Responsiveness

hide
hide-tablet
hide-mobile-landscape
hide-mobile-portrait
show
show-tablet
show-mobile-landscape
show-mobile-portrait

Utility

spacing-clean
z-1
z-2
align-center
div-square
clickable-on
overflow-hidden
overflow-scroll
overflow-auto