diff --git a/STYLE_GUIDE.md b/STYLE_GUIDE.md index d65ecc3..ae52b72 100644 --- a/STYLE_GUIDE.md +++ b/STYLE_GUIDE.md @@ -48,14 +48,18 @@ .mdText{font-size:32px} + # Style Guide for DSD Website's brand + To establish consistency and aid to developers, this guide aims to set a ruleset of common styles and resources such as colors, typography, and more. -Please use [Global.css](https://github.com/dallassoftwaredevelopers/DSDsite/blob/main/src/app/globals.css) +Please use [Global.css](https://github.com/dallassoftwaredevelopers/DSDsite/blob/main/src/app/globals.css) # Getting Started + Global.css contains a collection of common styling properties and CSS classes which can be used to both create new CSS classes and "pre-build" styles onto one class you can then cascade onto the HTML element you want to style. This guide will list all available properties and CSS classes from the global.css file.
To use a property from global.css into your file, use the var() function when declaring your own property. For example, if we wanted to set the color of a text within a container with the class myCustomClass to our primary blue color, we would use the --blue prefix property as so: +
 element.css
 
@@ -65,7 +69,8 @@ element.css
 
 
-To add a class from global.css to your html element in tsx, wrap the +To add a class from global.css to your html element in tsx, wrap the +
 element.tsx
 
@@ -80,6 +85,7 @@ return(
 # Visual Style
 
 ## Colors and Font
+
 The most unifying visual component is the consistent use of colors and font settings.
Font Family @@ -118,13 +124,16 @@ The core colors below are for background and textual elements. They are listed w ## Typography +

.xlText Heading 1 / XL Text

.lgText Heading 2 / Large Text

.mdText Heading 3 / Medium Text

Normal Text

## Design Elements + ### Sections +

Blue .bgBlue

@@ -157,6 +166,7 @@ The core colors below are for background and textual elements. They are listed w
### Breakpoints +
 --max-width: 1450px;
 --breakpoint-xs: 0;
@@ -164,4 +174,4 @@ The core colors below are for background and textual elements. They are listed w
 --breakpoint-md: 768px;
 --breakpoint-lg: 992px;
 --breakpoint-xl: 1200px;
-
\ No newline at end of file +