SASS port of Chota

• ⚡️  Super light-weight. Just ~3kb (minified + gzipped).
• 📐  Magical 12 column grid (can be customized)
• 🌈  Easy to extend with SCSS maps
• 🎲  Comes with a handful of components & utilities
• ✅  Good Semantics
• 🤡  Supports icons from Icongram

Get started

npm or yarn:

npm install chotas

yarn add chotas

SASS support

This SASS port of chota is designed for easy theming with SASS maps. This allows this port to be marginally smaller since it relies on colors directly and doesn't need to use the extensive CSS variable syntax.

To use the default color scheme:

@import '~chotas';

Use with custom maps:

@use 'sass:map';
@import 'chotas/sass/variables';

// Create your own color map
$custom-color-map: (
    // custom primary color
    'primary': #404147
);

// create your own layout map
$custom-layout-map: (
    // change to 4 col system
    'grid-cols': 4
);

// Merge the maps
$color-map: map.merge($color-map, $custom-color-map);
$layout-map: map.merge($layout-map, $custom-layout-map);

@import 'chotas/sass/utilities';

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 |

Contributing

Welcome! Please see our contributing guidelines.

License

SASS Port:

© Cobalt 2021-present. Code released under the MIT license.

Derived from Chota:

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