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
Install it from npm
or yarn
npm install chota
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:
grouped
classChota 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>
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.
A simple way to build flexible responsive columns:
.row
container.col
elements as you wantEach 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.
<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>
You can also specify the size of the columns
.row
container.col-n
child where n can be from 1 to 12Each 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
.
<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>
We now have responsive grids that work based on device width.
.col
and .col-N
for all device sizes >= 600px.col-N-md
for >= 900px sizes.col-N-lg
for >= 1200px sizes<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>
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.
<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.
Add .reverse
to the .row
to reverse the column direction.
<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>
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>
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>
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>
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 texttext-grey
- Grey texttext-error
- Error text
text-success
- Success text
bg-primary
-
primary background
bg-light
- Light background
bg-dark
- Dark backgroundbg-grey
- Grey backgroundbg-error
- Error background
bg-success
-
Success background
bd-primary
- primary border
bd-light
- Light borderbd-dark
- Dark borderbd-grey
- Grey borderbd-error
- Error borderbd-success
- Success border
pull-right
- floats an element to the rightpull-left
- floats an element to the lefttext-center
- center aligns texttext-left
- left aligns texttext-right
- right aligns texttext-justify
- justify aligns texttext-uppercase
- text to uppercasetext-lowercase
- text to lowercasetext-capitalize
- capitalizes textis-full-screen
- makes the element 100% view heightis-full-width
- make the element 100% widthis-vertical-align
- vertically centers element using flex
is-horizontal-align
- horizontal centers element using flex
is-center
- centers element using flexis-right
- right aligns element using flexis-left
- left aligns element using flexis-fixed
- fixed positioned elementis-paddingless
- removes any paddingis-marginless
- removes any marginis-rounded
- make the element roundclearfix
- clears the floatsis-hidden
- hides the element completelyhide-xs
- hides the element for screens <600pxhide-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 >=1200pxhide-pr
- hides the element for printingYou 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.
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.