separate documentation in DOCS.md
This commit is contained in:
parent
f7f8a97165
commit
6a3f3559d9
2 changed files with 81 additions and 75 deletions
76
DOCS.md
Normal file
76
DOCS.md
Normal file
|
@ -0,0 +1,76 @@
|
||||||
|
## Font size
|
||||||
|
|
||||||
|
### Configuration
|
||||||
|
|
||||||
|
The following values can be used to configure the font size:
|
||||||
|
|
||||||
|
```css
|
||||||
|
:root {
|
||||||
|
--text-scale: 1.2;
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
Building on this value, these variables are available, where `--text-sm` is slightly less than `1em` and `--text-md` is slightly more.
|
||||||
|
|
||||||
|
```css
|
||||||
|
--text-xs
|
||||||
|
--text-sm
|
||||||
|
--text-md
|
||||||
|
--text-lg
|
||||||
|
--text-xl
|
||||||
|
--text-xxl
|
||||||
|
--text-xxxl
|
||||||
|
```
|
||||||
|
|
||||||
|
## Spacing
|
||||||
|
|
||||||
|
Spacing is best show with the actual classes. The basic principle is, whenever the number in the name (eg. `--spacing-3`) doubles, the corresponding spacing should also double (`--spacing-6`).
|
||||||
|
|
||||||
|
```css
|
||||||
|
--spacing-0: 0;
|
||||||
|
--spacing-px: 1px;
|
||||||
|
--spacing-05: 0.125rem;
|
||||||
|
|
||||||
|
/* 1 */
|
||||||
|
--spacing-1: 0.25rem;
|
||||||
|
--spacing-2: 0.5rem;
|
||||||
|
--spacing-3: 0.75rem;
|
||||||
|
--spacing-4: 1rem;
|
||||||
|
--spacing-5: 1.25rem;
|
||||||
|
--spacing-6: 1.5rem;
|
||||||
|
--spacing-7: 1.75rem;
|
||||||
|
--spacing-8: 2rem;
|
||||||
|
--spacing-9: 2.25rem;
|
||||||
|
--spacing-10: 2.5rem;
|
||||||
|
|
||||||
|
/* 2 */
|
||||||
|
--spacing-12: 3rem;
|
||||||
|
--spacing-14: 3.5rem;
|
||||||
|
--spacing-16: 4rem;
|
||||||
|
--spacing-18: 4.5rem;
|
||||||
|
--spacing-20: 5rem;
|
||||||
|
|
||||||
|
/* 4 */
|
||||||
|
--spacing-24: 6rem;
|
||||||
|
--spacing-28: 7rem;
|
||||||
|
--spacing-32: 8rem;
|
||||||
|
--spacing-36: 9rem;
|
||||||
|
--spacing-40: 10rem;
|
||||||
|
|
||||||
|
/* 8 */
|
||||||
|
--spacing-48: 12rem;
|
||||||
|
--spacing-56: 14rem;
|
||||||
|
--spacing-64: 16rem;
|
||||||
|
--spacing-80: 20rem;
|
||||||
|
--spacing-96: 24rem;
|
||||||
|
```
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
|
||||||
|
Colors are divided in a set of different grays, ranging from more cold colors to a neutral set (which is the default) to warmer colors, and a palette of colors.
|
||||||
|
|
||||||
|
Every color has 10 values, `--<color>-50` and from `--<color>-100` and with `--<color>-900`.
|
||||||
|
|
||||||
|
The included colors are taken from the great [Tailwind.css](https://tailwindcss.com).
|
||||||
|
|
||||||
|
![Tailwind Palette](./media/tailwind.png)
|
78
README.md
78
README.md
|
@ -2,12 +2,11 @@
|
||||||
|
|
||||||
An abstract baseline css framework
|
An abstract baseline css framework
|
||||||
|
|
||||||
|
|
||||||
## What is it?
|
## What is it?
|
||||||
|
|
||||||
Ghost is not a framework, it'S merely a set of css variables which provide a nice foundation for small css projects and constistent styling.
|
Ghost is not a framework, it'S merely a set of css variables which provide a nice foundation for small css projects and constistent styling.
|
||||||
|
|
||||||
The premise of ghost is that it should **not be visible** in your project.
|
The premise of ghost is that it should **not be visible** in your project since it only consists of css variables. A the same time, these variables are available everywhere in your project, even in the live site!
|
||||||
|
|
||||||
## What does it include?
|
## What does it include?
|
||||||
|
|
||||||
|
@ -17,79 +16,10 @@ Ghost includes the following components:
|
||||||
- Spacing
|
- Spacing
|
||||||
- Colors
|
- Colors
|
||||||
|
|
||||||
## Font size
|
## How to Use it
|
||||||
|
|
||||||
### Configuration
|
In your project, include it like:
|
||||||
|
|
||||||
The following values can be used to configure the font size:
|
|
||||||
|
|
||||||
```css
|
```css
|
||||||
:root {
|
@import "ghost-css/src/app.css"
|
||||||
--text-scale: 1.2;
|
|
||||||
}
|
|
||||||
```
|
```
|
||||||
|
|
||||||
Building on this value, these variables are available, where `--text-sm` is slightly less than `1em` and `--text-md` is slightly more.
|
|
||||||
|
|
||||||
```css
|
|
||||||
--text-xs
|
|
||||||
--text-sm
|
|
||||||
--text-md
|
|
||||||
--text-lg
|
|
||||||
--text-xl
|
|
||||||
--text-xxl
|
|
||||||
--text-xxxl
|
|
||||||
```
|
|
||||||
|
|
||||||
## Spacing
|
|
||||||
|
|
||||||
Spacing is best show with the actual classes. The basic principle is, whenever the number in the name (eg. `--spacing-3`) doubles, the corresponding spacing should also double (`--spacing-6`).
|
|
||||||
|
|
||||||
```css
|
|
||||||
--spacing-0: 0;
|
|
||||||
--spacing-px: 1px;
|
|
||||||
--spacing-05: 0.125rem;
|
|
||||||
|
|
||||||
/* 1 */
|
|
||||||
--spacing-1: 0.25rem;
|
|
||||||
--spacing-2: 0.5rem;
|
|
||||||
--spacing-3: 0.75rem;
|
|
||||||
--spacing-4: 1rem;
|
|
||||||
--spacing-5: 1.25rem;
|
|
||||||
--spacing-6: 1.5rem;
|
|
||||||
--spacing-7: 1.75rem;
|
|
||||||
--spacing-8: 2rem;
|
|
||||||
--spacing-9: 2.25rem;
|
|
||||||
--spacing-10: 2.5rem;
|
|
||||||
|
|
||||||
/* 2 */
|
|
||||||
--spacing-12: 3rem;
|
|
||||||
--spacing-14: 3.5rem;
|
|
||||||
--spacing-16: 4rem;
|
|
||||||
--spacing-18: 4.5rem;
|
|
||||||
--spacing-20: 5rem;
|
|
||||||
|
|
||||||
/* 4 */
|
|
||||||
--spacing-24: 6rem;
|
|
||||||
--spacing-28: 7rem;
|
|
||||||
--spacing-32: 8rem;
|
|
||||||
--spacing-36: 9rem;
|
|
||||||
--spacing-40: 10rem;
|
|
||||||
|
|
||||||
/* 8 */
|
|
||||||
--spacing-48: 12rem;
|
|
||||||
--spacing-56: 14rem;
|
|
||||||
--spacing-64: 16rem;
|
|
||||||
--spacing-80: 20rem;
|
|
||||||
--spacing-96: 24rem;
|
|
||||||
```
|
|
||||||
|
|
||||||
## Colors
|
|
||||||
|
|
||||||
Colors are divided in a set of different grays, ranging from more cold colors to a neutral set (which is the default) to warmer colors, and a palette of colors.
|
|
||||||
|
|
||||||
Every color has 10 values, `--<color>-50` and from `--<color>-100` and with `--<color>-900`.
|
|
||||||
|
|
||||||
The included colors are taken from the great [Tailwind.css](https://tailwindcss.com).
|
|
||||||
|
|
||||||
![Tailwind Palette](./media/tailwind.png)
|
|
Loading…
Reference in a new issue