Last active
August 29, 2015 14:12
-
-
Save justrjlewis/de2a92cdad1fdb460642 to your computer and use it in GitHub Desktop.
styleguide
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="en"> | |
| <head> | |
| <!-- | |
| Copyright (c) RJ Lewis| http://justrjlewis.com/ | |
| --> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> | |
| <title>Getting It Right!</title> | |
| <!--[if lte IE 8]> | |
| <link rel="stylesheet" href="css/app-old-ie.css"> | |
| <![endif]--> | |
| <!--[if gt IE 8]><!--> | |
| <link rel="stylesheet" href="../css/app.css"> | |
| <link rel="stylesheet" href="../typography.css"> | |
| <link rel="stylesheet" href="../css/slicknav.css" /> | |
| <!--<![endif]--> | |
| <!-- <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> --> | |
| <script src="../js/jquery-1.11.1.min.js"></script> | |
| <script src="../js/jquery.slicknav.min.js"></script> | |
| </head> | |
| <body> | |
| <div class="canvas"> | |
| <!--[if lt IE 10]> | |
| <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> to improve your experience.</p> | |
| <![endif]--> | |
| <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/" target="_blank">upgrade your browser</a> to improve your experience.</p> | |
| <header class="jrj-header"> | |
| <div class="page" data-ui-component="header-bar__container"> | |
| <div class="logo" data-ui-component="logo"> | |
| </div> | |
| <nav class="nav-bar"> | |
| <ul class="menubar"> | |
| <li class="menubar__item nav-selected"> | |
| <a class="menubar__item-target" href="complex.html">complex</a> | |
| </li> | |
| <li class="menubar__item"> | |
| <a class="menubar__item-target" href="default.html">default</a> | |
| </li> | |
| <li class="menubar__item"> | |
| <a class="menubar__item-target" href="left_sidebar.html">left_sidebar</a> | |
| </li> | |
| <li class="menubar__item"> | |
| <a class="menubar__item-target" href="full.html">full</a> | |
| </li> | |
| </ul> | |
| </nav> | |
| </div> | |
| </header> | |
| <div class="header-image"> | |
| </div> | |
| <div class="ribbon" data-ui-component="ribbon__row"> | |
| <div class="page" data-ui-component="ribbon__container"> | |
| </div> | |
| </div> | |
| <div class="main-content" data-ui-component="main-content__row"> | |
| <div class="page three-col-container" data-ui-component="three-panel-content-area__container"> | |
| <h2>Three Panel Content Area</h2> | |
| <div class="three-col" data-ui-component="featured-content-area__container"> | |
| <h4>Heading</h4> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus molestias voluptatum eaque nesciunt, libero omnis, blanditiis deleniti ab tenetur minus tempora sunt. Laudantium ab, fugiat, iusto fugit cumque nihil ratione dignissimos consequatur illum reprehenderit id laboriosam repellendus nulla rem velit impedit quis suscipit itaque. Ut voluptatibus unde autem dolorum, sapiente expedita repellendus error saepe, labore magni, animi natus temporibus, dignissimos? | |
| </div> | |
| <div class="three-col" data-ui-component="featured-content-area__container"> | |
| <h4>Heading</h4> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis deleniti rem, consequuntur eveniet praesentium, veritatis deserunt iure dolorum dignissimos, cupiditate unde. Velit possimus laboriosam iure porro? Quis placeat ratione vitae accusantium laboriosam totam iure veritatis quam sequi accusamus quos consequatur sed beatae saepe explicabo, eligendi, blanditiis tenetur omnis fugiat nesciunt. Quisquam est sapiente, culpa, quasi voluptatem inventore! Ullam, sit, deserunt! | |
| </div> | |
| <div class="three-col" data-ui-component="featured-content-area__container"> | |
| <h4>Heading</h4> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam, repellendus sunt dolore natus commodi. Doloremque architecto omnis cupiditate, reiciendis atque veniam tempora aperiam. Ad mollitia labore ea. Vitae quos reprehenderit atque, ea ipsum at architecto, est ipsa porro nobis modi voluptatibus ad impedit, repudiandae itaque nulla enim odio. Non minima, eligendi quo, ut sequi voluptate magni tenetur illo doloribus. | |
| </div> | |
| </div> | |
| <div class="page" data-ui-component="full-width-content-area__container"> | |
| <h2>Full Width Content Area</h2> | |
| <div class="fw-col" data-ui-component="featured-content-area__container"> | |
| <h4>Heading</h4> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus molestias voluptatum eaque nesciunt, libero omnis, blanditiis deleniti ab tenetur minus tempora sunt. Laudantium ab, fugiat, iusto fugit cumque nihil ratione dignissimos consequatur illum reprehenderit id laboriosam repellendus nulla rem velit impedit quis suscipit itaque. Ut voluptatibus unde autem dolorum, sapiente expedita repellendus error saepe, labore magni, animi natus temporibus, dignissimos? | |
| </div> | |
| </div> | |
| <div class="page four-col-container" data-ui-component="four-panel-content-area__container"> | |
| <h2>Four Panel Content Area</h2> | |
| <div class="four-col" data-ui-component="featured-content-area__container"> | |
| <h4>Heading</h4> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus molestias voluptatum eaque nesciunt, libero omnis, blanditiis deleniti ab tenetur minus tempora sunt. Laudantium ab, fugiat, iusto fugit cumque nihil ratione dignissimos consequatur illum reprehenderit id laboriosam repellendus nulla rem velit impedit quis suscipit itaque. Ut voluptatibus unde autem dolorum, sapiente expedita repellendus error saepe, labore magni, animi natus temporibus, dignissimos? | |
| </div> | |
| <div class="four-col" data-ui-component="featured-content-area__container"> | |
| <h4>Heading</h4> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus molestias voluptatum eaque nesciunt, libero omnis, blanditiis deleniti ab tenetur minus tempora sunt. Laudantium ab, fugiat, iusto fugit cumque nihil ratione dignissimos consequatur illum reprehenderit id laboriosam repellendus nulla rem velit impedit quis suscipit itaque. Ut voluptatibus unde autem dolorum, sapiente expedita repellendus error saepe, labore magni, animi natus temporibus, dignissimos? | |
| </div> | |
| <div class="four-col" data-ui-component="featured-content-area__container"> | |
| <h4>Heading</h4> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis deleniti rem, consequuntur eveniet praesentium, veritatis deserunt iure dolorum dignissimos, cupiditate unde. Velit possimus laboriosam iure porro? Quis placeat ratione vitae accusantium laboriosam totam iure veritatis quam sequi accusamus quos consequatur sed beatae saepe explicabo, eligendi, blanditiis tenetur omnis fugiat nesciunt. Quisquam est sapiente, culpa, quasi voluptatem inventore! Ullam, sit, deserunt! | |
| </div> | |
| <div class="four-col" data-ui-component="featured-content-area__container"> | |
| <h4>Heading</h4> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus ullam, repellendus sunt dolore natus commodi. Doloremque architecto omnis cupiditate, reiciendis atque veniam tempora aperiam. Ad mollitia labore ea. Vitae quos reprehenderit atque, ea ipsum at architecto, est ipsa porro nobis modi voluptatibus ad impedit, repudiandae itaque nulla enim odio. Non minima, eligendi quo, ut sequi voluptate magni tenetur illo doloribus. | |
| </div> | |
| </div> | |
| <hr class="divider section"> | |
| <div class="page" data-ui-component="typography-content-area__container"> | |
| <h3>Headers</h3> | |
| <h1>Heading 1</h1> | |
| <h2>Heading 2</h2> | |
| <h3>Heading 3</h3> | |
| <h4>Heading 4</h4> | |
| <h5>Heading 5</h5> | |
| <h6>Heading 6</h6> | |
| <hr> | |
| <h3>Sub-headers</h3> | |
| <h1>Sub Heading 1</h1> | |
| <h2>Sub Heading 2</h2> | |
| <h3>Sub Heading 3</h3> | |
| <h4>Sub Heading 4</h4> | |
| <h5>Sub Heading 5</h5> | |
| <h6>Sub Heading 6</h6> | |
| </div> | |
| <hr class="divider section"> | |
| <div class="page" data-ui-component="list-style-content-area__container"> | |
| <h3>List Styles</h3> | |
| <ul class="ui-list"> | |
| <li class="list-item">List item</li> | |
| <li class="list-item">List item | |
| <ul class="ui-list__nested"> | |
| <li class="list-item__nested">List item</li> | |
| <li class="list-item__nested">List item</li> | |
| </ul> | |
| </li> | |
| </ul> | |
| </div> | |
| </div> | |
| <hr class="divider section"> | |
| <footer> | |
| <div class="page right-sidebar footer-top" data-ui-component="right-sidebar-content-area__container"> | |
| <div class="main-content"> | |
| <h3>Blockquote</h3> | |
| <blockquote> | |
| Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus molestias voluptatum eaque nesciunt, libero omnis, blanditiis deleniti ab tenetur minus tempora sunt. | |
| <cite>Important Person</cite> | |
| </blockquote> | |
| </div> | |
| <aside class="jrj-sidebar-lrg"> | |
| <h3>Address Card</h3> | |
| <ul class="vcard"> | |
| <li class="fn">Gaius Baltar</li> | |
| <li class="street-address">123 Colonial Ave.</li> | |
| <li class="locality">Caprica City</li> | |
| <li><span class="state">Caprica</span>, <span class="zip">12345</span></li> | |
| <li class="email"><a href="#">g.baltar@example.com</a></li> | |
| </ul> | |
| </aside> | |
| </div> | |
| <div class="page four-col-container footer-bottom" data-ui-component="website-credit-content-area__container"> | |
| <div> | |
| <small> | |
| © 2015 Client. All Rights Reserved. | |
| </small> | |
| </div> | |
| <div> | |
| <small> | |
| Powered by: <a href="http://www.concrete5.org/r/-/82257" target="_blank">Concrete 5</a> | |
| </small> | |
| </div> | |
| <div> | |
| <small> | |
| Website by <a href="http://justrjlewis.com" target="_blank">RJ Lewis</a> | |
| </small> | |
| </div> | |
| <div> | |
| <small> | |
| <a href="nowhere">Sign in to Edit this Site</a> | |
| </small> | |
| </div> | |
| </div> | |
| </footer> | |
| </div> | |
| <script>document.write('<script src="http://' + (location.host || 'localhost').split(':')[0] + ':35729/livereload.js?snipver=1"></' + 'script>')</script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment