Properties
General Padding
To adjust the padding open the variables panel and change the spacing values accordingly. We use VW to be more controlled with our spacing, however you will need to adjust each responsive level. We shortened the word padding to pad to avoid confusion with the actual css value padding-x
Class type
Top
Left
Right
Bottom
5vw
5vw
5vw
5vw
Inner Padding
Extending beyond standard padding inner padding is used for smaller edge cases this can be used in pullouts or cards etc.
Class type
Top
Left
Right
Bottom
Section Padding
To adjust the padding click the lighter grey area to select the element you wish to change. We use VW to be more controlled with our spacing, however you will need to adjust each responsive level.
Class type
Top
Left
Right
Bottom
Margins
To adjust the margins edit the spacing value inside of the variables panel.
Class type
Top
Left
Right
Bottom
5vw
5vw
5vw
5vw
Small Margins
To adjust the margins edit the spacing value inside of the variables panel.
Class type
Top
Left
Right
Bottom
Text & Button Margins
Extending the margin classes to become em's instead of VW's this way we don't need to use unique classes. this is simply adding the extended size
Extra Large Marge Top
Extra Large Marge Bottom
Largest Marge Top
Largest Marge Bottom
Larger Marge Top
Larger Marge Bottom
Large Marge Top
Large Marge Bottom
Mid Marge Top
Mid Marge Bottom
Small Marge Top
Small Marge Bottom
Smaller Marge Top
Smaller Marge Bottom
Smallest Marge Top
Smallest Marge Bottom
Black
Black
Black
Black
Black
Black
Black
Heights & Widths
When you wish to set heights on elements, we use svh to set the minimum height while respecting the content overflow. so for example in headers on mobile the content might be taller than the 100vh we may set with browser bar and other native UI this can cause your content to break dvh will cause the content to jump so svh is the most flexible.
Viewport Height:
10% of the viewport (device) height
10svh10% of the viewport (device) height
Viewport Height:
20% of the viewport (device) height
20svh20% of the viewport (device) height
Viewport Height:
30% of the viewport (device) height
30svh30% of the viewport (device) height
Viewport Height:
40% of the viewport (device) height
40svh40% of the viewport (device) height
Viewport Height:
50% of the viewport (device) height
50svh50% of the viewport (device) height
Viewport Height:
60% of the viewport (device) height
60svh60% of the viewport (device) height
Viewport Height:
70% of the viewport (device) height
70svh70% of the viewport (device) height
Viewport Height:
80% of the viewport (device) height
80vh80% of the viewport (device) height
Viewport Height:
90% of the viewport (device) height
90svh90% of the viewport (device) height
Viewport Height:
100% of the viewport (device) height
100svh100% of the viewport (device) height
Viewport Width:
10% of the viewport (device) Width
10vw10% of the viewport (device) Width
Viewport Width:
20% of the viewport (device) width
20vw20% of the viewport (device) width
Viewport Width:
30% of the viewport (device) width
30vw30% of the viewport (device) width
Viewport Width:
40% of the viewport (device) width
40vw40% of the viewport (device) width
Viewport Width:
50% of the viewport (device) width
50vw50% of the viewport (device) width
Viewport Width:
60% of the viewport (device) width
60vw60% of the viewport (device) width
Viewport Width:
70% of the viewport (device) width
70vw70% of the viewport (device) width
Viewport Width:
80% of the viewport (device) width
80vw80% of the viewport (device) width
Viewport Width:
90% of the viewport (device) width
90vw90% of the viewport (device) width
Viewport Width:
100% of the viewport (device) width
100vw100% of the viewport (device) width
Container Width:
10% of the containing width
10pc10% of the containing width
Container Width:
20% containing width
20pc20% containing width
Container Width:
30% of the containing width
30pc30% of the containing width
Container Width:
40% of the containing width
40pc40% of the containing width
Container Width:
50% of the containing width
50vw50% of the containing width
Container Width:
60% of the containing width
60pc60% of the containing width
Container Width:
70% of the containing width
70pc70% of the containing width
Container Width:
80% of the containing width
80vw80% of the containing width
Container Width:
90% of the containing width
90pc90% of the containing width
Container Width:
100% of the containing width
100pc100% of the containing width
Flex
Flex means we want to take all our elements and have a layout either horizontally or vertically, we can also control what we want those elements inside do, so for example have space between them or position the to the bottom/left/top.
So we are flexing any element either horizontally or vertically
So we are flexing any element either horizontally or vertically
Flex Horizontal
Flex Vertical
Flex Container
Flex container defaults to right unless inside a container-respond then when the available area is less the flex will switch to vertical to accommodate
Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Radius
Open the variables panel to set the radius values
Text Alignments
Change the alignment of any text element using this class.
Right Alignment
Center Alignment
Right Alignment
This class will only align center on mobile you can add this to the container
Orphan Text
Change the alignment of any text element using this class.
This is text which needs to wrap when it has an orphan word