## ▶️ Getting started
### 🚀 Import using a CDN
Just link the `lyt.css` file or it minified version.
```html
```
You can also use each modules individually.
```html
```
### 📦 Install with a package manager
```sh
npm install lyt-css
```
### ⚙️ Configure
Lyt is designed to be easily configurable using SASS/SCSS.
When using a CDN or local download, you can import the `scss` files by loading them from the `/scss` directory.
```scss
@import "path/to/lyt/scss/lyt.scss";
/* Or import individual modules */
@import "path/to/lyt/scss/grid/flex.scss";
```
Then you just need to import your configuration file before you import the lyt module files.
```scss
@import "path/to/config";
@import "path/to/lyt/scss/lyt.scss";
```
You can find a template config file where all variables are commented with the default values in `/scss/_config.scss`. This configuration file is the default configuration, it is imported by default when building the library.
## 📚 Documentation
**This documentation will be moved in the future when the documentation website will open.**
Lyt is build from multiple modules:
- [Grid](#grid)
- [Flex](#flex)
- [Utilities](#utilities)
- [Display](#display)
- [Float](#float)
- [Margin](#margin)
- [Padding](#padding)
- [Width](#width)
**All the documentation uses the default configuration.**
### Grid
#### Flex
Used to manage the layout easily, the flex grid uses a classic system of row and columns and can be fully customized.
Create rows and columns using `row` and `column`.
By default columns take 100% of the available width. You can constraint a column width by using the `-` class (`` being the amount of space out of 12 taken by the column).
Add the `gap` class to a row to add gaps between columns.
```html
6 of 12
6 of 12
```
[See example live](https://jsfiddle.net/hpax1ksL/)
You can also specify a breakpoint to a column by using the `-` class instead (e.g. `sm-5`).
| Breakpoint | Value |
|------------|--------|
| sm | 544p |
| md | 768px |
| lg | 1012px |
| xl | 1280px |
By specifying multiple breakpoints to a column, the column will adapt automatically.
```html
```
[See example live](https://jsfiddle.net/ogarwz7v/)
You can offset columns by using the `offset-` class. You can also specify breakpoints by using the `offset--` class.
```html
Centered column
```
[See example live](https://jsfiddle.net/sr2c0w96/)
### Utilities
#### Display
Use the `display-` class to change the display of an element.
```html
...
```
| Syntax | Mode |
|--------|--------------|
| b | block |
| i | inline |
| ib | inline-block |
| none | none |
#### Float
Use the `float` classes to add float to an element.
```html
...
```
| Syntax | Value |
|--------|-------|
| l | left |
| r | right |
Clear after using floats with the `float-clear` class on an element.
```html
...
```
#### Margin
Use the `margin-` class to add a margin to an element (`` being the name of the value to the margin).
```html
...
```
Default configuration uses the following values for margin:
| Syntax | Value |
|--------|-------|
| a | auto |
| xs | 4px |
| s | 8px |
| m | 16px |
| l | 24px |
| xl | 32px |
| xxl | 40px |
By default, the margin value is applied to all sides. You can specify sides with `margin--` (e.g. `margin-t-xl`).
```html
...
```
| Syntax | Sides |
|--------|----------------|
| t | top |
| l | left |
| b | bottom |
| r | right |
| tb | top and bottom |
| lr | left and right |
#### Padding
Padding classes are used like margin classes but add padding instead.
```html
...
```
#### Width
You can use the `width-` class to change the width of an element.
```html
...
```
| Syntax | Values |
|--------|-----------------|
| 25 | 25% |
| 33 | calc(100% / 3) |
| 50 | 50% |
| 75 | 75% |
| 100 | 100% |
You can also use the `min-width-` or `max-width-`.
```html
...
```
#### Mixins
Mixins can only be used in SASS/SCSS.
##### Breakpoint
The breakpoint mixin can be used to declare classes/properties applied at specific breakpoints.
```scss
.my-text {
font-size: 16px;
@include breakpoint(md) {
font-size: 24px;
}
}
```
## Contributing
Any help and contribution is always welcome, feel free to submit issues and/or contribute to the project.
1. Fork the project
2. Create your feature or fix Branch (`git checkout -b feature/feature-name` or `git checkout -b fix/fix-name`)
3. Commit your changes using [semantic messages](https://www.conventionalcommits.org/) (`git commit -m "feat/fix: Add some feature or fix"`)
4. Push to the branch (`git push origin feature/feature-name` or `git push origin fix/fix-name`)
5. Open a pull request
## License
Lyt is distributed under the MIT License. See `LICENSE` for more information.
## Contact
[](https://www.buymeacoffee.com/ColinEspinas)
[](https://www.linkedin.com/in/colin-espinas-9739b8178/l)
Colin Espinas - [Website](https://colinespinas.com) - contact@colinespinas.com
Project link: [https://github.com/ColinEspinas/lyt](https://github.com/ColinEspinas/lyt)
---
_Source: https://npm.io/package/lyt-css · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._
