mirror of
https://github.com/jenil/chota.git
synced 2023-08-10 21:13:07 +03:00
Update docs
This commit is contained in:
Jenil Gogari
parent
43ceac5805
commit
edb20bc6b7
24
docs/_includes/buttons.html
Normal file
24
docs/_includes/buttons.html
Normal file
@ -0,0 +1,24 @@
|
||||
<section id="buttons">
|
||||
<h4>Buttons</h4>
|
||||
<p>chota includes five predefined button styles, each serving its own semantic purpose. It also applies these styles to <code>input, button</code> elements, see the complete <a href="https://rawgit.com/jenil/chota/master/test/index.html#forms__action" target="_blank">demo</a>.</p>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="buttons">
|
||||
<a href="#!" class="button">Default</a>
|
||||
<a href="#!" class="button primary">Primary</a>
|
||||
<a href="#!" class="button outline">Outline</a>
|
||||
<a href="#!" class="button outline primary">Primary outline</a>
|
||||
<a href="#!" class="button clear">Clear</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
{% highlight html %}
|
||||
<a class="button">Default</a>
|
||||
<a class="button primary">Primary</a>
|
||||
<a class="button outline">Outline</a>
|
||||
<a class="button outline primary">Primary outline</a>
|
||||
<a class="button clear">Clear</a>
|
||||
{% endhighlight %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
168
docs/_includes/grid.html
Normal file
168
docs/_includes/grid.html
Normal file
@ -0,0 +1,168 @@
|
||||
<section id="grid">
|
||||
<h4>Grid</h4>
|
||||
<p>The grid system is a fluid system with a max width of 120rem (1200px), that shrinks with the viewport. The max width can be controlled by changing the <code>--grid-maxWidth</code> in the <code>:root</code>.</p>
|
||||
<p>Much like other frameworks, wrap your content in a <code>.container</code> to center it on the page.</p>
|
||||
<br>
|
||||
<h5>Flexible grid</h5>
|
||||
<p>A simple way to build flexible responsive columns:</p>
|
||||
<ul>
|
||||
<li>Add a <code>.row</code> container</li>
|
||||
<li>Add as many <code>.col</code> elements as you want</li>
|
||||
</ul>
|
||||
<p>Each column will have an <strong>equal width</strong>, in a row. There is no restriction on number of columns, but it is recommended <strong>not</strong> to add more than 12 columns in a row.</p>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card is-center">.col</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<div class="card is-center">.col</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card is-center">.col</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card is-center">.col</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col"> .col </div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col"> .col </div>
|
||||
<div class="col"> .col </div>
|
||||
<div class="col"> .col </div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<hr>
|
||||
<h5>Sized</h5>
|
||||
<p>You can also specify the size of the columns</p>
|
||||
<ul>
|
||||
<li>Add a <code>.row</code> container</li>
|
||||
<li>Add a <code>.col-n</code> child where <strong>n</strong> can be from 1 to 12</li>
|
||||
</ul>
|
||||
<p>Each column class is named after how many columns you want out of 12. So if you want 4 columns out of 12, use <code>.col-4</code>.</p>
|
||||
<div class="row">
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
<div class="col-1">
|
||||
<div class="card is-center">.col-1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4">
|
||||
<div class="card is-center">.col-4</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card is-center">.col-4</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="card is-center">.col-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card is-center">.col-12</div>
|
||||
</div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-1"> .col-1 </div>
|
||||
<!-- repeat 11 times -->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-4"> .col-4 </div>
|
||||
<!-- repeat twice -->
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-12"> .col-12 </div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<hr>
|
||||
<h5>Mix-n-Match</h5>
|
||||
<p>You can use a combination of <strong>flexible</strong> and <strong>sized</strong> columns.</p>
|
||||
<p>When using a combination, the sized width column takes the size specified and the remaining is filled in by the flexible column.</p>
|
||||
<div class="row">
|
||||
<div class="col-2">
|
||||
<div class="card is-center">.col-2</div>
|
||||
</div>
|
||||
<div class="col-2">
|
||||
<div class="card is-center">.col-2</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card is-center">auto</div>
|
||||
</div>
|
||||
<div class="col-3">
|
||||
<div class="card is-center">.col-3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-10">
|
||||
<div class="card is-center">.col-10</div>
|
||||
</div>
|
||||
<div class="col">
|
||||
<div class="card is-center">auto</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col"><div class="card is-center">auto</div></div>
|
||||
<div class="col"><div class="card is-center">auto</div></div>
|
||||
<div class="is-full-width"></div>
|
||||
<div class="col"><div class="card is-center">auto</div></div>
|
||||
<div class="col"><div class="card is-center">auto</div></div>
|
||||
</div>
|
||||
{% highlight html %}
|
||||
<div class="row">
|
||||
<div class="col-2"> .col-2 </div>
|
||||
<div class="col-2"> .col-2 </div>
|
||||
<div class="col"> auto </div>
|
||||
<div class="col-3"> .col-3 </div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-10"> .col-10 </div>
|
||||
<div class="col"> auto </div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col"> auto </div>
|
||||
<div class="col"> auto </div>
|
||||
<div class="is-full-width"></div>
|
||||
<div class="col"> auto </div>
|
||||
<div class="col"> auto </div>
|
||||
</div>
|
||||
{% endhighlight %}
|
||||
<p><strong>Pro tip:</strong> Create equal-width columns that span multiple rows by inserting a <code>.is-full-width</code> where you want the columns to break to a new line. Here <code>.is-full-width</code> is one of the <a href="#utilities">utility</a> class.</p>
|
||||
|
||||
</section>
|
||||
@ -8,19 +8,20 @@
|
||||
<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="https://unpkg.com/chota"> -->
|
||||
<link rel="stylesheet" href="../../dist/chota.min.css">
|
||||
<link rel="stylesheet" href="./doc-styles.css">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<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>
|
||||
<div class="row is-center">
|
||||
<div class="col-3">
|
||||
<div class="row">
|
||||
<div class="col is-center">
|
||||
<nav class="tabs">
|
||||
<a href="#features">features</a>
|
||||
<a href="#start">start</a>
|
||||
@ -30,6 +31,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<section id="features">
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
@ -41,49 +43,85 @@
|
||||
<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">{% endhighlight %}
|
||||
<br>
|
||||
<p>You can download it from Github or install it from <code>npm</code> or <code>yarn</code>:</p>
|
||||
{% highlight bash %} npm install chota {% endhighlight %}
|
||||
<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">
|
||||
<h2>Docs</h2>
|
||||
<p class="catch">
|
||||
<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://rawgit.com/jenil/chota/master/test/index.html">demo</a>.</p>
|
||||
|
||||
<h3>Customizing</h3>
|
||||
<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>
|
||||
<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;
|
||||
--primary-color: #1a9f60;
|
||||
--lightGrey-color: #ddd;
|
||||
--grid-maxWidth: 120rem;
|
||||
--grid-gutter: 1.5rem;
|
||||
--font-family: "Helvetica Neue", sans-serif;
|
||||
}
|
||||
{% endhighlight %}
|
||||
<br>
|
||||
<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 */
|
||||
--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="#utilities">utilities</a>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
{% include grid.html %}
|
||||
<br>
|
||||
{% include buttons.html %}
|
||||
</section>
|
||||
</div>
|
||||
<footer class="is-text-center">
|
||||
<h5>Made by <a href="//jgog.in">Jenil Gogari</a></h5>
|
||||
<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(){
|
||||
@ -93,7 +131,6 @@
|
||||
|
||||
ga('create', 'UA-91125324-3', 'auto');
|
||||
ga('send', 'pageview');
|
||||
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user