Global Text Styles
<h1> | Title H1
<h2> | Title H2
<h3> | Title H3
<h4> | Title H4
<h5> | Title H5
<h6> | Title H6
<p> | Paragraph text – Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a> Link Example sed do eiusmod tempor incididunt ut <b> Strong 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.
<p> | Large Paragraph text – Lorem ipsum dolor sit amet, consectetur adipiscing elit, <a> Link Example sed do eiusmod tempor incididunt ut <b> Strong 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.
BUTTONS
Solid --> Dark Outline
Class = .theme_light_green .btn-1 or .theme_orange .btn-1 ect...
Solid --> Light Coloured Outline
Class = .theme_light_green .btn-2 or .theme_orange .btn-2 ect...
Solid --> Beige Outline
Class = .theme_light_green .btn-3 or .theme_orange .btn-3 ect...
Solid --> White Outline
Class = .theme_light_green .btn-4 or .theme_orange .btn-4 ect...
LAYOUT
Here is a tutorial presentation to understand how to utilise this across the site: https://docs.google.com/presentation/d/11l-M_D3MdGSBxcNSro9cSAEiVvCiCxbowAb2sPJVFm8/edit?usp=sharing
These classes are very powerful and cut out alot of unnecessary styles in different stylesheets.
Row, Column and Grid layouts
[Direction]-[Size]-[Option]
Direction | row, col, grid
Size | 1, 2, 3, 4, 5, 6
Option | r = (reverse direction)
SECTION CONTAINER
Container | con, ingrid
DIRECTION
Direction | row, col, grid
SIZE
Direction | row, col, grid
RESPONSIVE
Device | "", t, m
SPACING
(Padding Margins, Gaps)
Padding top and bottom of a section:
.p-lg-tb or .p-md-tb or p-sm-tb (p = Padding, lg/md/sm = Size, tb= Top & Bottom)
Can Also be written like .p-lg-t .p-lg-b (Can seperate the top and bottom and show larger at top than bottom ect)
Padding left and right of a section:
.p-lg-lr or .p-md-lr or p-sm-lr (p = Padding, lg/md/sm = Size, lr= Left & Right)
Can Also be written like .p-lg-l .p-lg-r (Can seperate the left and right and show larger on one side)
Margins
Margins are done the same way but written with a 'm' instead of a 'p', e.g. .m-lg-tb
Gaps
Gaps are used within the Spacing classes, they allow global gaps. For example .g-lg, g-md, .g-sm