@reterial/theme
Version:
This is themeing for reterial design.
127 lines (96 loc) • 3.54 kB
Markdown
# @reterial/theme
This is themeing for reterial design.
## What is the story of reterial ?
Reterial is [*jaypy.code*](https://jaypy.ir) design! When i was a junior frontend developer, i used [Material Design](https://material.io) to design my websites. I've used this design for a lots of websites and applications such as [Meydoon](https://git.rayda.ir/meydon) or [Kateb](https://git.rayda.ir/jaypy/kateb-web) or [Raybuy](https://git.rayda.ir/jaypy/raybuy-home-page) and other things. When i used them, i have to customize and change some styles of the design and my coworkers and friends said you shit on it (Take it good, they were my firends :D). And now i have my design to show them it's funny.
## How to build ?
You can use *npm* or *yarn* to complie all scss file to css in dist folder with:
```
npm run build
```
## How to start developing ?
I've design some scripts to start developing by runing *serve* to run a http server on port *5000* and a script to watch 'src' folder to refresh all built css on port *3000* with 'socket.io'.
### Run the http server by:
```
npm run serve
```
### Watch on source file change by:
```
npm run build:watch
```
# How to use ?
There is two way to themeing. You can use pre built themes or make it from your palette.
## 1) Link reterial theme
You can import themes from pre built css with CDNs.
```
<link type="stylesheet" href="/reterial/theme/dist/theme name.min.css" />
```
## 2) Make yours
You can also make your custom palette and theme with ```@reterial/theme``` package.
### How to install ?
You can use with *npm* or *yarn* to install ```@reterial/theme``` package.
```
npm i @reterial/theme
```
or use yarn
```
yarn add @reterial/theme
```
### How to use ?
After installing the package, in your *scss* or *sass* file import core of Reterial theme and make your palette and set it with a name.
#### With @reterial/color
```
@import "~@reterial/theme/core.scss";
@include ReterialTheme("theme name", ReterialPalette());
```
#### Without *@reterial/color*
```
@import "~@reterial/theme/core.min.scss";
@include ReterialTheme("theme name", ());
```
#### Warning
If you use ``` ~@reterial/theme/core.scss ```, it gives you *ReterialPalette* function and you must install *@reterial/color* (You don't need beacuse i've added to dependencies) else you just have ReterialTheme mixin.
## Call it!
You should call it with a html tag on body element. You must add *reterial-theme* with your theme name as a tag on body element.
```
In: HTML
...
<body reterial-theme="theme name">
...
</body>
...
```
# Accessibility
You should know how to use defained mixins and functions in @reterial/theme.
## ReterialTheme
``` ReterialTheme ``` is a mixin and gets a *theme name* and *ReterialPalette* (or a map).
```
In: scss
$my-palette: (
"primary": black
);
@inculde ReterialTheme("theme name", $my-palette);
```
## ReterialPalette
``` ReterialPalette ``` is a function to merge default palette with your custom palette. It use *@reterial/color* by default so you must installed *@reterial/color* if you use this function but you don't need to import it.
```
In: scss
$my-palette: ReterialPalette(
(
"primary": $reterial-blue-500,
"body": $reterial-ash-200
)
);
```
# CDNs
### jsdelivr
```
https://cdn.jsdelivr.net/npm/@reterial/theme@latest/dist/default.min.css
```
### unpkg
```
https://unpkg.com/@reterial/theme@latest/dist/default.min.css
```
### github
```
https://raw.githubusercontent.com/reterial/theme/main/dist/default.min.css
```