mirror/chota
1
0
Fork 0
mirror of https://github.com/jenil/chota.git synced 2023-08-10 21:13:07 +03:00
Code Issues Projects Releases Wiki Activity

update docs

Browse Source
This commit is contained in:
Jenil Gogari 2018-07-29 17:57:15 -04:00
parent c88bc51cb7
commit b1bc9f9acd
4 changed files with 59 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -13,6 +13,7 @@ A really small CSS framework
- 🌈  Easy to [extend](https://jenil.github.io/chota/#customizing) with CSS variables
- 🎲  Comes with a handful of [components](https://jenil.github.io/chota/#components) & [utilities](https://jenil.github.io/chota/#utilities)
- ✅  Good Semantics
- 🤡  Supports icons from [Icongram](https://icongr.am/)
<br>

20
docs/_includes/buttons.html
View File

@ -7,10 +7,20 @@
<a href="#!" class="button">Default</a>
<a href="#!" class="button primary">Primary</a>
<a href="#!" class="button secondary">Secondary</a>
<a href="#!" class="button dark">Dark</a>
<a href="#!" class="button error">Error</a>
<a href="#!" class="button success">Success</a>
<a href="#!" class="button outline">Outline</a>
<a href="#!" class="button outline primary">Primary outline</a>
<a href="#!" class="button outline secondary">Secondary outline</a>
<a href="#!" class="button outline dark">Dark outline</a>
<a href="#!" class="button clear">Clear</a>
<button type="button" class="button primary icon">New file
<img src="https://icongr.am/feather/file.svg?size=16&amp;color=ffffff" alt="icon">
</button>
<button class="button icon-only">
<img src="https://icongr.am/feather/search.svg?size=24">
</button>
</div>
</div>
<div class="col">
@ -18,10 +28,20 @@
<a class="button">Default</a>
<a class="button primary">Primary</a>
<a class="button secondary">Secondary</a>
<a class="button dark">Dark</a>
<a class="button error">Error</a>
<a class="button success">Success</a>
<a class="button outline">Outline</a>
<a class="button outline primary">Primary outline</a>
<a class="button outline secondary">Secondary outline</a>
<a class="button outline dark">Dark outline</a>
<a class="button clear">Clear</a>
<button type="button" class="button primary icon">New file
<img src="https://icongr.am/feather/file.svg?size=16&amp;color=ffffff" alt="icon">
</button>
<button class="button icon-only">
<img src="https://icongr.am/feather/search.svg?size=24">
</button>
{% endhighlight %}
</div>
</div>

12
docs/_includes/utilities.html
View File

@ -2,6 +2,18 @@
<h4>Utilities</h4>
<p>You can apply these helper classes to almost any element, in order to alter its style.</p>
<ul>
<li><code>text-primary</code> - <span class="text-primary">Primary text</span></li>
<li><code>text-light</code> - <span class="text-light">Light text</span></li>
<li><code>text-dark</code> - <span class="text-dark">Dark text</span></li>
<li><code>text-grey</code> - <span class="text-grey">Grey text</span></li>
<li><code>text-error</code> - <span class="text-error">Error text</span></li>
<li><code>text-success</code> - <span class="text-success">Success text</span></li>
<li><code>bg-primary</code> - <span class="bg-primary">primary background</span></li>
<li><code>bg-light</code> - <span class="bg-light">Light background</span></li>
<li><code>bg-dark</code> - <span class="bg-dark">Dark background</span></li>
<li><code>bg-grey</code> - <span class="bg-grey">Grey background</span></li>
<li><code>bg-error</code> - <span class="bg-error">Error background</span></li>
<li><code>bg-success</code> - <span class="bg-success">Success background</span></li>
<li><code>pull-right</code> - floats an element to the right</li>
<li><code>pull-left</code> - floats an element to the left</li>
<li><code>is-text-center</code> - center aligns text</li>

35
docs/index.html
View File

@ -19,7 +19,7 @@
<div class="logo is-center is-vertical-align">
<img src="./logo.svg" alt="">
<h3>A <strong>micro</strong> (<3kb) CSS framework.</h3>
<small><em>BTW, "choṭā" means "small" in Hindi</em></small>
<small><em>FWIW, "choṭā" means "small" in Hindi</em></small>
</div>
<nav class="tabs is-center">
<a href="#features">features</a>
@ -38,6 +38,7 @@
<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; Supports <a href="#icons">icons</a> out-of-the-box</li>
</ul>
</section>
@ -71,17 +72,27 @@
<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/v0.4.1/test/index.html">demo</a> of the basic HTML elements.</p>
<p>Here is a <a href="https://cdn.rawgit.com/jenil/chota/v0.5.0/test/index.html#text__tables">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="href="https://cdn.rawgit.com/jenil/chota/v0.5.0/test/index.html#text__tables"">Striped tabled</a></li>
<li><a href="href="https://cdn.rawgit.com/jenil/chota/v0.5.0/test/index.html#forms__input"">Input states</a></li>
<li><a href="href="https://cdn.rawgit.com/jenil/chota/v0.5.0/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 {
--primary-color: #1a9f60;
--lightGrey-color: #ddd;
--darkGrey-color: #888;
--color-primary: #1a9f60;
--color-lightGrey: #d2d6dd;
--color-grey: #7e818b;
--color-darkGrey: #3f4144;
--color-error: #d43939;
--color-success: #28bd14;
--grid-maxWidth: 120rem;
--grid-gutter: 1.5rem;
--grid-gutter: 2rem;
--font-size: 1.6rem;
--font-family: "Helvetica Neue", sans-serif;
}
{% endhighlight %}
@ -91,7 +102,7 @@
@import url(chota.css)
:root {
--primary-color: #da1d50; /* brand color */
--color-primary: #da1d50; /* brand color */
--grid-maxWidth: 108rem; /* max container width 1080px */
}
@ -126,13 +137,19 @@
<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>
<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></p>
<p><a href="#top">🔝 back to top</a> &bull; <a href="https://github.com/jenil/chota">🐛 report an issue</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>