2017-04-01 02:36:04 +03:00
---
---
2017-04-01 01:29:57 +03:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "utf-8" >
< meta http-equiv = "X-UA-Compatible" content = "IE=Edge" >
2017-11-17 04:19:15 +03:00
< title > chota - A micro CSS framework< / title >
2017-04-01 01:29:57 +03:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2020-05-16 23:49:34 +03:00
< link rel = "stylesheet" href = "https://unpkg.com/chota" >
2020-05-16 17:25:33 +03:00
<!-- for dev -->
2020-05-16 23:49:34 +03:00
<!-- <link rel="stylesheet" href="./dist/chota.css"> -->
2017-04-01 01:29:57 +03:00
< link rel = "stylesheet" href = "./doc-styles.css" >
2017-04-03 06:30:33 +03:00
< link rel = "icon" type = "image/png" href = "favicon.png" / >
2017-04-01 01:29:57 +03:00
< / head >
2017-04-02 10:48:47 +03:00
< body id = "top" >
2017-04-01 01:29:57 +03:00
< div class = "container" >
< div class = "hero is-full-screen" >
< div class = "logo is-center is-vertical-align" >
< img src = "./logo.svg" alt = "" >
2019-03-23 21:12:00 +03:00
< h3 > A < strong > micro< / strong > (~3kb) CSS framework.< / h3 >
2018-07-30 00:57:15 +03:00
< small > < em > FWIW, "choṭā" means "small" in Hindi< / em > < / small >
2017-04-01 01:29:57 +03:00
< / div >
2017-04-03 06:30:33 +03:00
< nav class = "tabs is-center" >
< a href = "#features" > features< / a >
< a href = "#start" > start< / a >
< a href = "#docs" > docs< / a >
2018-08-15 02:57:37 +03:00
< a href = "https://github.com/jenil/chota" > GitHub< / a >
2020-05-16 23:38:29 +03:00
< a href = "javascript:void(0)" id = "theme-switch" onclick = "switchMode(this)" > ☀️< / a >
2017-04-03 06:30:33 +03:00
< / nav >
2017-04-01 01:29:57 +03:00
< / div >
2017-04-02 10:48:47 +03:00
2017-04-01 01:29:57 +03:00
< section id = "features" >
< h2 > Features< / h2 >
< ul >
2019-03-23 21:12:00 +03:00
< li > ⚡️ Super light-weight. Just ~3kb (minified + gzipped).< / li >
2017-04-01 01:29:57 +03:00
< li > ⛔️ No preprocessor, just plug-n-play< / li >
2017-04-03 06:55:39 +03:00
< li > 📐 Magical 12 column < a href = "#grid" > grid< / a > < / li >
2017-11-16 18:19:53 +03:00
< li > 🌈 Easy to < a href = "#customizing" > extend< / a > with CSS variables< / li >
2017-04-03 06:30:33 +03:00
< li > 🎲 Comes with a handful of < a href = "#components" > components< / a > & < a href = "#utilities" > utilities< / a > < / li >
2017-04-01 01:29:57 +03:00
< li > ✅ Good Semantics< / li >
2020-05-16 21:12:51 +03:00
< li > 🌙 Easy dark mode switch< / li >
2018-07-30 00:57:15 +03:00
< li > 🤡 Supports < a href = "#icons" > icons< / a > out-of-the-box< / li >
2017-04-01 01:29:57 +03:00
< / ul >
< / section >
2017-04-02 10:48:47 +03:00
2017-04-01 01:29:57 +03:00
< section id = "start" >
< h2 > Getting Started< / h2 >
< p > All you need is 1 CSS file, < code > chota.css< / code > to be included in your webpage.< / p >
2017-04-02 10:48:47 +03:00
< br >
2017-04-01 01:29:57 +03:00
< p > Link this CSS in your HTML:< / p >
2017-04-03 06:38:11 +03:00
{% highlight html %}< link rel = "stylesheet" href = "https://unpkg.com/chota@latest" > {% endhighlight %}
2017-04-01 04:57:06 +03:00
< br >
2018-08-15 02:57:37 +03:00
< p > You can get the latest release from GitHub< / p >
2017-04-02 10:48:47 +03:00
< p > < a href = "https://github.com/jenil/chota/archive/master.zip" class = "button outline primary" > Download .zip< / a > < / p >
< br >
< p > Install it from < code > npm< / code > or < code > yarn< / code > < / p >
{% highlight bash %}npm install chota{% endhighlight %}
2017-04-01 04:57:06 +03:00
< / section >
2017-04-02 10:48:47 +03:00
2017-04-01 04:57:06 +03:00
< section id = "docs" >
2017-04-02 10:48:47 +03:00
< header class = "row" >
< div class = "col is-vertical-align" >
< h2 class = "is-marginless" > Docs< / h2 >
< / div >
< div class = "col is-right" >
< nav class = "tabs" >
< a href = "#customizing" > customizing< / a >
< a href = "#components" > components< / a >
< / nav >
< / div >
< / header >
< br >
< p >
2017-12-08 03:13:37 +03:00
Chota is < em > dead< / em > 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 < a href = "https://www.w3schools.com/html/html5_semantic_elements.asp" target = "_blank" > HTML Semantics< / a > .
2017-04-01 04:57:06 +03:00
< / p >
2023-03-21 07:02:23 +03:00
< p > Here is a < a href = "https://raw.githack.com/jenil/chota/main/test/index.html" > demo< / a > of the basic HTML elements. A few addons that Chota provides out-of-the-box for some elements are:< / p >
2018-07-30 00:57:15 +03:00
< ul >
2023-03-21 07:02:23 +03:00
< li > < a href = "https://raw.githack.com/jenil/chota/main/test/index.html#text__tables" > Striped tabled< / a > < / li >
< li > < a href = "https://raw.githack.com/jenil/chota/main/test/index.html#forms__input" > Input states< / a > < / li >
< li > < a href = "https://raw.githack.com/jenil/chota/main/test/index.html#forms__input" > Horizontal input alignment< / a > by just wrapping them with < code > grouped< / code > class< / li >
2018-07-30 00:57:15 +03:00
< li > < a href = "#icons" > Icons< / a > < / li >
< / ul >
2017-04-02 10:48:47 +03:00
< br >
< h3 id = "customizing" > Customizing< / h3 >
2017-04-01 04:57:06 +03:00
< p > Chota comes with a basic set of < a href = "https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables" target = "_blank" > CSS variables< / a > :< / p >
{% highlight css %}
:root {
2020-06-18 04:22:25 +03:00
--bg-color: #ffffff;
--bg-secondary-color: #f3f3f6;
2019-09-02 12:57:42 +03:00
--color-primary: #14854F;
2018-07-30 00:57:15 +03:00
--color-lightGrey: #d2d6dd;
2019-09-02 12:57:42 +03:00
--color-grey: #747681;
2018-07-30 00:57:15 +03:00
--color-darkGrey: #3f4144;
--color-error: #d43939;
--color-success: #28bd14;
2017-04-03 06:30:33 +03:00
--grid-maxWidth: 120rem;
2018-07-30 00:57:15 +03:00
--grid-gutter: 2rem;
--font-size: 1.6rem;
2020-06-18 04:22:25 +03:00
--font-color: #333333;
--font-family-sans: sans-serif;
--font-family-mono: monaco, "Consolas", "Lucida Console", monospace;
2017-04-01 04:57:06 +03:00
}
{% endhighlight %}
2017-04-02 10:48:47 +03:00
< br >
2017-04-01 04:57:06 +03:00
< p > To override the variables, just add them to your < code > :root< / code > selector after importing < code > chota.css< / code > < / p >
{% highlight css %}
@import url(chota.css)
:root {
2018-07-30 00:57:15 +03:00
--color-primary: #da1d50; /* brand color */
2017-04-03 06:30:33 +03:00
--grid-maxWidth: 108rem; /* max container width 1080px */
2017-04-01 04:57:06 +03:00
}
/* Other styles..... */
2020-05-16 10:25:27 +03:00
{% endhighlight %}
< br >
2020-05-16 23:38:29 +03:00
< p > Addtionally, you can add dark mode to your site, to support devices that prefer dark mode.< / p >
2020-05-16 10:25:27 +03:00
{% highlight html %}
< style >
body.dark {
2020-05-16 17:25:33 +03:00
--bg-color: #000;
2020-05-16 21:12:51 +03:00
--bg-secondary-color: #131316;
2020-05-16 10:25:27 +03:00
--font-color: #f5f5f5;
--color-grey: #ccc;
2020-05-16 17:25:33 +03:00
--color-darkGrey: #777;
2020-05-16 10:25:27 +03:00
}
< / style >
< script >
if (window.matchMedia & &
window.matchMedia('(prefers-color-scheme: dark)').matches) {
document.body.classList.add('dark');
}
< / script >
2017-04-01 04:57:06 +03:00
{% endhighlight %}
2017-04-01 01:29:57 +03:00
< / section >
2017-04-02 10:48:47 +03:00
< section id = "components" >
< div class = "row" >
< div class = "col is-vertical-align" >
< h2 class = "is-marginless" > Components< / h2 >
< / div >
< div class = "col is-right" >
< nav class = "tabs" >
< a href = "#grid" > grid< / a >
2017-11-17 04:09:24 +03:00
< a href = "#buttons" > buttons< / a >
< a href = "#nav" > nav< / a >
< a href = "#card" > card< / a >
< a href = "#tag" > tag< / a >
< a href = "#utilities" > utilities< / a >
2017-04-02 10:48:47 +03:00
< / nav >
< / div >
< / div >
{% include grid.html %}
< br >
{% include buttons.html %}
2017-04-03 06:30:33 +03:00
< br >
{% include navs.html %}
< br >
{% include card.html %}
< br >
2017-11-17 04:09:24 +03:00
{% include tag.html %}
< br >
2017-04-03 06:30:33 +03:00
{% include utilities.html %}
< br >
2018-07-30 00:57:15 +03:00
< section id = "icons" >
< h4 > Icons< / h4 >
< p > While you are free to use any icon library that you, I'd just like to drop a link to < a href = "http://icongr.am/" target = "_blank" > Icongram< / a > here. It's the < em > quickest< / em > way you can add icons to any website.< / p >
< / section >
< br >
< br >
2017-04-03 06:30:33 +03:00
< p class = "is-center" >
2018-07-30 00:57:15 +03:00
< a class = "button primary outline" target = "_blank" href = "https://twitter.com/intent/tweet?url=https://jenil.github.io/chota/&text=chota.css%20-%20A%20micro%20CSS%20framework&via=geekGogari&hashtags=web,css" > Give a shout-out 📢< / a >
2017-04-03 06:30:33 +03:00
< / p >
2017-04-02 10:48:47 +03:00
< / section >
2017-04-01 01:29:57 +03:00
< / div >
2021-08-27 21:27:42 +03:00
< footer class = "text-center" >
2020-04-29 19:19:05 +03:00
< p > < a href = "#top" > 🔝 Back to top< / a > • < a href = "https://github.com/jenil/chota" > 🐛 Report an issue< / a > • < a href = "https://paypal.me/jgog/10" target = "_blank" onclick = "ga('send', 'event', 'navigation', 'click', 'donate');" > 🎗 Donate< / a > < / p >
2017-11-17 04:19:15 +03:00
< p > Want icons for your project too? Checkout < a href = "https://icongr.am" target = "_blank" > Icongr.am 🚀< / a > < / p >
2017-04-02 10:48:47 +03:00
< h5 > Made by < a href = "https://jgog.in" target = "_blank" > Jenil Gogari< / a > < / h5 >
2017-04-01 01:29:57 +03:00
< / footer >
2020-05-16 23:38:29 +03:00
< script >
if (
window.matchMedia & &
window.matchMedia("(prefers-color-scheme: dark)").matches
) {
document.body.classList.add("dark");
document.querySelector('#theme-switch').innerHTML = "🌙"
}
function switchMode(el) {
const bodyClass = document.body.classList;
bodyClass.contains("dark")
? ((el.innerHTML = "☀️"), bodyClass.remove("dark"))
: ((el.innerHTML = "🌙"), bodyClass.add("dark"));
}
< / script >
2017-04-01 02:47:10 +03:00
< script >
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-91125324-3', 'auto');
ga('send', 'pageview');
< / script >
2017-04-01 01:29:57 +03:00
< / body >
< / html >
