mirror
/
chota
mirror of https://github.com/jenil/chota.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
chota/docs/index.html

207 lines
7.9 KiB
HTML
Raw Blame History

---
---
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>chota - A micro CSS framework</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <link rel="stylesheet" href="https://unpkg.com/chota"> -->
<!-- for dev -->
<link rel="stylesheet" href="http://localhost:5000/dist/chota.css">
<link rel="stylesheet" href="./doc-styles.css">
<link rel="icon" type="image/png" href="favicon.png" />
</head>
<body id="top">
<div class="container">
<div class="hero is-full-screen">
<div class="logo is-center is-vertical-align">
<img src="./logo.svg" alt="">
<h3>A <strong>micro</strong> (~3kb) CSS framework.</h3>
<small><em>FWIW, "choṭā" means "small" in Hindi</em></small>
</div>
<nav class="tabs is-center">
<a href="#features">features</a>
<a href="#start">start</a>
<a href="#docs">docs</a>
<a href="https://github.com/jenil/chota">GitHub</a>
<a href="javascript:void(0)" id="theme-switch" onclick="switchMode(this)">☀️</a>
</nav>
</div>
<section id="features">
<h2>Features</h2>
<ul>
<li>⚡️&nbsp; Super light-weight. Just ~3kb (minified + gzipped).</li>
<li>⛔️&nbsp; No preprocessor, just plug-n-play</li>
<li>📐&nbsp; Magical 12 column <a href="#grid">grid</a></li>
<li>🌈&nbsp; Easy to <a href="#customizing">extend</a> with CSS variables</li>
<li>🎲&nbsp; Comes with a handful of <a href="#components">components</a> &amp; <a href="#utilities">utilities</a></li>
<li>✅&nbsp; Good Semantics</li>
<li>🌙&nbsp; Easy dark mode switch</li>
<li>🤡&nbsp; Supports <a href="#icons">icons</a> out-of-the-box</li>
</ul>
</section>
<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>
<br>
<p>Link this CSS in your HTML:</p>
{% highlight html %}<link rel="stylesheet" href="https://unpkg.com/chota@latest">{% endhighlight %}
<br>
<p>You can get the latest release from GitHub</p>
<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 %}
</section>
<section id="docs">
<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>
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>.
</p>
<p>Here is a <a href="https://cdn.rawgit.com/jenil/chota/master/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>
<ul>
<li><a href="https://cdn.rawgit.com/jenil/chota/master/test/index.html#text__tables">Striped tabled</a></li>
<li><a href="https://cdn.rawgit.com/jenil/chota/master/test/index.html#forms__input">Input states</a></li>
<li><a href="https://cdn.rawgit.com/jenil/chota/master/test/index.html#forms__input">Horizontal input alignment</a> by just wrapping them with <code>grouped</code> class</li>
<li><a href="#icons">Icons</a></li>
</ul>
<br>
<h3 id="customizing">Customizing</h3>
<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 {
--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-family: "Helvetica Neue", sans-serif;
}
{% endhighlight %}
<br>
<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 {
--color-primary: #da1d50; /* brand color */
--grid-maxWidth: 108rem; /* max container width 1080px */
}
/* Other styles..... */
{% endhighlight %}
<br>
<p>Addtionally, you can add dark mode to your site, to support devices that prefer dark mode.</p>
{% highlight html %}
<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>
{% endhighlight %}
</section>
<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>
<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>
</nav>
</div>
</div>
{% include grid.html %}
<br>
{% include buttons.html %}
<br>
{% include navs.html %}
<br>
{% include card.html %}
<br>
{% include tag.html %}
<br>
{% include utilities.html %}
<br>
<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>
<p class="is-center">
<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>
</p>
</section>
</div>
<footer class="is-text-center">
<p><a href="#top">🔝 Back to top</a> &bull; <a href="https://github.com/jenil/chota">🐛 Report an issue</a> &bull; <a href="https://paypal.me/jgog/10" target="_blank" onclick="ga('send', 'event', 'navigation', 'click', 'donate');">🎗 Donate</a></p>
<p>Want icons for your project too? Checkout <a href="https://icongr.am" target="_blank">Icongr.am 🚀</a></p>
<h5>Made by <a href="https://jgog.in" target="_blank">Jenil Gogari</a></h5>
</footer>
<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>
<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>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink