mirror of https://github.com/jenil/chota.git
docs
This commit is contained in:
Jenil Gogari
parent
f51e6350ed
commit
963481fa2d
|
|
@ -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>
|
||||
|
|
@ -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><a></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>
|
||||
|
|
@ -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 <480px</li>
|
||||
<li><code>hide-tablet</code> - hides the element for screens <768px</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
@ -21,7 +21,7 @@ body>.container {
|
|||
font-weight: 300;
|
||||
}
|
||||
|
||||
footer {
|
||||
body>footer {
|
||||
background-color: #fafafa;
|
||||
padding: 4rem;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -8,8 +8,9 @@
|
|||
<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="./doc-styles.css">
|
||||
<link rel="icon" type="image/png" href="favicon.png" />
|
||||
</head>
|
||||
|
||||
<body id="top">
|
||||
|
|
@ -19,16 +20,12 @@
|
|||
<img src="./logo.svg" alt="">
|
||||
<h3>A <strong>small</strong> (3kb) CSS framework.</h3>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col is-center">
|
||||
<nav class="tabs">
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
<section id="features">
|
||||
|
|
@ -38,7 +35,7 @@
|
|||
<li>⛔️ No preprocessor, just plug-n-play</li>
|
||||
<li>📐 Magical 12 column grid</li>
|
||||
<li>🌈 Easy to extended with CSS variables</li>
|
||||
<li>🎲 Comes with a handful of components & utilities</li>
|
||||
<li>🎲 Comes with a handful of <a href="#components">components</a> & <a href="#utilities">utilities</a></li>
|
||||
<li>✅ Good Semantics</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
|
@ -79,11 +76,11 @@
|
|||
<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>
|
||||
|
|
@ -92,8 +89,8 @@
|
|||
@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..... */
|
||||
|
|
@ -109,6 +106,7 @@
|
|||
<a href="#grid">grid</a>
|
||||
<a href="#buttons">buttons</a>
|
||||
<a href="#nav">nav</a>
|
||||
<a href="#card">card</a>
|
||||
<a href="#utilities">utilities</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
|
@ -116,6 +114,16 @@
|
|||
{% include grid.html %}
|
||||
<br>
|
||||
{% 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>
|
||||
</div>
|
||||
<footer class="is-text-center">
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
Before Width: | Height: | Size: 8.9 KiB After Width: | Height: | Size: 10 KiB |
Loading…
Reference in New Issue