All you need to do is add the custom.css library to your html file. In the head tag just add these lines of code:

<style>
    :root {
        --kg-bg: rgb(25, 32, 40);
        --kg-fg: rgb(225, 225, 245);
        --kg-fg-darker: rgb(190, 190, 190);

        --kg-primary: rgb(30, 172, 244);

        --kg-font: Helvetica, sans-serif;
    }
</style>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kgsensei/[email protected]/custom.min.css">

As you can probably guess, the link tag includes the customs.css library, the other style tag defined defaults for the customs.css library to use, it's very important that you do this step or the customs.css library won't work. Before you start the documentation, you should know that customs.css takes heavy inspiration from Bootstrap. The reason it was created is because to customize Bootstrap you have to do custom builds and stuff. customs.css is meant to be a highly customizable and convenient replacement. No pre-compiling required. With that being said, it does sacrifice some optimization for the convenience. We feel that the DevX payoff is worth it though.

Margins in customs.css are almost exactly like Bootstrap. You have the `m` prefix, then a hyphen, then the value suffix. For example:

<div class="m-2">Hello World!</div>

The main difference is the values, we find Bootstrap can be limiting sometimes when we need to make very "empty" designs, so there are some extra margin values. These values are the same for padding (p-1 is .5rem, p-2 is 1rem, p-3 is 1.5rem, etc.)

.m-0 {margin: 0;}
.m-1 {margin: .5rem;}
.m-2 {margin: 1rem;}
.m-3 {margin: 1.5rem;}
.m-4 {margin: 2rem;}
.m-5 {margin: 2.5rem;}
.m-6 {margin: 5rem;}
.m-7 {margin: 10rem;}
.m-8 {margin: 15rem;}

Additionally, you can use `mt` for margin-top, `mb` for margin-bottom, `ms` for margin-start/margin-left, and `me` for margin-end/margin-right. Of course, all of the margin properties are reflected on padding, with all the same values. Just replace `m` with `p`. For example, `pt` for padding-top, `pb` for padding-bottom, etc.

Another helpful feature of customs.css is the existance of zero values, if you want to remove the margin on top of an h1 tag (added by default from the browser) you can add the `mt-0` class to it. To apply padding or margin on the top and bottom at the same time you can use {p|m}y-{0<->8} and for both sides {p|m}x-{0<->8}

Again, similar to Bootstrap, you can adjust the font size using `fs-{1<->6}`. 1 being 1rem, 2 is 1.1rem, 3 is 1.2rem, 4 is 1.3rem, etc. There are also header override classes `h{1<->3}`. h1 being 2.7rem, h2 is 2rem, and h3 is 1.6rem. Below is an example with all of the different font sizes.

Buttons are an important part of any website. There are a bunch of different button customizations provided by customs.css. Use the `btn` class to add a pointer to any element.

<button class="btn">Hello World!</button>

Output: Hello World!

Great! Let's make it a little better now.

Use `btn-outline` or `btn-full` to determine the style of button to be shown.
Outline Example:

<button class="btn btn-outline">Hello World!</button>

Output: Hello World!

But wait, there's no outline?! This is because we haven't defined a theme color for the button! Let's make this button our primary color, remember setting `--kg-primary` in the setup?
Outline Primary Example:

<button class="btn btn-outline primary">Hello World!</button>

Output: Hello World!
Full Primary Example:

<button class="btn btn-full primary">Hello World!</button>

Output: Hello World!

You can also adjust the size of the buttons.

<button class="btn btn-outline primary btn-sm">Hello World!</button>
<button class="btn btn-outline primary btn-lg">Hello World!</button>

Output: Hello World! Hello World!

You can also add more margin and padding to buttons but we won't show an example because you can figure that one out.

What if I want to add my own button color classes?
It's actually really easy! In fact, we did that on ap.kgsensei.dev!
Code:

.custom-btn-color {
    --th-color: #FFCE42;
}

<button class="btn btn-outline custom-btn-color">Hello World!</button>

Output: Hello World!

All you have to do is set the `--th-color` variable in a css class and it will automatically style the button!

One last thing before we end the buttons section. You can make links look like buttons. All you need to do is add the button classes to an `a` tag. Custom color classes will work the same on `a` tags with the button classes.

<a href="#" class="btn btn-outline primary">This is a link, but looks like a button!</a>

This is a link, but looks like a button!

If you don't add any classes to a link then it will appear normally, like this. But if you add the `link` class then it looks like this! That's boring though, and it blends in with normal text too much, now that we added the link class, we can add color classes, just like buttons! For this example we'll use the same `custom-btn-color` class from the buttons section.

<a href="#links" class="link custom-btn-color">Example Link</a>

Output: Example Link

There's also a class that can remove all the effects of a link, it's advised not to use this under most circumstances as it lowers accessibility of your website.

<a href="#links" class="txt-normal">Example Link</a>

Output: Example Link

Using the `border-0` class will force no border no matter what, this is useful for things like input boxes.
For most of this example we'll use a 100x100px div. This one has the `border-1` class.

<div class="border-1" style="width:100px;height:100px;"></div>

If it isn't obvious, the `border-1` class adds a border with a width of 1px to the div. Now let's try `border-3`.

<div class="border-3" style="width:100px;height:100px;"></div>

The border classes you can use are `border-{1-5}` with `border-1` being 1px, `border-2` being 2px, etc.
Great, now lets try adding some radius to it! We'll start with `radius-1`.

<div class="border-1 radius-1" style="width:100px;height:100px;"></div>

`radius-1` will set the border radius to .2rem, `radius-2` is .4rem, `radius-3` is .6rem, etc. Let's try `radius-6`!

<div class="border-1 radius-6" style="width:100px;height:100px;"></div>

Radius-6 is the highest you can go, but let's say you're working on a social media platform and need circular profile pictures? What then? Just add the `circle` class to the div (or img for the example).

<div class="border-1 circle" style="width:100px;height:100px;"></div>

Just like Bootstrap, you can use `d-block` or something like that to define the display property. Currently values supported are: `d-flex`, `d-grid`, `d-block`, `d-inline`.

We probably don't need to talk about display anymore, if you know css that should be pretty straight forward. If you're using `d-flex` and you need a column for some reason you can use `flex-col`.

There is also a very powerful center class, called `center`. It doesn't work 100% of the time but it's been tested in flexboxes, grid layouts, and just in the body tag.

This part is going to be brief since these features aren't really enough to justify their own section, we'll only briefly cover each feature instead of doing a deep dive in them.

As of v1.1 image shape has been deprecated Image sizing (format .img-{sm|md|lg} ):

.img-sm {
    width: 4rem;
    height: 4rem;
}
.img-md {
    width: 8rem;
    height: 8rem;
}
.img-lg {
    width: 15rem;
    height: 15rem;
}

No wrap:

<p class="no-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

Width:

.w-100 {
    width: 100%;
}
.w-75 {
    width: 75%;
}
.w-50 {
    width: 50%;
}
.w-25 {
    width: 25%;
}