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.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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.
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.
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.
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.
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.
Note, please copy the code from Page Settings only on the pages that will include forms to have all custom forms working properly.
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.
Our standard container is 1250px wide. We use it for all standard sections.
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.
This Container is mainly used for legal pages
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 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.
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.
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.
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.)
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)
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.
This Container is mainly used for legal pages
Each text must have a wrapper c-text-wrap
On top of these classes, we can add Combo Classes to update specific styles :
This Container is mainly used for legal pages
This Container is mainly used for legal pages