--- --- 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 Semenatics.

Here is a demo of the basic HTML elements.


Customizing

Chota comes with a basic set of CSS variables:

{% highlight css %} :root { --primary-color: #1a9f60; --lightGrey-color: #ddd; --darkGrey-color: #888; --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 %}

Components

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

Give a shout-out