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.


Customizing

Chota comes with a basic set of CSS variables:

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

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

@import url(chota.css)

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

/* Other styles..... */

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>

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.


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 outline">Outline</a>
<a class="button outline primary">Primary outline</a>
<a class="button outline secondary">Secondary outline</a>
<a class="button clear">Clear</a>


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.

  • pull-right - floats an element to the right
  • pull-left - floats an element to the left
  • is-text-center - center aligns text
  • is-text-left - left aligns text
  • is-text-right - right aligns text
  • is-text-uppercase - text to uppercase
  • is-text-lowercase - text to lowercase
  • is-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
  • clearfix - clears the floats
  • is-hidden - hides the element completely
  • hide-phone - hides the element for screens <480px
  • hide-tablet - hides the element for screens <768px

Give a shout-out