• Styleguide START •
Welcome on your Styleguide. This page reflects all the elements you will find on your website.
Once your project is done, do not forget to delete all the unused elements to clean the css and optimise the performances.
WARNING : Please be very careful every time you modify something on this documents as it will change any linked element on your entire project. Thanks for your support.
• Colors •
Add all colors you will need on your website.
Primary colors
Secondary colors
Neutral colors
• Typography •
Here you will be able to add every title, paragraph and elements related to text. I volontarely updated the global classes but also made specified classes for each of them in case you need the title style for a SEO useless text elements.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
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.
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.
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.
• Buttons •
Add all your different buttons here. They can be native Webflow elements but also customised linked blocks.
• Forms •
I tried to add all the blocks you can find in a website form.
• Rich Text •
All the titles and texts are based on global classes. Feel free to modify and adapt them to the rich text element by selecting them.
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.
What’s a Rich Text element?
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!
.jpg)
What’s a Rich Text element?
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.
- What’s a Rich Text element
- What’s a Rich Text element
- What’s a Rich Text element
What’s a Rich Text element?
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.
Headings, paragraphs, blockquotes, figures, images, and figure captions
What’s a Rich Text element?
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.
- What’s a Rich Text element
- What’s a Rich Text element
- What’s a Rich Text element
What’s a Rich Text element?
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.
• Grids •
Some ready to use grid to fill the essentials needs you can find on a basic website. Copy & paste it, and give it a class for each breakpoint (ie : Desk 4 / Tab 3 / Mob 2).
Desk 4
Tab x
Mob x
Desk 3
Tab x
Mob x
Desk 2
Tab x
Mob x
Desk 2/1
Tab x
Mob x
Desk 1/2
Tab x
Mob x
• Columns •
12 Columns system that you can quickly adapt for each breakpoint (ie : Desk 8 / Tab 10 / Mob 12).
• CSS classes•
All those classes will be used as combo. It allows you to quickly style your elements without duplicate or creat new classes. Feel free to add or delete classes here. But please avoid elements with more than 4 classes.
Text
Display
Margin
Animations
• styleguide END •
This styleguide has been created by Alexis Gardin