discours.io/webapp
5
0
Fork 0
Code Issues Pull Requests Actions Projects Wiki Activity

styles-readme

Browse Source
This commit is contained in:
Untone 2024-10-08 23:18:34 +03:00
parent cf45cac656
commit 9ef9b91ada
1 changed files with 44 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/styles/README.md
View File

@ -1,12 +1,13 @@
# Discours.io Grid System and Styles # Discours.io Styling System
This document outlines the grid system and styles used in the Discours.io project. It's a lightweight, customizable system inspired by Bootstrap, providing essential features for responsive design. This document outlines the styling system used in the Discours.io project. It's a lightweight, customizable system inspired by Bootstrap, providing essential features for responsive design and theming.
## Grid System (_grid.scss) ## Grid System (_grid.scss)
### Container Classes ### Container Classes
- `.container`: Fixed-width, centered container - `.container`: Fixed-width, centered container
- `.container-fluid`: Full-width container - `.container-fluid`: Full-width container
- `.wide-container`: Custom container with max-width
### Row Class ### Row Class
- `.row`: Flexbox container for columns with negative margins - `.row`: Flexbox container for columns with negative margins
@ -16,19 +17,18 @@ This document outlines the grid system and styles used in the Discours.io projec
- `.col-{breakpoint}-auto`: Auto-width column - `.col-{breakpoint}-auto`: Auto-width column
- `.col-{breakpoint}-{1-24}`: Fixed-width column (1 to 24 based on $grid-columns) - `.col-{breakpoint}-{1-24}`: Fixed-width column (1 to 24 based on $grid-columns)
### Display Classes ### Utility Classes
- `.d-flex`: Display flex - Display: `.d-flex`, `.d-none`
- `.d-none`: Display none - Justify Content: `.justify-content-between`
- Order: `.order-{breakpoint}-{first|last|0-24}`
### Justify Content Class - Offset: `.offset-{breakpoint}-{1-23}`
- `.justify-content-between`: Justify content space-between
### Gutter Classes ### Gutter Classes
- `.g-{breakpoint}-{0-5}`: Sets both horizontal and vertical gutters - `.g-{breakpoint}-{0-5}`: Sets both horizontal and vertical gutters
- `.gx-{breakpoint}-{0-5}`: Sets horizontal gutters - `.gx-{breakpoint}-{0-5}`: Sets horizontal gutters
- `.gy-{breakpoint}-{0-5}`: Sets vertical gutters - `.gy-{breakpoint}-{0-5}`: Sets vertical gutters
## Mixins ## Mixins (_global.scss)
### Media Queries ### Media Queries
- `media-breakpoint-up($breakpoint)` - `media-breakpoint-up($breakpoint)`
@ -40,6 +40,7 @@ This document outlines the grid system and styles used in the Discours.io projec
- `make-row($gutter)` - `make-row($gutter)`
- `make-col-ready()` - `make-col-ready()`
- `make-col($size, $columns)` - `make-col($size, $columns)`
- `make-col-offset($size, $columns)`
## Variables (_global.scss) ## Variables (_global.scss)
@ -49,3 +50,37 @@ This document outlines the grid system and styles used in the Discours.io projec
- `$container-max-widths`: Same as $grid-breakpoints - `$container-max-widths`: Same as $grid-breakpoints
- `$container-padding-x`: Half of $grid-gutter-width - `$container-padding-x`: Half of $grid-gutter-width
- `$gutters`: 0, 1, 2, 3, 4, 5 with corresponding rem values - `$gutters`: 0, 1, 2, 3, 4, 5 with corresponding rem values
## Theming (_theme.scss)
The project uses CSS custom properties for theming, supporting both light and dark modes.
### Usage
```scss
.my-element {
background-color: var(--background-color);
color: var(--default-color);
}
```
### Key Theme Variables
- `--background-color`
- `--default-color`
- `--link-color`
- `--secondary-color`
## Typography (app.scss)
The project uses the Muller font family and defines base styles for typography.
### Base Font
- Family: Muller, Arial, Helvetica, sans-serif
- Size: 2rem (20px assuming a 10px root font size)
- Line Height: 1.6
### Headings
- `h1`: 4.8rem
- `h2`: 4rem
- `h3`: 3.2rem
- `h4`: 2.6rem
- `h5`: 2.2rem