<commit_before>## Documentation

#### CORE
- [X] Normalize CSS
- [X] Media Queries
	- [X] Mobile First
	- [X] Desktop First
- [X] Container
- [X] Grid System
- [X] Properties Functions
	- [X] Color Palette: `cd-palette`
	- [X] Z Index: `cd-zIndex`
	- [X] Font Family: `cd-fontFamily`
	- [X] Font Size: `cd-fontSize`
	- [X] Font Weight: `cd-fontWeight`
	- [X] Line Height: `cd-lineHeight`
	
#### WIDGETS
- [X] Tooltip
- [X] Modal


## Normalize CSS
For improved cross-browser rendering, [Normalize.css](https://necolas.github.io/normalize.css/) is used, a project by <NAME> and <NAME>.


## Media Queries

###### Break Points: (in pixels)
```
widescreen (w):		1201	- 	greater
desktop (d):		993 	- 	1200
tablet (t):		768 	- 	992
smartphone (s):		481 	- 	767
portrait (p):		0 	- 	480
```

###### Media Queries has two styles:
- Mobile First:	`(order: p -> s -> t -> d -> w)`
- Desktop First: `(order: w -> d -> t -> s -> p)`

```
@param $platformFirst:	mobile | desktop
@param $device:		portrait | smartphone | tablet | desktop | widescreen

Example:
@include cd-media(mobile, smartphone) { }
@include cd-media(desktop, smartphone) { }
```


## Container
We need a containing element to wrap site contents and house our grid system. Containers are nestable.

###### Container Fluid
```
<div class="cd-container-fluid">content</div>
```

###### Container
```
widescreen			1200 - 30	=	1170px
desktop				992 - 30	=	962px

<div class="cd-container">content</div>
```


## Grid System
```
Columns: 			12
Gutter:		 		30px (15px on each side of a column)
Nestable: 			Yes
Offsets:			Yes (cd-col-offset-device-column)
Ordering:			Yes (cd-col-order-device-column)
```

###### Mobile First
```
<div class="row">
  <div class="cd-col cd-col-p-12 cd-col-s-12 cd-col-t-6 cd-col-d-4 cd-col-w-4">content</div>
  <div class="cd-col cd-col-p-12 cd-col-s-12 cd-col-t-6 cd-col-d-8 cd-col-w-8">content</div>
</div>
```

###### Desktop First
```
<div class="row">
  <div class="cd-col cd-col-w-4 cd-col-d-4 cd-col-t-6 cd-col-s-12 cd-col-p-12">content</div>
  <div class="cd-col cd-col-w-8 cd-col-d-8 cd-col-t-6 cd-col-s-12 cd-col-p-12">content</div>
</div>
```


## Properties Functions

###### Color Palette: `cd-palette`
```
A color palette having code values assigned to each color.

@param $palette:	color | background | border | shadow
@param $hex-code:	hexadecimal color code
@param $opacity:	0-1

Example:
color: cd-palette($cd-color, 1000);
background color: cd-palette($cd-background, 2000);
border: 1px solid cd-palette($cd-border, 3000);
box shadow: 1px 1px 1px cd-palette($cd-shadow, 4000);
```

Note: Here you can find the list of colors palette: [Color Palette](color-palette.md)

###### Z Index: `cd-zIndex`
```
A function for the property z-index.

@param $key:	normal | float | modal | loader

Example:
z-index: cd-zIndex(normal);
```

###### Font Family: `cd-fontFamily`
```
A function for the property font-family.

@param $key:	helvetica

Example:
font-family: cd-fontFamily(helvetica);
```

###### Font Size: `cd-fontSize`
```
A function for the property font-size.

@param $key:	h1 | h2 | h3 | h4 | h5 | h6 | p | span

Example:
font-family: cd-fontSize(h1);
```

###### Font Weight: `cd-fontWeight`
```
A function for the property font-weight.

@param $key:	100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Example:
font-family: cd-fontWeight(100);
```

###### Font Height: `cd-lineHeight`
```
A function for the property line-height.

@param $key:	1 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6 | 1.7 | 1.8 | 1.9 | 2

Example:
font-family: cd-lineHeight(1);
```

## Widgets

- Tooltip: [Link](widgets/tooltip.md)
- Modal: [Link](widgets/modal.md)<commit_msg>Update guide.md<commit_after>## Documentation

#### CORE
- [X] Normalize CSS
- [X] Media Queries
	- [X] Mobile First
	- [X] Desktop First
- [X] Container
- [X] Grid System
- [X] Properties Functions
	- [X] Color Palette: `cd-palette`
	- [X] Z Index: `cd-zIndex`
	- [X] Font Family: `cd-fontFamily`
	- [X] Font Size: `cd-fontSize`
	- [X] Font Weight: `cd-fontWeight`
	- [X] Line Height: `cd-lineHeight`
	
#### WIDGETS
- [X] Tooltip
- [X] Modal


## Normalize CSS
For improved cross-browser rendering, [Normalize.css](https://necolas.github.io/normalize.css/) is used, a project by <NAME> and <NAME>.


## Media Queries

###### Break Points: (in pixels)
```
widescreen (w):		1201	- 	greater
desktop (d):		993 	- 	1200
tablet (t):		768 	- 	992
smartphone (s):		481 	- 	767
portrait (p):		0 	- 	480
```

###### Media Queries has two styles:
- Mobile First:	`(order: p -> s -> t -> d -> w)`
- Desktop First: `(order: w -> d -> t -> s -> p)`

```
@param $platformFirst:	mobile | desktop
@param $device:		portrait | smartphone | tablet | desktop | widescreen

Example:
@include cd-media(mobile, smartphone) { }
@include cd-media(desktop, smartphone) { }
```


## Container
We need a containing element to wrap site contents and house our grid system. Containers are nestable.

###### Container Fluid
```
<div class="cd-container-fluid">content</div>
```

###### Container
```
widescreen			1200 - 30	=	1170px
desktop				992 - 30	=	962px

<div class="cd-container">content</div>
```


## Grid System
```
Columns: 			12
Gutter:		 		30px (15px on each side of a column)
Nestable: 			Yes
Offsets:			Yes (cd-col-offset-device-column)
Ordering:			Yes (cd-col-order-device-column)
```

###### Mobile First
```
<div class="row">
  <div class="cd-col cd-col-p-12 cd-col-s-12 cd-col-t-6 cd-col-d-4 cd-col-w-4">content</div>
  <div class="cd-col cd-col-p-12 cd-col-s-12 cd-col-t-6 cd-col-d-8 cd-col-w-8">content</div>
</div>
```

###### Desktop First
```
<div class="row">
  <div class="cd-col cd-col-w-4 cd-col-d-4 cd-col-t-6 cd-col-s-12 cd-col-p-12">content</div>
  <div class="cd-col cd-col-w-8 cd-col-d-8 cd-col-t-6 cd-col-s-12 cd-col-p-12">content</div>
</div>
```


## Properties Functions

###### Color Palette: `cd-palette`
```
A color palette having code values assigned to each color.

@param $palette:	color | background | border | shadow
@param $hex-code:	hexadecimal color code
@param $opacity:	0-1

Example:
color: cd-palette($cd-color, 1000);
background color: cd-palette($cd-background, 2000);
border: 1px solid cd-palette($cd-border, 3000);
box shadow: 1px 1px 1px cd-palette($cd-shadow, 4000);
```

Note: Here you can find the list of colors palette: [Color Palette](color-palette.md)

###### Z Index: `cd-zIndex`
```
A function for the property z-index.

@param $key:	normal | float | modal | loader

Example:
z-index: cd-zIndex(normal);
```

###### Font Family: `cd-fontFamily`
```
A function for the property font-family.

@param $key:	helvetica

Example:
font-family: cd-fontFamily(helvetica);
```

###### Font Size: `cd-fontSize`
```
A function for the property font-size.

@param $key:	h1 | h2 | h3 | h4 | h5 | h6 | p | span

Example:
font-family: cd-fontSize(h1);
```

###### Font Weight: `cd-fontWeight`
```
A function for the property font-weight.

@param $key:	100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Example:
font-family: cd-fontWeight(100);
```

###### Font Height: `cd-lineHeight`
```
A function for the property line-height.

@param $key:	1 | 1.1 | 1.2 | 1.3 | 1.4 | 1.5 | 1.6 | 1.7 | 1.8 | 1.9 | 2

Example:
font-family: cd-lineHeight(1);
```

## Widgets

- Tooltip: [Link](widgets/tooltip.md)
- Modal: [Link](widgets/modal.md)
- Navbar: [Link](widgets/navbar.md)
{'fraction_non_alphanumeric': 0.1902751293925361, 'fraction_numerical': 0.04331244892399891, 'mean_word_length': 3.586508432229856, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 55, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '317286', 'n_tokens_mistral': 3164, 'n_tokens_neox': 2824, 'n_words': 788}