Skip to content

Commit

Permalink
prettier run
Browse files Browse the repository at this point in the history
  • Loading branch information
elderyouth committed Aug 29, 2024
1 parent c108cb0 commit 9ea3bb8
Showing 1 changed file with 13 additions and 3 deletions.
16 changes: 13 additions & 3 deletions STYLE_GUIDE.md
Original file line number Diff line number Diff line change
Expand Up @@ -48,14 +48,18 @@
.mdText{font-size:32px}

</style>

# 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.
<br>
To use a property from global.css into your file, use the <code>var()</code> function when declaring your own property. For example, if we wanted to set the color of a text within a container with the class <code>myCustomClass</code> to our primary blue color, we would use the <code>--blue</code> prefix property as so:

<pre class="brush: css notranslate">
element.css
<code>
Expand All @@ -65,7 +69,8 @@ element.css
</code>
</pre>

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

<pre class="brush: css notranslate">
element.tsx
<code>
Expand All @@ -80,6 +85,7 @@ return(
# Visual Style

## Colors and Font

The most unifying visual component is the consistent use of colors and font settings.<br>
<span class="cardTitle">Font Family</span>
<code style="display:block;">
Expand Down Expand Up @@ -118,13 +124,16 @@ The core colors below are for background and textual elements. They are listed w
</section>

## Typography

<p class="typography xlText"><code>.xlText</code> Heading 1 / XL Text</p>
<p class="typography lgText"><code>.lgText</code> Heading 2 / Large Text</p>
<p class="typography mdText"><code>.mdText</code> Heading 3 / Medium Text</p>
<p class="typography">Normal Text</p>

## Design Elements

### Sections

<div class="section bgBlue">
<div class="sectionPadded">
<p class="typography lgText">Blue <code>.bgBlue</code></p>
Expand Down Expand Up @@ -157,11 +166,12 @@ The core colors below are for background and textual elements. They are listed w
</div>

### Breakpoints

<pre>
--max-width: 1450px;
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1200px;
</pre>
</pre>

0 comments on commit 9ea3bb8

Please sign in to comment.