Welcome to Decimal

Decimal is a Webflow Style System that allows you to build complex websites in a simple manner.

This is a starter project for the Decimal Webflow Style System. This project contains a style guide page with pre-built classes, CSS Naming Conventions & basic section layouts for you to use.

01
Typography
c-title-large

Heading 1

c-title-big

Heading 2

c-title-medium

Heading 3

c-title-small

Heading 4

c-title-xsmall
Heading 5
c-title-xxsmall
Heading 6
c-text-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-text-big

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-text-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-text-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-text-xsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-text-xxsmall

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-rich-text

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

  • This is a list item
  • Same here
  • This one as well

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

02
Buttons
c-button

Primary Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-button
cc-secondary

Secondary Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-button
cc-tertiary

Tertiary Button

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-label

Badges

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-label
c-label
c-label
03
Colors

Global Background Classes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

bg-black
Change the parent class color
bg-dark
Change the parent class color
bg-yellow
Change the parent class color
bg-smoke
Change the parent class color
bg-light
Change the parent class color
bg-accent
Change the parent class color
04
Inputs

Note, please copy the code from Page Settings only on the pages that will include forms to have all custom forms working properly.

c-input
c-input
cc-select
c-checkbox
c-radio
c-input
cc-text
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
05
Site Structure

Container

Containers in our templates are predefined using the class c-container
1. It should be a <div>.
2. Do not use Webflow Container Element
3. Do not change the style of the containers: All further styling should be added as children element
4. Don’t add combo classes to containers.

c-container
Container Standard (1250px)

Our standard container is 1250px wide. We use it for all standard sections.

c-container
cc-small
Container Small (1144px)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pharetra sem vitae viverra iaculis. Donec pretium a justo eget eleifend. Praesent eu nunc id diam vehicula accumsan a eu justo. Sed ut dolor in nisl finibus accumsan.

c-container
cc-tiny
Container Tiny (970px)

This Container is mainly used for legal pages

Hero

Heroes in our templates are predefined using the class c-hero
1. Always add a combo class to the hero element.
2. Do not change the style of the hero element: All further styling should be added as children elements

Sections

Sections in our templates are predefined using the class c-section
1. It should be a <div>.
2. Do not use Webflow Section Element
3. Do not change the style of the Section Element: All further styling should be added as combo classes.

Max Width

If you want to add a max width to any element, you can do so by adding a combo class. You can define your own max width classes based on your needs. Make sure to follow our naming conventions.

1. All max width classes should be defined by pixels cc-max320.
2. Always use your max width class on the wrapper element.
3. Do not use max width on c-container, c-section or c-heroclasses.

Text Alignment

If you want to change the text alignment of an element, make sure to add the combo class to the parent of that element.

1. Do not change the alignment on any class without a combo class.
2. Do not add the combo class directly to a text element.

cc-center
This is some text inside of a div block.
cc-right
This is some text inside of a div block.
cc-block
This is some text inside of a div block.
06
Wrapper

Wrapper

Each Element such as Sections, Buttons, Text Elements etc. must have a wrapper e.g.c-text-wrap or c-title-wrap.
On top of these classes, we can add Combo Classes to update specific styles :

1. Paddings and margins
2. Size (width, height, etc.)
3. Color (background, text etc.)
4. Position (absolute, float, fixed, etc.)

c-hero-wrap
Hero Wrap

We use hero wraps to define the alignment of the content within the hero section.

1. Always add a combo class with the name of the current Page (e.g. cc-about)

c-section-wrap
Section Wrap

We use section wraps to define the alignment of the content within the section.

1. Always add the section wrap inside the section container.
2. You can use cc-center to center the content and text alignment of a section.
3. Never add more than 2 combo classes to a section wrap. If you need more adjustments, create a new combo class that adds all the adjustments.

c-content-wrap
Content Wrap

This Container is mainly used for legal pages

c-text-wrap
Text Wrap

Each text must have a wrapper c-text-wrap
On top of these classes, we can add Combo Classes to update specific styles :

c-title-wrap
Title Wrap

This Container is mainly used for legal pages

c-button-wrap
Button Wrap

This Container is mainly used for legal pages