Colors
Background Colors
Text Colors
Typography
No Class Name
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
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.
With Class Name
heading-2xl
heading-xl
heading-l
heading-m
heading-s
heading-xs
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.
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.
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 style
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.
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.
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.
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.
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.
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.
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.
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.
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.
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.
What’s a Rich Text element?
What’s a Rich Text element?
What’s a Rich Text element?
What’s a Rich Text element?
What’s a Rich Text element?
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.
Unordered List
- List item
- List item
Ordered List
- List item
- List item
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.
Spacing
Spacing
Margin class names
Margin bottom
Margin right
Max Width
containers
Form
All elements for the form must be in the main states
Normal state
Error state
Success state
Form with custom validation
Other
Set here the rest of the UI elements used in your design.
Tabs
For Developers
Here are collected all the rules and principles that are important for developers and which are not included in the general framework
Structure
The page structure is shown in the image.
All elements must be wrapped in a .page-wrapper class. Inside it there are css properties, navbar, main-wrapper and footer.
- .navbar - tag "Navbar".
- .main-wrapper - has a tag name "Main" and contains all sections of the page (except the Hero Section).
- .section - tag "Section", padding right and padding left are 40px, position is Relative.
Classes that you can add as a combo-class to the .section:
.bg-color-[number]
.overflow-hidden
- .container -
width 100%,
margin left and right are auto,
padding top and bottom are 80px and
max-width 1180px.
Paddings and max-width can be changed depending on the design.
Container has one Heading 2 as a main title and subtitles Heading 3, 4, 5, 6. - you can add combo-classes for .container to change padding-top and padding-bottom
- .footer - has a tag "Footer".
Always save as a symbol:
- Navbar
- Footer
- Buttons
- CSS
Class names
Use the names of the classes & animations without abbreviations so that the client / other developer can immediately understand what this element / animation is doing in the project.
Class Names
- All classes must be written with a small letter separated by a dash.
- Never use webflow generated classes. Ex. Div Block 28, Heading 12… etc.
- Each element should have a class name.
- Avoid more than 3 classes on 1 element. Use custom classes or nesting of one element in another instead.
Remove unused Classes.
Animation Names
Use clear animation names
Common title | Trigger | Breakpoint (if this animation is different from the desktop one).
Common title can contain page name for better navigation among animations.
Remove unused animations.
Standard animations
From bottom
From left
From right
Fonts
- The main font should be connected to the Body (All pages).
- Use .woff2 font files.
Images
- Type: WEBP. SVG is possible too. It's better to upload all images in the Webflow assets panel and then convert them inside Webflow (how-to video)
- Image File Recommendations
Full width images:
size: 3500px x 1969px
maximum weight: ~700kb
Other images:
size: 2x from the image size on the website (design)
maximum weight: ~250kb
3. All images have to set alt tag from the Assets panel.
4. Some images can be set load as a "Lazy load on scroll".
Lang attribute
Specify the Lang attribute in the project settings
Useful classes
Visibility control
Explanations
Juice custom form validation
- Add validation JS code to the page where form will be placed. Place code before
closing </body> tag. By default code stored on this Styleguide page - Build the form, using structure where each input and corresponding label wrapped into parent element
- Include error message text element to each wrapper with input
- Provide styling for input parent element separately for Success and Error states of the input and error text message, using .success and .error comboclasses. Example of the styling provided on this page Inside <head> tag
- Apply custom attribute juice-custom-validation='message' to each message element
- Apply custom attribute juice-custom-validation='form' to the Form element,
but NOT to the Form block. - Replace native Form Submit button with a regular button. It's important! If we'll
use native Submit button, browser will show standard validation messages,
we don't need them - Apply custom attribute juice-custom-validation='submit' to the new button
- Set required checkbox for all inputs which you want to validate as required inside input settings. Please note, at least one
- Set type of input to email if you want to validate inserted email info
