Welcome to the This\That Webflow Framework. Start off by duplicating this page, naming it "_Styleguide" and moving it to the "_Templates" folder.
Next, let's set some basic inherit styling to our "Body" by selecting the "Body" element and then "Body (All Pages) in the class dropdown.
We have some essential text and content elements below. Set styling for each class and also add additional styles to this styleguide page.
Lastly, go to the "_Modules" page to start styling essential content layout modules and add additional content modules.
Set the desired padding/margins for the default "Wrapper" class.
Also you can adjust Min and Max Widths to this class, which is currently set to a Max W of 1440px.
Set styling for header tags. Use "All H* Headings" in the Class. Font sizing set to ems on default.
Set styling for header tags. Use "All H* Headings" in the Class. Font sizing set to ems on default.
Set styling for body text. Font sizing set to ems.
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.
The "section-end" class gives us additional margin after the last paragraph of a section. By default is is set to 4em.
Set styling for intro text. Font sizing set to ems.
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.
Set styling for paragraph text. Font sizing set to ems.
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.
Set styling for small paragraph text. Font sizing set to ems.
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.
Set styling for rich text elements. Font sizing set to ems.
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.
Set styling for basic ordered and unordered lists. Use "All Lists" and "All List Items" classes. Font sizing set to ems.
For unordered lists where you want to utilize a custom icon for the bullet point. Icon set as the background image of "class name". Inherits text styling and spacing from
Add site color swatches here.
