Quick Notes:
All classes begin with "ob-" followed by more detail of what the class represents.
This framework uses an 8pt grid system and each class ending in a number (e.g. -1) is multiplied by 8 with the exception of "-half" which = 4px.
Example:
To add your colors here, follow the Oxy Builder Blocks DSM Set Up Documentation sheet.
*For color opacity effects, add the opacity classes (located here) to wherever you would like opacity to be applied.
*For color opacity effects, add the opacity classes (located here) to wherever you would like opacity to be applied.
*For color opacity effects, add the opacity classes (located here) to wherever you would like opacity to be applied.
Margins use multiples of 8, with the exception of -half, which equals 4px.
Margins - Top, Right, Bottom, Left
Top Margin
Negative Top Margins
Right Margin
Negative Right Margin
Bottom Margin
Negative Bottom Margins
Left Margin
Negative Left Margin
Y Margins Top with Bottom
X Margins Right with Left
Make sure to set your Sections Global "Container Padding" Styles located in Settings > Global Styles > Sections. Suggested Container Padding is Top & Bottom to 80px > Left & Right to 24px
Padding use multiples of 8, with the exception of -half, which equals 4px.
Padding - Top, Right, Bottom, Left
Top Padding
Right Padding
Bottom Padding
Left Padding
Y Paddings Top with Bottom
X Paddings Right with Left
This framework uses a (soft) 4px baseline grid and the line-height is set based on these fonts. You will need to adjust accordingly for the fonts you choose since font heights vary. I say soft because you always need to be somewhat flexible in design.
In case you would like to learn a bit more about a 4px baseline grid, this a great little article here and for tools to help you with spacing you can use Grid Lover here, or Golden Ratio Typography (GRT) Calculator here.
Title Sizes and Details: H1 - H6
FS= Font Size
LH= Line-height
Set h1-h6 tags in global settings
To calculate your unitless LH use this equation:
Line Height in PX / Font Size in PX = Unitless Line Height
Example: 80px LH / 64px FS = 1.25
Display Font Sizing
Font Sizing
Font Weight
Font Styles
Text Colors
Text Align
Letter Spacing
Line Height
Box Shadow
Opacity
Border Style
Border Width
Border Radius
Border Color
Each button has 3 sizes, small, medium, and large
Each button uses the 4 states below: Normal, Focused, Hover, and Pressed (Active).
Based on your color palette you may need to adjust some of your button states.
To edit them select the button and click the "state" button and select the state you would like to edit. Update each button accordingly to keep your buttons consistent throughout your design.