calcite

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Calcite | A crystalline CSS toolkit for UI development</title> <link rel="stylesheet" type="text/css" href="/dist/css/calcite.css"> <link rel="stylesheet" type="text/css" href="/github.css"> <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,700,700i,800|Lora:400,700" rel="stylesheet"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="mobile-web-app-capable" content="yes"> <link rel="icon" type="image/png" href="/favicon.png"> <meta property="og:locale" content="en_US" /> <meta property="og:type" content="website" /> <meta property="og:title" content="Calcite | A crystalline CSS toolkit" /> <meta property="og:description" content="Calcite is a low-level utility CSS framework for rapid web development and prototyping" /> <meta property="og:url" content="https://calcite.aschmelyun.com" /> <meta property="og:site_name" content="Calcite" /> <meta name="twitter:card" content="summary" /> <meta name="twitter:description" content="Calcite is a low-level utility CSS framework for rapid web development and prototyping" /> <meta name="twitter:title" content="Calcite | A crystalline CSS toolkit" /> <meta name="twitter:site" content="@aschmelyun" /> <meta name="twitter:image" content="https://calcite.aschmelyun.com/img/gem-emoji.png"> <style> .logo { font-size: 1.75rem; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; display: flex; align-items: center; height: 100%; } .wrapper > .row { margin: 0; } .hljs { background: none; padding: 0; } .font-lora { font-family: "Lora", serif; font-weight: 400; } </style> </head> <body class="bs-border-box"> <header class="header wrapper bg-red"> <div class="row"> <div class="col-sm-6"> <div class="logo"> <span>Calcite</span> <span class="fs-x-small fw-normal clr-barely-clear-white tt-lowercase pt-3 ml-2">v0.3.0</span> </div> </div> <nav class="col-sm-6 navbar"> <ul class="ls-none flex jc-flex-end ai-center mtb-2"> <li><a href="https://github.com/aschmelyun/calcite" target="_blank" rel="noopener noreferrer" class="clr-barely-clear-white fs-small hover--clr-white">GitHub</a></li> <li class="ml-4"><a href="https://github.com/aschmelyun/calcite/raw/master/dist/css/calcite.css" class="inline-block bg-very-clear-white br-1 clr-barely-clear-white plr-4 ptb-2 fs-small hover--bg-semi-clear-white hover--clr-white">Download</a></li> </ul> </nav> </div> </header> <div class="wrapper"> <div class="row"> <div class="col-sm-3"> <nav class="list fs-x-small"> <ul class="ls-none"> <li><a class="fw-bold clr-dark-grey hover--clr-red" href="#overview">Overview</a></li> <ul class="ls-none bdr-left-silver pl-3 ml-5 mt-1"> <li><a href="#usage" class="clr-dark-grey hover--clr-red">Usage</a></li> <li><a href="#installation" class="clr-dark-grey hover--clr-red">Installation</a></li> <li><a href="#compiling-scss" class="clr-dark-grey hover--clr-red">Compiling SCSS</a></li> <li><a href="#variables" class="clr-dark-grey hover--clr-red">Variables</a></li> </ul> <li class="mt-3"><a class="fw-bold clr-dark-grey hover--clr-red" href="#layout">Layout</a></li> <ul class="ls-none bdr-left-silver pl-3 ml-5 mt-1"> <li><a class="clr-dark-grey hover--clr-red" href="#grids">Grid</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#typography">Typography</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#media">Media</a></li> </ul> <li class="mt-3"><a class="fw-bold clr-dark-grey hover--clr-red" href="#modules">Modules</a></li> <ul class="ls-none bdr-left-silver pl-3 ml-5 mt-1"> <li><a class="clr-dark-grey hover--clr-red" href="#spacing">Spacing</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#colors">Colors</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#font-styles">Font Styles</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#flexbox">Flexbox</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#positioning">Positioning</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#sizing">Sizing</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#lists">Lists</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#borders">Borders</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#border-radius">Border Radius</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#box-shadow">Box Shadow</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#animations">Animations</a></li> <li><a class="clr-dark-grey hover--clr-red" href="#box-sizing">Box Sizing</a></li> </ul> </ul> </nav> </div> <div class="col-xs col-sm-9 mt-2 clr-dark-grey"> <h1 class="fw-light" id="overview">Overview</h1> <section class="section mt-6" id="usage"> <h2 class="fw-light pb-2 bdr-bottom-silver">Usage</h2> <p class="lh-4 font-lora">Calcite is a <strong>low-level utility CSS framework</strong>, designed to help you get a website or web-app prototype up and running in as little time as possible, without needing to build or edit a lot of CSS classes.</p> <p class="lh-4 font-lora">Being low-level means that the modifications that each class does are very simple, and usually contained within that class alone. For instance, in a typical CSS framework you might have been given a class called <span class="ff-monospace clr-red">button</span>, which by default has rounded edges, a blue background, white text, and bolded 14px font. If you wanted to make changes to all (or just one) of those buttons, you would need to override those class properties in a custom stylesheet. With Calcite, there is no such default. If you wanted to replicate that behavior you might add the classes <span class="ff-monospace clr-red">br-2 background-blue clr-white fs-small fw-bold</span> to your button element. That way each style is modular, independent from the whole and can be changed on a per-element basis to fit your needs.</p> </section> <section class="section mt-6" id="installation"> <h2 class="fw-light pb-2 bdr-bottom-silver">Installation</h2> <p class="lh-4 font-lora">Getting Calcite is super easy. You can download the up-to-date minified CSS file directly using <a href="https://github.com/aschmelyun/calcite/raw/master/dist/css/calcite.css">this link</a> or the download button at the top of this page.</p> <p class="lh-4 font-lora">If you're using NPM, you can run <span class="ff-monospace clr-red">npm install calcite</span> to get the entire latest package. From there, you can include the minified CSS file located under <span class="ff-monospace clr-grey">/dist/css/</span> or extend on the source SCSS files located at <span class="ff-monospace clr-grey">/assets/sass/</span>. </p> </section> <section class="section mt-6" id="compiling-scss"> <h2 class="fw-light pb-2 bdr-bottom-silver">Compiling SCSS</h2> <p class="lh-4 font-lora">If you'd like to tinker with the source of Calcite, getting started is super easy! Everything is compiled through Laravel's mix wrapper for webpack. After cloning the github repo, open a terminal and dive into the parent folder. Once there, just run <span class="ff-monospace clr-red">npm install && npm run watch</span>. This should spin up a local server and open up a browser window on your localhost.</p> <p class="lh-4 font-lora">Browsersync is included and will watch for changes on the source SCSS files, recompiling and injecting the them into your opened browser. Before you finish up, run <span class="ff-monospace clr-red">npm run production</span> to get a minified CSS file that includes your changes. </p> </section> <section class="section mt-6 mb-10" id="variables"> <h2 class="fw-light pb-2 bdr-bottom-silver">Variables</h2> <p class="lh-4 font-lora">Most of Calcite's styles are all manipulatable through a main <span class="ff-monospace clr-red">_var.scss</span> file located in the <span class="ff-monospace clr-grey">/assets/sass/base/</span> folder of the repo. The bulk of these variables are laid out in Sass maps, akin to associative arrays. The data being represented by a <i>class_name: data_value</i> structure. For instance, under <span class="ff-monospace clr-red">$font-sizes</span> you'll see a line for <span class="ff-monospace clr-grey">small: 0.88rem</span>, where 'small' is used in <span class="ff-monospace clr-grey">modules/_fonts.scss</span> to create the class "fs-small" with a value of font-size: 0.88rem; </p> </section> <h1 class="fw-light" id="layout">Layout</h1> <section class="section mt-6" id="grid"> <h2 class="fw-light pb-2 bdr-bottom-silver">Grid</h2> <p class="lh-4 font-lora">Calcite comes with a grid module that helps you easily build out layouts with a syntax that's fairly universal throughout most modern front-end frameworks. It's a 100% flex-based grid that uses <a href="http://flexboxgrid.com" target="_blank">flexboxgrid</a> for the bulk of the styles and functionality. The bulk of browsers used regularly right now are compatible with flexbox. If you want to make this fully-compatible on older browsers like IE <11, I'd recommend a JS-powered polyfill (<a href="https://github.com/jonathantneal/flexibility" target="_blank">flexibility</a> is a good one).</p> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Examples</h3> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="html"> <div class="row"><br>     <div class="col-xs-6 col-md-3"></div><br>     <div class="col-xs-6"></div><br>     <div class="col-xs-12 col-md-3"></div><br> </div> </code> </pre> <div class="row"> <div class="col-md-3 col-xs-6"><div class="p-2 fs-small bg-silver br-1 mb-3"> </div></div> <div class="col-xs-6"><div class="p-2 fs-small bg-silver br-1 mb-3"> </div></div> <div class="col-md-3 col-xs-12"><div class="p-2 fs-small bg-silver br-1 mb-3"> </div></div> </div> <pre class="ws-normal fs-small m-0 mt-6 ptb-3"> <code class="html"> <div class="row"><br>     <div class="col-xs-12"></div><br>     <div class="col-xs-12 col-sm-6 col-lg-4"></div><br>     <div class="col-xs-12 col-md-6 col-lg-4 col-lg-offset-4"></div><br> </div> </code> </pre> <div class="row"> <div class="col-xs-12"><div class="p-2 fs-small bg-silver br-1 mb-3"> </div></div> <div class="col-xs-12 col-sm-6 col-lg-4"><div class="p-2 fs-small bg-silver br-1 mb-3"> </div></div> <div class="col-xs-12 col-sm-6 col-lg-4 col-lg-offset-4"><div class="p-2 fs-small bg-silver br-1 mb-3"> </div></div> </div> <pre class="ws-normal fs-small m-0 mt-6 ptb-3"> <code class="html"> <div class="row"><br>     <div class="col-xs-12"><br>         <div class="row"><br>             <div class="col-sm-9"></div><br>             <div class="col-sm-3"></div><br>         </div><br>     </div><br> </div> </code> </pre> <div class="row"> <div class="col-xs-12"> <div class="bg-silver br-1 p-2"> <div class="row"> <div class="col-sm-9"><div class="p-2 bg-grey br-1"> </div></div> <div class="col-sm-3"><div class="p-2 bg-grey br-1"> </div></div> </div> </div> </div> </div> </section> <section class="section mt-8" id="typography"> <h2 class="fw-light pb-2 bdr-bottom-silver">Typography</h2> <p class="font-lora">By default, Calcite uses Arial as the font family on all elements. This is of course customizable by changing the value in the <span class="clr-red ff-monospace">$font-family-primary</span> variable present in base/_vars.scss. All headings and base text tags use the default browser font sizes and styles, with padding and margins stripped away. These can be adjusted with the <strong>p-</strong> and <strong>m-</strong> module classes.</p> <div class="row"> <div class="col-xs-12"> <h1>h1 Heading Text</h1> <h2>h2 Heading Text</h2> <h3>h3 Heading Text</h3> <h4>h4 Heading Text</h4> <h5>h5 Heading Text</h5> <h6>h6 Heading Text</h6> </div> </div> <div class="row"> <div class="col-xs-12"> <p>This is a standard <p> tag with default text styling. <strong><strong></strong> and <em><em></em> tags work in this as well.</p> </div> </div> <div class="row"> <div class="col-sm-6"> <ul> <li>Default</li> <li>Unordered</li> <li>List</li> </ul> </div> <div class="col-sm-6"> <ol> <li>Default</li> <li>Ordered</li> <li>List</li> </ol> </div> </div> </section> <section class="section mt-8 mb-10" id="media"> <h2 class="fw-light mt-6 pb-2 bdr-bottom-silver">Media</h2> <p class="font-lora">There's a few default styles included to help wrangle in your media. For instance, <img> and <video> tags are set to <span class="ff-monospace clr-red">max-width: 100%;</span> in order to prevent them from overflowing their container elements. The rest of your customizations should be made through module classes.</p> </section> <h1 class="fw-light" id="modules">Modules</h1> <section class="section mt-6" id="spacing"> <h2 class="fw-light pb-2 bdr-bottom-silver">Spacing</h2> <p class="font-lora">Use these classes to add margins and padding around your elements. You can specify a specific direction, two opposing directions at once (e.g. up and down, left and right), or the entire element as a whole.</p> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Prefixes</h3> <div class="row"> <div class="col-sm-6"> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> .m- /* margin, all around */<br> .mb- /* margin, bottom */<br> .mt- /* margin, top */<br> .mtb- /* margin, top and bottom */<br> .ml- /* margin, left */<br> .mr- /* margin, right */<br> .mlr- /* margin, left and right */ </code> </pre> </div> <div class="col-sm-6"> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> .p- /* padding, all around */<br> .pb- /* padding, bottom */<br> .pt- /* padding, top */<br> .ptb- /* padding, top and bottom */<br> .pl- /* padding, left */<br> .pr- /* padding, right */<br> .plr- /* padding, left and right */ </code> </pre> </div> </div> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Amounts</h3> <div class="row"> <div class="col-sm-6"> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> .m-0 /* margin, 0rem */<br> .m-1 /* margin, 0.25rem */<br> .m-2 /* margin, 0.5rem */<br> .m-3 /* margin, 0.75rem */<br> .m-4 /* margin, 1rem */<br> .m-5 /* margin, 1.25rem */<br> .m-6 /* margin, 1.5rem */<br> .m-7 /* margin, 2rem */<br> .m-8 /* margin, 2.5rem */<br> .m-9 /* margin, 3rem */<br> .m-10 /* margin, 4rem */<br> </code> </pre> </div> <div class="col-sm-6"> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> .p-0 /* padding, 0rem */<br> .p-1 /* padding, 0.25rem */<br> .p-2 /* padding, 0.5rem */<br> .p-3 /* padding, 0.75rem */<br> .p-4 /* padding, 1rem */<br> .p-5 /* padding, 1.25rem */<br> .p-6 /* padding, 1.5rem */<br> .p-7 /* padding, 2rem */<br> .p-8 /* padding, 2.5rem */<br> .p-9 /* padding, 3rem */<br> .p-10 /* padding, 4rem */<br> </code> </pre> </div> </div> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Examples</h3> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="html"> <div class="box p-2"><br>     <div class="mt-4 p-2">Hello there</div><br>     <div class="mt-4 p-2">How are you today?</div><br> </div> </code> </pre> <div class="box p-2 bdr-silver"> <div class="mt-4 p-2 fs-small bdr-grey">Hello there</div> <div class="mt-4 p-2 fs-small bdr-grey">How are you today?</div> </div> </section> <section class="section mt-8" id="colors"> <h2 class="fw-light pb-2 bdr-bottom-silver">Colors</h2> <p class="font-lora">Calcite uses a base color palette courtesy of <a href="http://clrs.cc/" target="_blank">clrs.cc</a> with a few white and black opacity colors added in for a little extra variety. In addition, each color has a <strong>-light</strong> and <strong>-dark</strong> counterpart that make things like button and link hover states or anything requiring slight color modifications easier.</p> <div class="row text-center"> <div class="col-sm-4"> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-navy"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-navy-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-navy-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-blue"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-blue-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-blue-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-aqua"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-aqua-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-aqua-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-teal"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-teal-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-teal-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-olive"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-olive-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-olive-dark"></div> </div> </div> <div class="col-sm-4"> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-green"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-green-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-green-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-lime"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-lime-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-lime-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-yellow"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-yellow-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-yellow-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-orange"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-orange-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-orange-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-red"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-red-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-red-dark"></div> </div> </div> <div class="col-sm-4"> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-maroon"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-maroon-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-maroon-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-fuchsia"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-fuchsia-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-fuchsia-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-purple"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-purple-light"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-purple-dark"></div> </div> <div class="ptb-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-barely-clear-black"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-half-clear-black"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-semi-clear-black"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-very-clear-black"></div> </div> <div class="ptb-1 bg-black br-2 lh-1"> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-barely-clear-white"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-half-clear-white"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-semi-clear-white"></div> <div class="inline-block mlr-1 wf-4 hf-4 br-half bg-very-clear-white"></div> </div> </div> </div> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Examples</h3> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="html"> <a href="#" class="inline-block bg-blue hover--bg-blue-dark clr-white">Click Me</a> </code> </pre> <div class="row"> <div class="col-xs-12"> <a href="#" class="inline-block ptb-2 plr-6 br-1 bg-blue hover--bg-blue-dark clr-white fs-small">Click Me</a> </div> </div> <pre class="ws-normal fs-small m-0 mt-8 ptb-3"> <code class="html"> Color me <span class="clr-orange">orange</span> or <span class="clr-teal">teal</span>. </code> </pre> <div class="fs-small"> Color me <span class="clr-orange">orange</span> or <span class="clr-teal">teal</span>. </div> </section> <section class="section mt-8" id="font-styles"> <h2 class="fw-light pb-2 bdr-bottom-silver">Font Styles</h2> <p class="font-lora">Included in this module are a few classes that you can use to modify the weight, style, and decoration of text contained within any element. </p> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">All Classes</h3> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> .ta-left     /* text-align: left; */<br> .ta-center   /* text-align: center; */<br> .ta-right    /* text-align: right; */<br> .td-underline  /* text-decoration: underline; */<br> .td-strikeout  /* text-decoration: line-through; */<br> .tt-uppercase  /* text-transform: uppercase; */<br> .tt-lowercase  /* text-transform: lowercase; */<br> .tt-capitalize /* text-transform: capitalize; */<br> .fw-light  /* font-weight: $font-weight-light; (300) */<br> .fw-normal /* font-weight: $font-weight-normal; (400) */<br> .fw-bold   /* font-weight: $font-weight-bold; (700) */ </code> </pre> <div class="row"> <div class="col-sm-6"> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> .fs-x-small /* font-size: 0.75rem; */<br> .fs-small   /* font-size: 0.88rem; */<br> .fs-regular /* font-size: 1rem; */<br> .fs-large   /* font-size: 1.25rem; */<br> .fs-x-large /* font-size: 1.5rem; */ </code> </pre> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> .ls-0 /* letter-spacing: 0px; */<br> .ls-1 /* letter-spacing: 0.5px; */<br> .ls-2 /* letter-spacing: 1px; */<br> .ls-3 /* letter-spacing: 1.5px; */<br> .ls-4 /* letter-spacing: 2px; */<br> .ls-5 /* letter-spacing: 2.5px; */<br> .ls-6 /* letter-spacing: 3px; */ </code> </pre> </div> <div class="col-sm-6"> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> .lh-0 /* line-height: 0rem; */<br> .lh-1 /* line-height: 1rem; */<br> .lh-2 /* line-height: 1.25rem; */<br> .lh-3 /* line-height: 1.5rem; */<br> .lh-4 /* line-height: 1.75rem; */<br> .lh-5 /* line-height: 2rem; */<br> .lh-6 /* line-height: 2.5rem; */<br> .lh-tiny   /* line-height: 0.5rem; */<br> .lh-normal /* line-height: normal; */<br> .lh-huge   /* line-height: 3rem; */ </code> </pre> </div> </div> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Examples</h3> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="html"> <p>You can have <span class="fs-x-large fw-bold tt-uppercase">big, bold, all-caps</span> text or how about <span class="fs-small td-underline">small, underlined</span> text? Maybe you'd like something with a <span class="ls-4 fw-light">spaced out appearance</span></p> </code> </pre> <div class="mt-4"> You can have <span class="fs-x-large fw-bold tt-uppercase">big, bold, all-caps</span> text or how about <span class="fs-small td-underline">small, underlined</span> text? Maybe you'd like something with a <span class="ls-4 fw-light">spaced out appearance</span>. </div> </section> <section class="section mt-8" id="flexbox"> <h2 class="fw-light pb-2 bdr-bottom-silver">Flexbox</h2> <p class="font-lora">Flex layouts are one of the best ways to properly size and align elements while maintaining compatibility with all modern browsers (and in most cases, IE 11). To get started, all you need to do is give your parent element a class of <span class="ff-monospace clr-red">.flex</span> and every direct child under that container will be laid out using flex display.</p> <p class="font-lora">Both the parent and the children elements can be modified with some of the classes below. </p> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Class Explanations</h3> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> /* flex-direction */<br> .fd-{row|row-reverse|column|column-reverse}<br><br> /* flex-wrap */<br> .fw-{nowrap|wrap|wrap-reverse}<br><br> /* justify-content */<br> .jc-{flex-start|flex-end|center|space-between|space-around|space-evenly}<br><br> /* align-items */<br> .ai-{flex-start|flex-end|center|baseline|stretch}<br><br> /* align-content */<br> .ac-{flex-start|flex-end|center|space-between|space-around|stretch}<br><br> .order-{1-12}   /* order: # */<br> .grow-{1-12}    /* grow: # */<br> .shrink-{1-12}  /* shrink: # */<br> .flex-{1-12}    /* flex: # */ </code> </pre> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Examples</h3> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="html"> <div class="flex fd-row"><br>     <div class="flex-1 ptb-2 plr-4 mr-2">Item 1</div><br>     <div class="flex-1 ptb-2 plr-4 mr-2">Item 2</div><br>     <div class="flex-1 ptb-2 plr-4 mr-2">Item 3</div><br>     <div class="flex-1 ptb-2 plr-4">Item 4</div><br> </div> </code> </pre> <div class="row"> <div class="col-xs-12"> <div class="flex fd-row"> <div class="bg-silver flex-1 ptb-2 plr-4 mr-2">Item 1</div> <div class="bg-silver flex-1 ptb-2 plr-4 mr-2">Item 2</div> <div class="bg-silver flex-1 ptb-2 plr-4 mr-2">Item 3</div> <div class="bg-silver flex-1 ptb-2 plr-4">Item 4</div> </div> </div> </div> <pre class="ws-normal fs-small m-0 mt-8 ptb-3"> <code class="html"> <div class="flex fd-row-reverse"><br>     <div class="flex-1 ptb-2 plr-4">Item 1</div><br>     <div class="flex-1 ptb-2 plr-4 mr-2">Item 2</div><br>     <div class="flex-2 ptb-2 plr-4 mr-2">Item 3</div><br>     <div class="flex-2 ptb-2 plr-4 mr-2">Item 4</div><br> </div> </code> </pre> <div class="row"> <div class="col-xs-12"> <div class="flex fd-row-reverse"> <div class="bg-silver flex-1 ptb-2 plr-4">Item 1</div> <div class="bg-silver flex-1 ptb-2 plr-4 mr-2">Item 2</div> <div class="bg-silver flex-2 ptb-2 plr-4 mr-2">Item 3</div> <div class="bg-silver flex-2 ptb-2 plr-4 mr-2">Item 4</div> </div> </div> </div> <pre class="ws-normal fs-small m-0 mt-8 ptb-3"> <code class="html"> <div class="flex fd-row jc-center ai-center"><br>     <div class="flex-1 ptb-2 plr-4 mr-2">Item 1</div><br>     <div class="flex-2 ptb-8 plr-4 mr-2">Item 2</div><br>     <div class="flex-1 ptb-2 plr-4">Item 3</div><br> </div> </code> </pre> <div class="row"> <div class="col-xs-12"> <div class="flex fd-row jc-center ai-center"> <div class="bg-silver flex-1 ptb-2 plr-4 mr-2">Item 1</div> <div class="bg-silver flex-2 ptb-8 plr-4 mr-2">Item 2</div> <div class="bg-silver flex-1 ptb-2 plr-4">Item 3</div> </div> </div> </div> <p class="font-lora mt-8"> For more examples or in-depth info on flex layouts, <a href="#">this article</a> is a great resource. </p> </section> <section class="section mt-8" id="positioning"> <h2 class="fw-light pb-2 bdr-bottom-silver">Positioning</h2> <p class="font-lora">This area is pretty simple and self-explanatory. Below you'll find a list of classes that you can use to modify the positioning and display of elements on your site. </p> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Classes List</h3> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> .inline /* display: inline; */<br> .block /* display: block; */<br> .inline-block /* display: inline-block; */<br> .float-left /* float: left; */<br> .float-right /* float: right; */<br><br> /* a clearfix class that uses an :after display: table pseudo-element */<br> .clearfix<br><br> /* position: modifier */<br> .pos-{absolute|fixed|relative|static} <br><br> /* top|left|right|bottom: modifiers (ex: .pos-left-0 = left: 0;) */<br> .pos-{top|left|right|bottom}-{1-8} </code> </pre> </section> <section class="section mt-8" id="sizing"> <h2 class="fw-light pb-2 bdr-bottom-silver">Sizing</h2> <p class="font-lora">Calcite has two different types of sizing classes that can be used to modify the of elements. One is based on fixed sizes (through a gradual step up of rem amounts), while the other is percentage-based and depends on the size of the parent element. You'll find the entire list of classes as well as some examples below. </p> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Classes List</h3> <div class="row"> <div class="col-sm-6"> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> /* width: percentage of parent element */<br> .w-{5-100 (intervals of 5)}<br><br> /* height: percentage of parent element */<br> .h-{5-100 (intervals of 5)}<br><br> /* additionally, each quarter percent has an alias */<br> .w-{quarter|half|three-quarters|full}<br> .h-{quarter|half|three-quarters|full}<br><br> </code> </pre> </div> <div class="col-sm-6"> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="css"> .{width|height}-fixed-1  /* 0.5rem */<br> .{width|height}-fixed-2  /* 1rem */<br> .{width|height}-fixed-3  /* 1.5rem */<br> .{width|height}-fixed-4  /* 2rem */<br> .{width|height}-fixed-5  /* 2.5rem */<br> .{width|height}-fixed-6  /* 3rem */<br> .{width|height}-fixed-7  /* 3.5rem */<br> .{width|height}-fixed-8  /* 4rem */<br> .{width|height}-fixed-9  /* 4.5rem */<br> .{width|height}-fixed-10 /* 5rem */<br> </code> </pre> </div> </div> <h3 class="fw-light pb-2 mt-6 bdr-bottom-silver">Examples</h3> <pre class="ws-normal fs-small m-0 ptb-3"> <code class="html"> <div class="hf-8 p-2"><br>     <div class="w-half h-60"></div><br> </div> </code> </pre> <div class="row"> <div class="col-xs-12"> <div class="box hf-8 p-2 bg-silver"> <div class="w-half h-60 bg-grey fs-small"></div> </div> </div> </div> <pre class="ws-normal fs-small m-0 mt-8 ptb-3"> <code class="html"> <div class="w-25 p-2"><br>     <div class="w-full hf-7 pos-relative p-2"><br>         <div class="w-full h-full"></div><br>     </div><br> </div> </code> </pre> <div class="row"> <div class="col-xs-12"> <div class="box w-25 bg-silver p-2"> <div class="w-full hf-7 pos-relative bg-grey p-2"> <div class="w-full h-full bg-dark-grey"></div> </div> </div> </div> </div> </section> <section class="section mt-8" id="lists"> <h2 class="fw-light pb-2 bdr-bottom-silver">Lists</h2> <p class="font-lora">Because of the low-level utility aspect of Calcite, lists elements don't come pre-styled out of the box to look different than natively rendered. However, we include a few classes that can help you adjust the way your lists are styled as a whole. Individual list items should be styled with standard modifiers found throughout the rest of these docs. </p>