updates 🛠 🎨 🗺 🏷

* remove iframe border 🛠 * fix for nav with logo & text 🗺 * new color & button style 🎨 * new component: tags 🏷
2023-08-10 21:13:07 +03:00 · 2017-11-16 19:44:45 -05:00 · 2017-11-16 19:44:45 -05:00 · c48bf16923
commit c48bf16923
parent d50e7a8c2a
9 changed files with 460 additions and 352 deletions
--- a/dist/chota.css
+++ b/dist/chota.css
@ -2,6 +2,7 @@
 :root {
    --primary-color: #1a9f60;
    --lightGrey-color: #d2d6dd;
+    --darkGrey-color: #84868b;
    --grid-maxWidth: 120rem;
    --grid-gutter: 2rem;
    --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@ -129,10 +130,12 @@ abbr[title] {
 img {
    max-width: 100%;
 }
-fieldset,
-iframe {
+fieldset {
    border: 1px solid var(--lightGrey-color); 
 }
+iframe {
+    border: 0;
+}
 .container {
    max-width: var(--grid-maxWidth);
    margin: 0 auto;
@ -232,112 +235,120 @@ iframe {
    }
 }
 fieldset {
-    padding: 0.5rem 2rem;
+  padding: 0.5rem 2rem;
 }
 legend {
-    text-transform: uppercase;
-    font-size: 0.8em;
-    letter-spacing: 0.1rem;
+  text-transform: uppercase;
+  font-size: 0.8em;
+  letter-spacing: 0.1rem;
 }
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
 select,
 textarea,
-textarea[type=text] {
-    font-family: inherit;
-    padding: 0.7rem 1rem;
-    border-radius: 4px;
-    border: 1px solid var(--lightGrey-color);
-    font-size: 1em;
-    transition: all 0.2s ease;
-    display: block;
-    width: 100%;
+textarea[type="text"] {
+  font-family: inherit;
+  padding: 0.7rem 1rem;
+  border-radius: 4px;
+  border: 1px solid var(--lightGrey-color);
+  font-size: 1em;
+  transition: all 0.2s ease;
+  display: block;
+  width: 100%;
 }
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):hover,
 select:hover,
 textarea:hover,
-textarea[type=text]:hover {
-    border-color: #aaa;
+textarea[type="text"]:hover {
+  border-color: #aaa;
 }
-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus,
 select:focus,
 textarea:focus,
-textarea[type=text]:focus {
-    outline: none;
-    border-color: var(--primary-color);
+textarea[type="text"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
 }
 select {
-    -webkit-appearance: none;
-    background: #fafafa no-repeat 100%;
-    background-size: 1ex;
-    background-origin: content-box;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
+  -webkit-appearance: none;
+  background: #fafafa no-repeat 100%;
+  background-size: 1ex;
+  background-origin: content-box;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
 }
 [type="checkbox"],
 [type="radio"] {
-    width: 1.6rem;
-    height: 1.6rem;
+  width: 1.6rem;
+  height: 1.6rem;
 }
 /* BUTTONS */
 .button,
-[type=button],
-[type=reset],
-[type=submit],
+[type="button"],
+[type="reset"],
+[type="submit"],
 button {
-    padding: 1rem 2.5rem;
-    color: #333;
-    background: #e6e6e6;
-    border-radius: 4px;
-    border: none;
-    font-size: 1.5rem;
-    line-height: 1;
-    text-align: center;
-    transition: opacity 0.2s ease;
-    text-decoration: none;
-    transform: scale(1);
-    display: inline-block;
+  padding: 1rem 2.5rem;
+  color: #333;
+  background: #e6e6e6;
+  border-radius: 4px;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  text-align: center;
+  transition: opacity 0.2s ease;
+  text-decoration: none;
+  transform: scale(1);
+  display: inline-block;
 }
 .button + .button {
-    margin-left: 1rem;
+  margin-left: 1rem;
 }
 .button:hover,
-[type=button]:hover,
-[type=reset]:hover,
-[type=submit]:hover,
+[type="button"]:hover,
+[type="reset"]:hover,
+[type="submit"]:hover,
 button:hover {
-    opacity: 0.8;
+  opacity: 0.8;
 }
 .button:active,
-[type=button]:active,
-[type=reset]:active,
-[type=submit]:active,
+[type="button"]:active,
+[type="reset"]:active,
+[type="submit"]:active,
 button:active {
-    transform: scale(0.98);
+  transform: scale(0.98);
 }
 input[disabled],
 button[disabled],
 input[disabled]:hover,
 button[disabled]:hover {
-    opacity: 0.4;
-    cursor: not-allowed;
+  opacity: 0.4;
+  cursor: not-allowed;
 }
 .button.primary,
-[type=submit] {
-    color: #fff;
-    background-color: #000;
-    background: var(--primary-color);
+.button.secondary,
+[type="submit"] {
+  color: #fff;
+  background-color: #000;
+  background: var(--primary-color);
+}
+.button.secondary {
+  background: var(--darkGrey-color);
 }
 .button.outline {
-    background-color: transparent;
-    border: 1px solid var(--lightGrey-color);
+  background-color: transparent;
+  border: 1px solid var(--lightGrey-color);
 }
 .button.outline.primary {
-    border-color: var(--primary-color);
-    color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+.button.outline.secondary {
+  border-color: var(--darkGrey-color);
+  color: var(--darkGrey-color);
 }
 .button.clear {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--primary-color);
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--primary-color);
 }
 .nav {
    display: -ms-flexbox;
@ -407,6 +418,9 @@ button[disabled]:hover {
    padding-top: 0;
    padding-bottom: 0;
 }
+.nav .brand img {
+    padding-right: 1rem;
+}
 .nav .button {
    margin: auto 1rem;
 }
@ -449,6 +463,26 @@ button[disabled]:hover {
    -ms-flex: 1;
        flex: 1;
 }
+.tag {
+  display: inline-block;
+  border: 1px solid var(--lightGrey-color);
+  text-transform: uppercase;
+  color: var(--darkGrey-color);
+  padding: 0.5rem;
+  line-height: 1;
+  letter-spacing: 0.5px;
+}
+.tag.is-small {
+  padding: 0.4rem;
+  font-size: 0.75em;
+}
+.tag.is-large {
+  padding: 0.7rem;
+  font-size: 1.125em;
+}
+.tag+.tag {
+  margin-left: 1rem;
+}
 .pull-right {
    float: right;
 }
--- a/dist/chota.min.css
+++ b/dist/chota.min.css
--- a/src/_base.css
+++ b/src/_base.css
@ -1,6 +1,7 @@
 :root {
    --primary-color: #1a9f60;
    --lightGrey-color: #d2d6dd;
+    --darkGrey-color: #84868b;
    --grid-maxWidth: 120rem;
    --grid-gutter: 2rem;
    --font-family: -apple-system, BlinkMacSystemFont, Avenir, "Avenir Next", "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
@ -155,7 +156,10 @@ img {
    max-width: 100%;
 }

-fieldset,
-iframe {
+fieldset {
    border: 1px solid var(--lightGrey-color); 
 }
+
+iframe {
+    border: 0;
+}
--- a/src/_form.css
+++ b/src/_form.css
@ -1,123 +1,133 @@
 fieldset {
-    padding: 0.5rem 2rem;
+  padding: 0.5rem 2rem;
 }

 legend {
-    text-transform: uppercase;
-    font-size: 0.8em;
-    letter-spacing: 0.1rem;
+  text-transform: uppercase;
+  font-size: 0.8em;
+  letter-spacing: 0.1rem;
 }

-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]),
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]),
 select,
 textarea,
-textarea[type=text] {
-    font-family: inherit;
-    padding: 0.7rem 1rem;
-    border-radius: 4px;
-    border: 1px solid var(--lightGrey-color);
-    font-size: 1em;
-    transition: all 0.2s ease;
-    display: block;
-    width: 100%;
+textarea[type="text"] {
+  font-family: inherit;
+  padding: 0.7rem 1rem;
+  border-radius: 4px;
+  border: 1px solid var(--lightGrey-color);
+  font-size: 1em;
+  transition: all 0.2s ease;
+  display: block;
+  width: 100%;
 }

-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):hover,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):hover,
 select:hover,
 textarea:hover,
-textarea[type=text]:hover {
-    border-color: #aaa;
+textarea[type="text"]:hover {
+  border-color: #aaa;
 }

-input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]):not([type=button]):not([type=reset]):focus,
+input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="color"]):not([type="button"]):not([type="reset"]):focus,
 select:focus,
 textarea:focus,
-textarea[type=text]:focus {
-    outline: none;
-    border-color: var(--primary-color);
+textarea[type="text"]:focus {
+  outline: none;
+  border-color: var(--primary-color);
 }

 select {
-    -webkit-appearance: none;
-    background: #fafafa no-repeat 100%;
-    background-size: 1ex;
-    background-origin: content-box;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
+  -webkit-appearance: none;
+  background: #fafafa no-repeat 100%;
+  background-size: 1ex;
+  background-origin: content-box;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='40' fill='#555'><polygon points='0,0 60,0 30,40'/></svg>");
 }

 [type="checkbox"],
 [type="radio"] {
-    width: 1.6rem;
-    height: 1.6rem;
+  width: 1.6rem;
+  height: 1.6rem;
 }

 /* BUTTONS */
 .button,
-[type=button],
-[type=reset],
-[type=submit],
+[type="button"],
+[type="reset"],
+[type="submit"],
 button {
-    padding: 1rem 2.5rem;
-    color: #333;
-    background: #e6e6e6;
-    border-radius: 4px;
-    border: none;
-    font-size: 1.5rem;
-    line-height: 1;
-    text-align: center;
-    transition: opacity 0.2s ease;
-    text-decoration: none;
-    transform: scale(1);
-    display: inline-block;
+  padding: 1rem 2.5rem;
+  color: #333;
+  background: #e6e6e6;
+  border-radius: 4px;
+  border: none;
+  font-size: 1.5rem;
+  line-height: 1;
+  text-align: center;
+  transition: opacity 0.2s ease;
+  text-decoration: none;
+  transform: scale(1);
+  display: inline-block;
 }

 .button + .button {
-    margin-left: 1rem;
+  margin-left: 1rem;
 }

 .button:hover,
-[type=button]:hover,
-[type=reset]:hover,
-[type=submit]:hover,
+[type="button"]:hover,
+[type="reset"]:hover,
+[type="submit"]:hover,
 button:hover {
-    opacity: 0.8;
+  opacity: 0.8;
 }

 .button:active,
-[type=button]:active,
-[type=reset]:active,
-[type=submit]:active,
+[type="button"]:active,
+[type="reset"]:active,
+[type="submit"]:active,
 button:active {
-    transform: scale(0.98);
+  transform: scale(0.98);
 }

 input[disabled],
 button[disabled],
 input[disabled]:hover,
 button[disabled]:hover {
-    opacity: 0.4;
-    cursor: not-allowed;
+  opacity: 0.4;
+  cursor: not-allowed;
 }

 .button.primary,
-[type=submit] {
-    color: #fff;
-    background-color: #000;
-    background: var(--primary-color);
+.button.secondary,
+[type="submit"] {
+  color: #fff;
+  background-color: #000;
+  background: var(--primary-color);
+}
+
+.button.secondary {
+  background: var(--darkGrey-color);
 }

 .button.outline {
-    background-color: transparent;
-    border: 1px solid var(--lightGrey-color);
+  background-color: transparent;
+  border: 1px solid var(--lightGrey-color);
 }

 .button.outline.primary {
-    border-color: var(--primary-color);
-    color: var(--primary-color);
+  border-color: var(--primary-color);
+  color: var(--primary-color);
+}
+
+.button.outline.secondary {
+  border-color: var(--darkGrey-color);
+  color: var(--darkGrey-color);
 }

 .button.clear {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--primary-color);
+  background-color: transparent;
+  border-color: transparent;
+  color: var(--primary-color);
 }
--- a/src/_nav.css
+++ b/src/_nav.css
@ -64,6 +64,10 @@
    padding-bottom: 0;
 }

+.nav .brand img {
+    padding-right: 1rem;
+}
+
 .nav .button {
    margin: auto 1rem;
 }
--- a/src/_tag.css
+++ b/src/_tag.css
@ -0,0 +1,23 @@
+.tag {
+  display: inline-block;
+  border: 1px solid var(--lightGrey-color);
+  text-transform: uppercase;
+  color: var(--darkGrey-color);
+  padding: 0.5rem;
+  line-height: 1;
+  letter-spacing: 0.5px;
+}
+
+.tag.is-small {
+  padding: 0.4rem;
+  font-size: 0.75em;
+}
+
+.tag.is-large {
+  padding: 0.7rem;
+  font-size: 1.125em;
+}
+
+.tag+.tag {
+  margin-left: 1rem;
+}
--- a/src/chota.css
+++ b/src/chota.css
@ -6,5 +6,6 @@
@import "_nav.css";
@import "_card.css";
@import "_tab.css";
+@import "_tag.css";

@import "_util.css";
--- a/test/components.html
+++ b/test/components.html
@ -14,6 +14,9 @@
 </head>

 <body>
+  <div class="container">
+    <h1>Nav</h1>
+  </div>
  <nav class="nav">
    <div class="container">
      <div class="nav-left">
@ -30,6 +33,8 @@
    </div>
  </nav>
  <br>
+  <hr>
+  <br>
  <nav class="nav">
    <div class="nav-left">
      <a class="brand" href="#">Logo</a>
@ -44,243 +49,268 @@
    </div>
  </nav>
  <div class="container">
-    <h1>Nav</h1>
-    <nav class="nav">
-      <div class="nav-center">
-        <a href="#!1.html">Link 1</a>
-        <a href="#!2.html">Link 2</a>
-        <a href="#!3.html" class="active">Link 3</a>
-        <a href="#!" class="button primary">Button</a>
-      </div>
-    </nav>
-    <br><hr><br>
-    <nav class="nav">
-      <div class="nav-left">
-        <a class="brand" href="#">Brand</a>
-      </div>
-      <div class="nav-right">
-        <div class="tabs">
+    <section>
+      <br>
+      <hr>
+      <br>
+      <nav class="nav">
+        <div class="nav-center">
          <a href="#!1.html">Link 1</a>
          <a href="#!2.html">Link 2</a>
          <a href="#!3.html" class="active">Link 3</a>
+          <a href="#!" class="button primary">Button</a>
+        </div>
+      </nav>
+      <br>
+      <hr>
+      <br>
+      <nav class="nav">
+        <div class="nav-left">
+          <a class="brand" href="#">
+            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt=""> Brand</a>
+        </div>
+        <div class="nav-right">
+          <div class="tabs">
+            <a href="#!1.html">Link 1</a>
+            <a href="#!2.html">Link 2</a>
+            <a href="#!3.html" class="active">Link 3</a>
+          </div>
+        </div>
+      </nav>
+      <br>
+      <hr>
+      <br>
+      <nav class="nav">
+        <div class="nav-left">
+          <a class="brand" href="#">
+            <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
+          </a>
+          <div class="tabs">
+            <a href="#!1.html">Link 1</a>
+            <a href="#!2.html">Link 2</a>
+            <a href="#!3.html">Link 3</a>
+          </div>
+        </div>
+      </nav>
+      <br>
+      <hr>
+      <br>
+    </section>
+    <section>
+      <h1>Tabs</h1>
+      <div class="tabs">
+        <a class="active" href="#!1.html">Tab 1</a>
+        <a href="#!2.html">Tab 2</a>
+        <a href="#!3.html">Tab 3</a>
+      </div>
+      <br>
+      <hr>
+      <br>
+      <div class="tabs is-full">
+        <a class="active" href="#!1.html">Tab 1</a>
+        <a href="#!2.html">Tab 2</a>
+        <a href="#!3.html">Tab 3</a>
+      </div>
+    </section>
+    <section>
+      <h1>Card</h1>
+      <div class="row is-center">
+        <div class="col-4">
+          <div class="card">
+            <header>
+              <h4>Card title</h4>
+            </header>
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+              magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
+            <footer class="is-right">
+              <a href="#!" class="button primary">Submit</a>
+              <a href="#!" class="button">Cancel</a>
+            </footer>
+          </div>
+        </div>
+        <div class="col-6">
+          <div class="card">
+            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+              magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
+            <p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, nobis,
+              debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti enim!</p>
+          </div>
        </div>
      </div>
-    </nav>
-    <br><hr><br>
-    <nav class="nav">
-      <div class="nav-left">
-        <a class="brand" href="#">
-          <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" alt="">
-        </a>
-        <div class="tabs">
-          <a href="#!1.html">Link 1</a>
-          <a href="#!2.html">Link 2</a>
-          <a href="#!3.html">Link 3</a>
+    </section>
+    <section>
+      <h1>Tag</h1>
+      <p><span class="tag">One</span><span class="tag">Two</span><span class="tag">Three</span><span class="tag is-small">Small</span><span class="tag is-large">Large</span></p>
+    </section>
+    <section>
+      <h1>Grid</h1>
+      <div class="row">
+        <div class="col">
+          <div class="card is-center">.col</div>
        </div>
      </div>
-    </nav>
-    <br><hr><br>
-    
-    <h1>Tabs</h1>
-    <div class="tabs">
-      <a class="active" href="#!1.html">Tab 1</a>
-      <a href="#!2.html">Tab 2</a>
-      <a href="#!3.html">Tab 3</a>
-    </div>
-    <br> <hr> <br>
-    <div class="tabs is-full">
-      <a class="active" href="#!1.html">Tab 1</a>
-      <a href="#!2.html">Tab 2</a>
-      <a href="#!3.html">Tab 3</a>
-    </div>
-    <h1>Card</h1>
-    <div class="row is-center">
-      <div class="col-4">
-        <div class="card">
-          <header>
-            <h4>Card title</h4>
-          </header>
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
-          <footer class="is-right">
-            <a href="#!" class="button primary">Submit</a>
-            <a href="#!" class="button">Cancel</a>
-          </footer>
+      <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>
-      <div class="col-6">
-        <div class="card">
-          <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercit.</p>
-          <p>Ipsa magnam consequatur itaque, mollitia non quam voluptate consequuntur dignissimos recusandae ea quas, nobis, debitis officia iure minus et dolore, reprehenderit sapiente iste. Eligendi eveniet ut qui at, deleniti enim!</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>
-    <h1>Grid</h1>
-    <div class="row">
-      <div class="col">
-        <div class="card is-center">.col</div>
+      <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-2">
+          <div class="card is-center">.col-2</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
      </div>
-    </div>
-    <div class="row">
-      <div class="col">
-        <div class="card is-center">.col</div>
+      <div class="row">
+        <div class="col-3">
+          <div class="card is-center">.col-3</div>
+        </div>
+        <div class="col-3">
+          <div class="card is-center">.col-3</div>
+        </div>
+        <div class="col-3">
+          <div class="card is-center">.col-3</div>
+        </div>
+        <div class="col-3">
+          <div class="card is-center">.col-3</div>
+        </div>
      </div>
-      <div class="col">
-        <div class="card is-center">.col</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="col">
-        <div class="card is-center">.col</div>
+      <div class="row">
+        <div class="col-5">
+          <div class="card is-center">.col-5</div>
+        </div>
+        <div class="col-5">
+          <div class="card is-center">.col-5</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
      </div>
-    </div>
-    <div class="row">
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-6">
+          <div class="card is-center">.col-6</div>
+        </div>
+        <div class="col-6">
+          <div class="card is-center">.col-6</div>
+        </div>
      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-7">
+          <div class="card is-center">.col-7</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-8">
+          <div class="card is-center">.col-8</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-9">
+          <div class="card is-center">.col-9</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
+        <div class="col-1">
+          <div class="card is-center">.col-1</div>
+        </div>
      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</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">.col</div>
+        </div>
      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-11">
+          <div class="card is-center">.col-11</div>
+        </div>
+        <div class="col">
+          <div class="card is-center">.col</div>
+        </div>
      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
+      <div class="row">
+        <div class="col-12">
+          <div class="card is-center">.col-12</div>
+        </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-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-2">
-        <div class="card is-center">.col-2</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-3">
-        <div class="card is-center">.col-3</div>
-      </div>
-      <div class="col-3">
-        <div class="card is-center">.col-3</div>
-      </div>
-      <div class="col-3">
-        <div class="card is-center">.col-3</div>
-      </div>
-      <div class="col-3">
-        <div class="card is-center">.col-3</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-5">
-        <div class="card is-center">.col-5</div>
-      </div>
-      <div class="col-5">
-        <div class="card is-center">.col-5</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-6">
-        <div class="card is-center">.col-6</div>
-      </div>
-      <div class="col-6">
-        <div class="card is-center">.col-6</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-7">
-        <div class="card is-center">.col-7</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-8">
-        <div class="card is-center">.col-8</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-9">
-        <div class="card is-center">.col-9</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-      <div class="col-1">
-        <div class="card is-center">.col-1</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">.col</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-11">
-        <div class="card is-center">.col-11</div>
-      </div>
-      <div class="col">
-        <div class="card is-center">.col</div>
-      </div>
-    </div>
-    <div class="row">
-      <div class="col-12">
-        <div class="card is-center">.col-12</div>
-      </div>
-    </div>
+    </section>
  </div>
 </body>

--- a/test/index.html
+++ b/test/index.html
@ -465,8 +465,10 @@
            <p>
              <a href="#" class="button">a.button</a>
              <a href="#" class="button primary">a.button.primary</a>
+              <a href="#" class="button secondary">a.button.secondary</a>
              <a href="#" class="button outline">a.button.outline</a>
              <a href="#" class="button outline primary">a.button.outline.primary</a>
+              <a href="#" class="button outline secondary">a.button.outline.secondary</a>
              <a href="#" class="button clear">a.button.clear</a>
            </p>
          </fieldset>