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

docs

Browse Source
This commit is contained in:
Jenil Gogari 2017-04-02 23:30:33 -04:00
parent f51e6350ed
commit 963481fa2d
8 changed files with 211 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
docs/_includes/card.html Normal file
View File

@ -0,0 +1,50 @@
<section id="card">
<h4>Card</h4>
<p>The <code>.card</code> element is simply a container with a shadow, a border, a radius, and some padding.</p>
<p>You can add a simple <code>header</code> element with a heading tag in it to add a heading to the card.</p>
<div class="row is-center">
<div class="col">
<div class="card">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque cumque velit id.</p>
</div>
</div>
<div class="col">
{% highlight html %}
<div class="card">
<p>Lorem ipsum ... nostrud exercit.</p>
</div>
{% endhighlight %}
</div>
</div>
<hr>
<div class="row is-center">
<div class="col-6">
<div class="card">
<header>
<h4>Card title</h4>
</header>
<p>A nisi ullam impedit molestiae, sapiente id, numquam accusantium eius cum, iste eum iusto blanditiis doloribus beatae. Molestias iste explicabo libero nam, voluptas harum ipsum quod velit enim. Quae, cupiditate?</p>
<footer class="is-right">
<a href="#!" class="button primary">Submit</a>
<a href="#!" class="button">Cancel</a>
</footer>
</div>
</div>
</div>
<div class="row is-center">
<div class="col">
{% highlight html %}
<div class="card">
<header>
<h4>Card title</h4>
</header>
<p>A nisi ullam ... cupiditate?</p>
<footer class="is-right">
<a class="button primary">Submit</a>
<a class="button">Cancel</a>
</footer>
</div>
{% endhighlight %}
</div>
</div>
</section>

97
docs/_includes/navs.html Normal file
View File

@ -0,0 +1,97 @@
<section id="nav">
<h4>Nav</h4>
<p>A responsive horizontal nav bar that can contain links, tabs, buttons, icons, and a logo.</p>
<p>The <code>.nav</code> container can have 3 parts:</p>
<ul>
<li><code>.nav-left</code></li>
<li><code>.nav-center</code></li>
<li><code>.nav-right</code></li>
</ul>
<p>Each of these containers can have a <code>&lt;a&gt;</code> ,<code>.button</code>, <code>.tabs</code>, <code>.brand</code>. Add a <code>active</code> class to show a active link.</p>
<br>
<nav class="nav">
<div class="nav-left">
<a class="brand" href="#">Brand</a>
<div class="tabs">
<a href="#!">Link 1</a>
<a href="#!" class="active">Link 2</a>
</div>
</div>
<div class="nav-right">
<a href="#!" class="button outline">Button</a>
</div>
</nav>
{% highlight html %}
<nav class="nav">
<div class="nav-left">
<a class="brand" href="#">Brand</a>
<div class="tabs">
<a>Link 1</a>
<a class="active">Link 2</a>
</div>
</div>
<div class="nav-right">
<a class="button outline">Button</a>
</div>
</nav>
{% endhighlight %}
<hr>
<nav class="nav">
<div class="nav-left">
<a href="#!" class="active">Link 1</a>
<a href="#!">Link 2</a>
</div>
<div class="nav-center">
<a class="brand" href="#">
<img src="../logo.svg" alt="">
</a>
</div>
<div class="nav-right">
<a href="#!">Link 3</a>
<a href="#!">Link 4</a>
</div>
</nav>
{% highlight html %}
<nav class="nav">
<div class="nav-left">
<a class="active">Link 1</a>
<a>Link 2</a>
</div>
<div class="nav-center">
<a class="brand">
<img src="logo.svg" alt="">
</a>
</div>
<div class="nav-right">
<a>Link 3</a>
<a>Link 4</a>
</div>
</nav>
{% endhighlight %}
<hr>
<p>You can also have tabs without a nav bar. Simply make a <code>.tabs</code> container and add links in it. To make tabs go full width just add a <code>is-full</code> class</p>
<br>
<nav class="tabs">
<a href="#!">Tab 1</a>
<a href="#!">Tab 2</a>
<a href="#!" class="active">Tab 3</a>
</nav>
<br>
<nav class="tabs is-full">
<a href="#!">Tab 1</a>
<a href="#!" class="active">Tab 2</a>
<a href="#!">Tab 3</a>
</nav>
{% highlight html %}
<nav class="tabs">
<a>Tab 1</a>
<a>Tab 2</a>
<a class="active">Tab 3</a>
</nav>
<nav class="tabs is-full">
<a>Tab 1</a>
<a class="active">Tab 2</a>
<a>Tab 3</a>
</nav>
{% endhighlight %}
</section>

27
docs/_includes/utilities.html Normal file
View File

@ -0,0 +1,27 @@
<section id="utilities">
<h4>Utilities</h4>
<p>You can apply these helper classes to almost any element, in order to alter its style.</p>
<ul>
<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>
<li><code>is-text-left</code> - left aligns text</li>
<li><code>is-text-right</code> - right aligns text</li>
<li><code>is-text-uppercase</code> - text to uppercase</li>
<li><code>is-text-lowercase</code> - text to lowercase</li>
<li><code>is-text-capitalize</code> - capitalizes text</li>
<li><code>is-full-screen</code> - makes the element 100% view height</li>
<li><code>is-full-width</code> - make the element 100% width</li>
<li><code>is-vertical-align</code> - vertically centers element using flex</li>
<li><code>is-horizontal-align</code> - horizontal centers element using flex</li>
<li><code>is-center</code> - centers element using flex</li>
<li><code>is-right</code> - right aligns element using flex</li>
<li><code>is-left</code> - left aligns element using flex</li>
<li><code>is-fixed</code> - fixed positioned element</li>
<li><code>is-paddingless</code> - removes any padding</li>
<li><code>is-marginless</code> - removes any margin</li>
<li><code>clearfix</code> - clears the floats</li>
<li><code>hide-phone</code> - hides the element for screens &lt;480px</li>
<li><code>hide-tablet</code> - hides the element for screens &lt;768px</li>
</ul>
</section>

2
docs/doc-styles.css
View File

@ -21,7 +21,7 @@ body>.container {
font-weight: 300; font-weight: 300;
} }
footer { body>footer {
background-color: #fafafa; background-color: #fafafa;
padding: 4rem; padding: 4rem;
} }

BIN
docs/favicon.ico Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.3 KiB

BIN
docs/favicon.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

20
docs/index.html
View File

@ -10,6 +10,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <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="./doc-styles.css"> <link rel="stylesheet" href="./doc-styles.css">
<link rel="icon" type="image/png" href="favicon.png" />
</head> </head>
<body id="top"> <body id="top">
@ -19,17 +20,13 @@
<img src="./logo.svg" alt=""> <img src="./logo.svg" alt="">
<h3>A <strong>small</strong> (3kb) CSS framework.</h3> <h3>A <strong>small</strong> (3kb) CSS framework.</h3>
</div> </div>
<div class="row"> <nav class="tabs is-center">
<div class="col is-center">
<nav class="tabs">
<a href="#features">features</a> <a href="#features">features</a>
<a href="#start">start</a> <a href="#start">start</a>
<a href="#docs">docs</a> <a href="#docs">docs</a>
<a href="https://github.com/jenil/chota">github</a> <a href="https://github.com/jenil/chota">github</a>
</nav> </nav>
</div> </div>
</div>
</div>
<section id="features"> <section id="features">
<h2>Features</h2> <h2>Features</h2>
@ -38,7 +35,7 @@
<li>⛔️&nbsp; No preprocessor, just plug-n-play</li> <li>⛔️&nbsp; No preprocessor, just plug-n-play</li>
<li>📐&nbsp; Magical 12 column grid</li> <li>📐&nbsp; Magical 12 column grid</li>
<li>🌈&nbsp; Easy to extended with CSS variables</li> <li>🌈&nbsp; Easy to extended with CSS variables</li>
<li>🎲&nbsp; Comes with a handful of components &amp; utilities</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; Good Semantics</li>
</ul> </ul>
</section> </section>
@ -109,6 +106,7 @@
<a href="#grid">grid</a> <a href="#grid">grid</a>
<a href="#buttons">buttons</a> <a href="#buttons">buttons</a>
<a href="#nav">nav</a> <a href="#nav">nav</a>
<a href="#card">card</a>
<a href="#utilities">utilities</a> <a href="#utilities">utilities</a>
</nav> </nav>
</div> </div>
@ -116,6 +114,16 @@
{% include grid.html %} {% include grid.html %}
<br> <br>
{% include buttons.html %} {% 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> </section>
</div> </div>
<footer class="is-text-center"> <footer class="is-text-center">

13
docs/logo.svg
View File

File diff suppressed because one or more lines are too long
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 8.9 KiB

After

Width:  |  Height:  |  Size: 10 KiB