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-04-01 02:36:04 +03:00
< title > chota - A small CSS framework< / title >
2017-04-01 01:29:57 +03:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2017-04-03 06:30:33 +03:00
< link rel = "stylesheet" href = "https://unpkg.com/chota" >
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 = "" >
< h3 > A < strong > small< / strong > (3kb) CSS framework.< / h3 >
< / 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 >
< a href = "https://github.com/jenil/chota" > github< / a >
< / 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 >
< li > ⚡️ Super light-weight. Just 3kb (minified + gzipped).< / li >
< li > ⛔️ No preprocessor, just plug-n-play< / li >
< li > 📐 Magical 12 column grid< / li >
< li > 🌈 Easy to extended 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 >
< / 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-01 04:57:06 +03:00
{% highlight html %}< link rel = "stylesheet" href = "https://unpkg.com/chota" > {% endhighlight %}
< br >
2017-04-02 10:48:47 +03:00
< 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 %}
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-04-01 04:57:06 +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 Semenatics< / a > .
< / p >
2017-04-02 10:48:47 +03:00
< p > Here is a < a href = "https://rawgit.com/jenil/chota/master/test/index.html" > demo< / a > of the basic HTML elements.< / p >
< 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 {
2017-04-03 06:30:33 +03:00
--primary-color: #1a9f60;
--lightGrey-color: #ddd;
--grid-maxWidth: 120rem;
--grid-gutter: 1.5rem;
--font-family: "Helvetica Neue", sans-serif;
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 {
2017-04-03 06:30:33 +03:00
--primary-color: #da1d50; /* brand color */
--grid-maxWidth: 108rem; /* max container width 1080px */
2017-04-01 04:57:06 +03:00
}
/* Other styles..... */
{% 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 >
< a href = "#buttons" > buttons< / a >
< a href = "#nav" > nav< / a >
2017-04-03 06:30:33 +03:00
< a href = "#card" > card< / a >
2017-04-02 10:48:47 +03:00
< a href = "#utilities" > utilities< / a >
< / 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 >
{% 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 >
2017-04-02 10:48:47 +03:00
< / section >
2017-04-01 01:29:57 +03:00
< / div >
< footer class = "is-text-center" >
2017-04-02 10:48:47 +03:00
< 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 >
2017-04-01 01:29:57 +03:00
< / footer >
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 >
