--- --- chota - A micro CSS framework

Features

Getting Started

All you need is 1 CSS file, chota.css to be included in your webpage.


Link this CSS in your HTML:

{% highlight html %}{% endhighlight %}

You can get the latest release from GitHub

Download .zip


Install it from npm or yarn

{% highlight bash %}npm install chota{% endhighlight %}

Docs


Chota is dead simple to use. It doesn't require learning a lot of class names like other frameworks. It applies a few basic styles to the HTML following the HTML Semantics.

Here is a demo of the basic HTML elements. A few addons that Chota provides out-of-the-box for some elements are:


Customizing

Chota comes with a basic set of CSS variables:

{% highlight css %} :root { --bg-color: #ffffff; --bg-secondary-color: #f3f3f6; --color-primary: #14854F; --color-lightGrey: #d2d6dd; --color-grey: #747681; --color-darkGrey: #3f4144; --color-error: #d43939; --color-success: #28bd14; --grid-maxWidth: 120rem; --grid-gutter: 2rem; --font-size: 1.6rem; --font-color: #333333; --font-family-sans: sans-serif; --font-family-mono: monaco, "Consolas", "Lucida Console", monospace; } {% endhighlight %}

To override the variables, just add them to your :root selector after importing chota.css

{% highlight css %} @import url(chota.css) :root { --color-primary: #da1d50; /* brand color */ --grid-maxWidth: 108rem; /* max container width 1080px */ } /* Other styles..... */ {% endhighlight %}

Addtionally, you can add dark mode to your site, to support devices that prefer dark mode.

{% highlight html %} {% endhighlight %}

Components

{% include grid.html %}
{% include buttons.html %}
{% include navs.html %}
{% include card.html %}
{% include tag.html %}
{% include utilities.html %}

Icons

While you are free to use any icon library that you, I'd just like to drop a link to Icongram here. It's the quickest way you can add icons to any website.



Give a shout-out 📢