Features

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:


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>

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
.col
.col
.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-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-1
.col-4
.col-4
.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-6.col-3-md.col-4-lg
.col.col-6-lg
.col.col-3-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
.col-2
auto
.col-3
.col-10
auto
auto
auto
auto
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
.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.

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


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.

Read more

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, 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 📢