chota - A small CSS framework

A small (3kb) CSS framework.

Features

⚡️ Super light-weight. Just 3kb (minified + gzipped).
⛔️ No preprocessor, just plug-n-play
📐 Magical 12 column grid
🌈 Easy to extended with CSS variables
🎲 Comes with a handful of components & utilities
✅ Good Semantics

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 download it from Github or 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 Semenatics.

Here is a demo.

Customizing

Chota comes with a basic set of CSS variables:

{% highlight css %} :root { --primary-color: #1a9f60; --lightGrey-color: #ddd; --grid-maxWidth: 120rem; --grid-gutter: 1.5rem; --font-family: "Helvetica Neue", sans-serif; } {% endhighlight %}

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

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