1
0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00

update docs and README

This commit is contained in:
Jenil Gogari 2017-03-31 22:29:10 -04:00
parent 46030f0e46
commit 7ad75c917a
3 changed files with 19 additions and 16 deletions

View File

@ -1,14 +1,20 @@
<p align="center"> <p align="center">
<img src="https://cdn.rawgit.com/jenil/chota/gh-pages/logo.svg" /> <img src="https://jenil.github.io/chota/logo.svg" />
<br> <br><br>
A really small CSS framework A really small CSS framework
</p> </p>
<br>
- ⚡️&nbsp; Super light-weight. Just 3kb (minified + gzipped). - ⚡️&nbsp; Super light-weight. Just 3kb (minified + gzipped).
- ✅&nbsp; Good Semantics - ⛔️&nbsp; No preprocessor, just plug-n-play
- 📐&nbsp; Magical 12 column grid - 📐&nbsp; Magical 12 column grid
- 🌈&nbsp; Easy to extended with CSS variables - 🌈&nbsp; Easy to extended with CSS variables
- 🎲&nbsp; Comes with a handful of components &amp; utilities - 🎲&nbsp; Comes with a handful of components &amp; utilities
- ✅&nbsp; Good Semantics
<br>
### Get started ### Get started
@ -17,7 +23,7 @@ CDN:
<link rel="stylesheet" href="https://unpkg.com/chota"> <link rel="stylesheet" href="https://unpkg.com/chota">
``` ```
npm: npm or yarn:
```bash ```bash
npm install chota npm install chota
``` ```

View File

@ -3,17 +3,6 @@
flex-direction: column; flex-direction: column;
} }
code {
background-color: #f7f7f7;
color: #c62424;
white-space: pre-wrap;
padding: 0.2em 0.4em;
}
pre code {
background: none;
}
.logo { .logo {
flex: 1; flex: 1;
flex-direction: column; flex-direction: column;
@ -38,6 +27,13 @@ section {
margin: 5rem auto; margin: 5rem auto;
} }
#features ul {
list-style-type: none;
padding: 0;
font-size: 1.2em;
font-weight: 200;
}
.highlight, code { background-color: #f1f5f5; } .highlight, code { background-color: #f1f5f5; }
.highlight .c { color: #93a1a1 } /* Comment */ .highlight .c { color: #93a1a1 } /* Comment */
.highlight .err { color: #586e75 } /* Error */ .highlight .err { color: #586e75 } /* Error */

View File

@ -65,9 +65,10 @@
--lightGrey-color: #ddd; --lightGrey-color: #ddd;
--grid-maxWidth: 120rem; --grid-maxWidth: 120rem;
--grid-gutter: 1.5rem; --grid-gutter: 1.5rem;
--font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; --font-family: "Helvetica Neue", sans-serif;
} }
{% endhighlight %} {% endhighlight %}
<br>
<p>To override the variables, just add them to your <code>:root</code> selector after importing <code>chota.css</code></p> <p>To override the variables, just add them to your <code>:root</code> selector after importing <code>chota.css</code></p>
{% highlight css %} {% highlight css %}
@import url(chota.css) @import url(chota.css)