mirror of
https://github.com/jenil/chota.git
synced 2023-08-10 21:13:07 +03:00
145 lines
5.2 KiB
HTML
145 lines
5.2 KiB
HTML
---
|
|
---
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
|
|
<title>chota - A small CSS framework</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link rel="stylesheet" href="https://unpkg.com/chota">
|
|
<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>small</strong> (3kb) CSS framework.</h3>
|
|
</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>
|
|
</nav>
|
|
</div>
|
|
|
|
<section id="features">
|
|
<h2>Features</h2>
|
|
<ul>
|
|
<li>⚡️ Super light-weight. Just 3kb (minified + gzipped).</li>
|
|
<li>⛔️ No preprocessor, just plug-n-play</li>
|
|
<li>📐 Magical 12 column <a href="#grid">grid</a></li>
|
|
<li>🌈 Easy to <a href="#customizing">extended</a> with CSS variables</li>
|
|
<li>🎲 Comes with a handful of <a href="#components">components</a> & <a href="#utilities">utilities</a></li>
|
|
<li>✅ Good Semantics</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 Semenatics</a>.
|
|
</p>
|
|
<p>Here is a <a href="https://cdn.rawgit.com/jenil/chota/359843a4/test/index.html">demo</a> of the basic HTML elements.</p>
|
|
<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 {
|
|
--primary-color: #1a9f60;
|
|
--lightGrey-color: #ddd;
|
|
--grid-maxWidth: 120rem;
|
|
--grid-gutter: 1.5rem;
|
|
--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 {
|
|
--primary-color: #da1d50; /* brand color */
|
|
--grid-maxWidth: 108rem; /* max container width 1080px */
|
|
}
|
|
|
|
/* Other styles..... */
|
|
{% 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="#utilities">utilities</a>
|
|
</nav>
|
|
</div>
|
|
</div>
|
|
{% include grid.html %}
|
|
<br>
|
|
{% include buttons.html %}
|
|
<br>
|
|
{% include navs.html %}
|
|
<br>
|
|
{% include card.html %}
|
|
<br>
|
|
{% include utilities.html %}
|
|
<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%20small%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> • <a href="https://github.com/jenil/chota">report an issue</a></p>
|
|
<h5>Made by <a href="https://jgog.in" target="_blank">Jenil Gogari</a></h5>
|
|
</footer>
|
|
<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>
|