• ⚡️  Super light-weight. Just 3kb (minified + gzipped).
• ⛔️  This is the scss port so sass is your preprocessor.
• 📐  Grid number can be changed via variable.
• 🌈  Easy to extend with sass variables
• 🎲  Comes with a handful of components & utilities
• ✅  Good Semantics

Get started

npm i chota-scss

While you can compile the scss with buildsass script, what you really should do is to import scss/chota into your main scss file and compile it with your custom css. Take a look at the example config below.

Variables List

// sizes
$grid-columns: 12;
$grid-maxWidth: 120rem;
$grid-gutter: 2rem;

// colors
$primary-color: #1a9f60;
$lightGrey-color: #d2d6dd;
$darkGrey-color: #84868b;
$red-color: #c62424;

// typography
$base-font-size: 62.5%;
$base-line-height: 1.6;
$font-family: -apple-system, BlinkMacSystemFont, Avenir, 'Avenir Next', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
$monospace-font-family: monaco, 'Consolas', 'Lucida Console', monospace;

// other
$base-box-shadow: 0 0 2px rgba(0, 0, 0, 0.4);
$base-transition: all 0.2s ease;

If you want to change the default variables, your main scss file should be something like this:

@import '<your-vars-override>';
@import '<path-to-chota>/scss/chota';
@import '<your-custom-css>';

Browsers support

| IE / Edge | Firefox | Chrome | Safari | Opera | iOS Safari | Chrome for Android | | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Edge 16+ | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions | last 2 versions |

© Jenil Gogari 2017-present. Code released under the MIT license.