chota - A micro CSS framework

A micro (~3kb) CSS framework.

FWIW, "choṭā" means "small" in Hindi

Features

⚡️ Super light-weight. Just ~3kb (minified + gzipped).
⛔️ No preprocessor, just plug-n-play
📐 Magical 12 column grid
🌈 Easy to extend with CSS variables
🎲 Comes with a handful of components & utilities
✅ Good Semantics
🌙 Easy dark mode switch
🤡 Supports icons out-of-the-box

Getting Started

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

Link this CSS in your HTML:

<link rel="stylesheet" href="https://unpkg.com/chota@latest">

You can get the latest release from GitHub

Download .zip

Install it from npm or yarn

npm install chota

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:

Striped tabled
Input states
Horizontal input alignment by just wrapping them with grouped class
Icons

Customizing

Chota comes with a basic set of CSS variables:

: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;
}

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

@import url(chota.css)

:root {
  --color-primary: #da1d50; /* brand color */
  --grid-maxWidth: 108rem; /* max container width 1080px */
}

/* Other styles..... */

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

  <style>
    body.dark {
      --bg-color: #000;
      --bg-secondary-color: #131316;
      --font-color: #f5f5f5;
      --color-grey: #ccc;
      --color-darkGrey: #777;
    }
  </style>
  <script>
    if (window.matchMedia &&
        window.matchMedia('(prefers-color-scheme: dark)').matches) {
      document.body.classList.add('dark');
    }
  </script>

Components

Grid

The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max width can be controlled by changing the --grid-maxWidth in the :root.

Much like other frameworks, wrap your content in a .container to center it on the page.

Flexible grid

A simple way to build flexible responsive columns:

Add a .row container
Add as many .col elements as you want

Each column will have an equal width, in a row. There is no restriction on number of columns, but it is recommended not to add more than 12 columns in a row.

.col

<div class="row">
  <div class="col"> .col </div>
</div>
<div class="row">
  <div class="col"> .col </div>
  <div class="col"> .col </div>
  <div class="col"> .col </div>
</div>

Sized

You can also specify the size of the columns

Add a .row container
Add a .col-n child where n can be from 1 to 12

Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use .col-4.

.col-1

.col-4

.col-12

<div class="row">
  <div class="col-1"> .col-1 </div>
  <!-- repeat 11 times -->
</div>
<div class="row">
  <div class="col-4"> .col-4 </div>
  <!-- repeat twice -->
</div>
<div class="row">
  <div class="col-12"> .col-12 </div>
</div>

New Responsive grids:

We now have responsive grids that work based on device width.

All columns are 100% for device width < 600px
.col and .col-N for all device sizes >= 600px
.col-N-md for >= 900px sizes
.col-N-lg for >= 1200px sizes

.col-12.col-6-md.col-4-lg

.col-6.col-3-md.col-4-lg

.col.col-6-lg

.col.col-3-lg

<div class="row">
<div class="col-12 col-6-md col-4-lg">
  <div class="card is-center">.col-12.col-6-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
  <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
<div class="col-6 col-3-md col-4-lg">
  <div class="card is-center">.col-6.col-3-md.col-4-lg</div>
</div>
</div>
<div class="row">
<div class="col col-6-lg">
  <div class="card is-center">.col.col-6-lg</div>
</div>
<div class="col col-3-lg">
  <div class="card is-center">.col.col-3-lg</div>
</div>
<div class="col col-3-lg">
  <div class="card is-center">.col.col-3-lg</div>
</div>
</div>

Mix-n-Match

You can use a combination of flexible and sized columns.

When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.

.col-2

auto

.col-3

.col-10

auto

<div class="row">
  <div class="col-2"> .col-2 </div>
  <div class="col-2"> .col-2 </div>
  <div class="col"> auto </div>
  <div class="col-3"> .col-3 </div>
</div>
<div class="row">
  <div class="col-10"> .col-10 </div>
  <div class="col"> auto </div>
</div>
<div class="row">
  <div class="col"> auto </div>
  <div class="col"> auto </div>
  <div class="is-full-width"></div>
  <div class="col"> auto </div>
  <div class="col"> auto </div>
</div>

Pro tip: Create equal-width columns that span multiple rows by inserting a .is-full-width where you want the columns to break to a new line. Here .is-full-width is one of the utility class.

Reverse Direction

Add .reverse to the .row to reverse the column direction.

.col-6

.col-3

<div class="row reverse">
  <div class="col-6">
    <div class="card is-center">.col-6</div>
  </div>
  <div class="col-3">
    <div class="card is-center">.col-3</div>
  </div>
  <div class="col-3">
    <div class="card is-center">.col-3</div>
  </div>
</div>

Buttons

chota includes five predefined button styles, each serving its own semantic purpose. It also applies these styles to input, button elements, see the complete demo.

Default Primary Secondary Dark Error Success Outline Primary outline Secondary outline Dark outline Clear

<a class="button">Default</a>
<a class="button primary">Primary</a>
<a class="button secondary">Secondary</a>
<a class="button dark">Dark</a>
<a class="button error">Error</a>
<a class="button success">Success</a>
<a class="button outline">Outline</a>
<a class="button outline primary">Primary outline</a>
<a class="button outline secondary">Secondary outline</a>
<a class="button outline dark">Dark outline</a>
<a class="button clear">Clear</a>
<button type="button" class="button primary icon">New file 
  <img src="https://icongr.am/feather/file.svg?size=16&amp;color=ffffff" alt="icon">
</button>
<button class="button icon-only">
  <img src="https://icongr.am/feather/search.svg?size=24">
</button>

Nav

A responsive horizontal nav bar that can contain links, tabs, buttons, icons, and a logo.

The .nav container can have 3 parts:

.nav-left
.nav-center
.nav-right

Each of these containers can have a <a> ,.button, .tabs, .brand. Add a active class to show a active link.

<nav class="nav">
  <div class="nav-left">
    <a class="brand" href="#">Brand</a>
    <div class="tabs">
      <a>Link 1</a>
      <a class="active">Link 2</a>
    </div>
  </div>
  <div class="nav-right">
    <a class="button outline">Button</a>
  </div>
</nav>

<nav class="nav">
  <div class="nav-left">
    <a class="active">Link 1</a>
    <a>Link 2</a>
  </div>
  <div class="nav-center">
    <a class="brand">
      <img src="logo.svg" alt="">
    </a>
  </div>
  <div class="nav-right">
      <a>Link 3</a>
      <a>Link 4</a>
  </div>
</nav>

You can also have tabs without a nav bar. Simply make a .tabs container and add links in it. To make tabs go full width just add a is-full class

<nav class="tabs">
  <a>Tab 1</a>
  <a>Tab 2</a>
  <a class="active">Tab 3</a>
</nav>
<nav class="tabs is-full">
  <a>Tab 1</a>
  <a class="active">Tab 2</a>
  <a>Tab 3</a>
</nav>

Card

The .card element is simply a container with a shadow, a border, a radius, and some padding.

You can add a simple header element with a heading tag in it to add a heading to the card.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque cumque velit id.

<div class="card">
  <p>Lorem ipsum ... nostrud exercit.</p>
</div>

Card title

A nisi ullam impedit molestiae, sapiente id, numquam accusantium eius cum, iste eum iusto blanditiis doloribus beatae. Molestias iste explicabo libero nam, voluptas harum ipsum quod velit enim. Quae, cupiditate?

<div class="card">
  <header>
    <h4>Card title</h4>
  </header>
  <p>A nisi ullam ... cupiditate?</p>
  <footer class="is-right">
    <a class="button primary">Submit</a>
    <a class="button">Cancel</a>
  </footer>
</div>

Tag

Labels to insert anywhere! They come in 3 sizes — small, medium, large

OneTwoThreeSmallLarge

<p>
  <span class="tag">One</span>
  <span class="tag">Two</span>
  <span class="tag">Three</span>
  <span class="tag is-small">Small</span>
  <span class="tag is-large">Large</span>
</p>

Utilities

You can apply these helper classes to almost any element, in order to alter its style.

text-primary - Primary text
text-light - Light text
text-white - White text
text-dark - Dark text
text-grey - Grey text
text-error - Error text
text-success - Success text
bg-primary - primary background
bg-light - Light background
bg-dark - Dark background
bg-grey - Grey background
bg-error - Error background
bg-success - Success background
bd-primary - primary border
bd-light - Light border
bd-dark - Dark border
bd-grey - Grey border
bd-error - Error border
bd-success - Success border
pull-right - floats an element to the right
pull-left - floats an element to the left
text-center - center aligns text
text-left - left aligns text
text-right - right aligns text
text-justify - justify aligns text
text-uppercase - text to uppercase
text-lowercase - text to lowercase
text-capitalize - capitalizes text
is-full-screen - makes the element 100% view height
is-full-width - make the element 100% width
is-vertical-align - vertically centers element using flex
is-horizontal-align - horizontal centers element using flex
is-center - centers element using flex
is-right - right aligns element using flex
is-left - left aligns element using flex
is-fixed - fixed positioned element
is-paddingless - removes any padding
is-marginless - removes any margin
is-rounded - make the element round
clearfix - clears the floats
is-hidden - hides the element completely
hide-xs - hides the element for screens <600px
hide-sm - hides the element for screens >=600px and <900px
hide-md - hides the element for screens >=900px and <1200px
hide-lg - hides the element for screens >=1200px
hide-pr - hides the element for printing

Details

You can have a <details> to defines a toggle-able block of content with a summary and additional details.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.

This can be coupled to a .dropdown and a couple of .button and .card classes to defines a dropdown button.

Icons

While you are free to use any icon library that you like, 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 📢