/chota-scss

SCSS port of Chota

Primary LanguageHTMLMIT LicenseMIT



A really small CSS framework


  • ⚡️  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
IE / Edge		 Firefox
Firefox		 Chrome
Chrome		 Safari
Safari		 Opera
Opera		 iOS Safari
iOS Safari		 Chrome for Android
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.