v0.7.0

dist/chota.css

@@ -1,4 +1,4 @@
-/*! chota.css v0.6.2 | MIT License | github.com/jenil/chota */
+/*! chota.css v0.7.0 | MIT License | github.com/jenil/chota */
 :root {
   --color-primary: #14854F;
   --color-lightGrey: #d2d6dd;
@@ -854,22 +854,22 @@ details.dropdown > :last-child {
 .pull-left {
     float: left !important;
 }
-.is-text-center {
+.text-center {
     text-align: center;
 }
-.is-text-left {
+.text-left {
     text-align: left;
 }
-.is-text-right {
+.text-right {
     text-align: right;
 }
-.is-text-uppercase {
+.text-uppercase {
     text-transform: uppercase;
 }
-.is-text-lowercase {
+.text-lowercase {
     text-transform: lowercase;
 }
-.is-text-capitalize {
+.text-capitalize {
     text-transform: capitalize;
 }
 .is-full-screen {

docs/_includes/utilities.html

@@ -1,51 +1,98 @@
 <section id="utilities">
   <h4>Utilities</h4>
-  <p>You can apply these helper classes to almost any element, in order to alter its style.</p>
+  <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>
-    <li><code>text-light</code> - <span class="text-light">Light text</span></li>
+      <code>text-primary</code> - <span class="text-primary">Primary text</span>
-    <li><code>text-white</code> - <span class="bg-primary text-white">White text</span></li>
+    </li>
+    <li>
+      <code>text-light</code> - <span class="text-light">Light text</span>
+    </li>
+    <li>
+      <code>text-white</code> -
+      <span class="bg-primary text-white">White 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>
-    <li><code>text-success</code> - <span class="text-success">Success text</span></li>
+      <code>text-error</code> - <span class="text-error">Error text</span>
-    <li><code>bg-primary</code> - <span class="bg-primary">primary background</span></li>
+    </li>
-    <li><code>bg-light</code> - <span class="bg-light">Light background</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>
-    <li><code>bg-success</code> - <span class="bg-success">Success background</span></li>
+      <code>bg-error</code> - <span class="bg-error">Error background</span>
-    <li><code>bd-primary</code> - <span class="bd-primary">primary border</span></li>
+    </li>
+    <li>
+      <code>bg-success</code> -
+      <span class="bg-success">Success background</span>
+    </li>
+    <li>
+      <code>bd-primary</code> - <span class="bd-primary">primary border</span>
+    </li>
     <li><code>bd-light</code> - <span class="bd-light">Light border</span></li>
     <li><code>bd-dark</code> - <span class="bd-dark">Dark border</span></li>
     <li><code>bd-grey</code> - <span class="bd-grey">Grey border</span></li>
     <li><code>bd-error</code> - <span class="bd-error">Error border</span></li>
-    <li><code>bd-success</code> - <span class="bd-success">Success border</span></li>
+    <li>
+      <code>bd-success</code> - <span class="bd-success">Success border</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>
+    <li><code>text-center</code> - center aligns text</li>
-    <li><code>is-text-left</code> - left aligns text</li>
+    <li><code>text-left</code> - left aligns text</li>
-    <li><code>is-text-right</code> - right aligns text</li>
+    <li><code>text-right</code> - right aligns text</li>
-    <li><code>is-text-uppercase</code> - text to uppercase</li>
+    <li><code>text-uppercase</code> - text to uppercase</li>
-    <li><code>is-text-lowercase</code> - text to lowercase</li>
+    <li><code>text-lowercase</code> - text to lowercase</li>
-    <li><code>is-text-capitalize</code> - capitalizes text</li>
+    <li><code>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>
-    <li><code>is-horizontal-align</code> - horizontal centers element using flex</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>is-round</code> - make the element round</li>
+    <li><code>is-rounded</code> - make the element round</li>
     <li><code>clearfix</code> - clears the floats</li>
     <li><code>is-hidden</code> - hides the element completely</li>
     <li><code>hide-xs</code> - hides the element for screens &lt;600px</li>
-    <li><code>hide-sm</code> - hides the element for screens &gt;=600px and &lt;900px</li>
+    <li>
-    <li><code>hide-md</code> - hides the element for screens &gt;=900px and &lt;1200px</li>
+      <code>hide-sm</code> - hides the element for screens &gt;=600px and
+      &lt;900px
+    </li>
+    <li>
+      <code>hide-md</code> - hides the element for screens &gt;=900px and
+      &lt;1200px
+    </li>
     <li><code>hide-lg</code> - hides the element for screens &gt;=1200px</li>
     <li><code>hide-pr</code> - hides the element for printing</li>
   </ul>
+  <h4>Details</h4>
+  <p>You can have a <code>&lt;details&gt;</code> with a <code>.dropdown</code> class to defines a toggle-able block of content with a summary and additional details.</p>
+  <details class="dropdown">
+    <summary>Read more</summary>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec
+      nulla vitae mollis.
+    </p>
+  </details>
 </section>

docs/index.html

@@ -8,7 +8,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=Edge">
   <title>chota - A micro 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="./chota.css">
   <link rel="stylesheet" href="./doc-styles.css">
   <link rel="icon" type="image/png" href="favicon.png" />
 </head>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "chota",
-  "version": "0.6.3",
+  "version": "0.7.0",
   "description": "A really small CSS framework",
   "main": "dist/chota.min.css",
   "scripts": {

src/_util.css

@@ -84,27 +84,27 @@
     float: left !important;
 }
 
-.is-text-center {
+.text-center {
     text-align: center;
 }
 
-.is-text-left {
+.text-left {
     text-align: left;
 }
 
-.is-text-right {
+.text-right {
     text-align: right;
 }
 
-.is-text-uppercase {
+.text-uppercase {
     text-transform: uppercase;
 }
 
-.is-text-lowercase {
+.text-lowercase {
     text-transform: lowercase;
 }
 
-.is-text-capitalize {
+.text-capitalize {
     text-transform: capitalize;
 }
 

src/chota.css

@@ -1,4 +1,4 @@
-/*! chota.css v0.6.2 | MIT License | github.com/jenil/chota */
+/*! chota.css v0.7.0 | MIT License | github.com/jenil/chota */
 @import "_base.css";
 @import "_grid.css";
 @import "_form.css";