Calcite is a low-level utility CSS framework, 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.
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 button, 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 br-2 background-blue clr-white fs-small fw-bold 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.
Getting Calcite is super easy. You can download the up-to-date minified CSS file directly using this link or the download button at the top of this page.
If you're using NPM, you can run npm install calcite to get the entire latest package. From there, you can include the minified CSS file located under /dist/css/ or extend on the source SCSS files located at /assets/sass/.
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 npm install && npm run watch. This should spin up a local server and open up a browser window on your localhost.
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 npm run production to get a minified CSS file that includes your changes.
Most of Calcite's styles are all manipulatable through a main _var.scss file located in the /assets/sass/base/ 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 class_name: data_value structure. For instance, under $font-sizes you'll see a line for small: 0.88rem, where 'small' is used in modules/_fonts.scss to create the class "fs-small" with a value of font-size: 0.88rem;
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 flexboxgrid 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 (flexibility is a good one).
<div class="row">
<div class="col-xs-6 col-md-3"></div>
<div class="col-xs-6"></div>
<div class="col-xs-12 col-md-3"></div>
</div>
<div class="row">
<div class="col-xs-12"></div>
<div class="col-xs-12 col-sm-6 col-lg-4"></div>
<div class="col-xs-12 col-md-6 col-lg-4 col-lg-offset-4"></div>
</div>
<div class="row">
<div class="col-xs-12">
<div class="row">
<div class="col-sm-9"></div>
<div class="col-sm-3"></div>
</div>
</div>
</div>
By default, Calcite uses Arial as the font family on all elements. This is of course customizable by changing the value in the $font-family-primary 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 p- and m- module classes.
This is a standard <p> tag with default text styling. <strong> and <em> tags work in this as well.
There's a few default styles included to help wrangle in your media. For instance, <img> and <video> tags are set to max-width: 100%; in order to prevent them from overflowing their container elements. The rest of your customizations should be made through module classes.
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.
.m- /* margin, all around */
.mb- /* margin, bottom */
.mt- /* margin, top */
.mtb- /* margin, top and bottom */
.ml- /* margin, left */
.mr- /* margin, right */
.mlr- /* margin, left and right */
.p- /* padding, all around */
.pb- /* padding, bottom */
.pt- /* padding, top */
.ptb- /* padding, top and bottom */
.pl- /* padding, left */
.pr- /* padding, right */
.plr- /* padding, left and right */
.m-0 /* margin, 0rem */
.m-1 /* margin, 0.25rem */
.m-2 /* margin, 0.5rem */
.m-3 /* margin, 0.75rem */
.m-4 /* margin, 1rem */
.m-5 /* margin, 1.25rem */
.m-6 /* margin, 1.5rem */
.m-7 /* margin, 2rem */
.m-8 /* margin, 2.5rem */
.m-9 /* margin, 3rem */
.m-10 /* margin, 4rem */
.p-0 /* padding, 0rem */
.p-1 /* padding, 0.25rem */
.p-2 /* padding, 0.5rem */
.p-3 /* padding, 0.75rem */
.p-4 /* padding, 1rem */
.p-5 /* padding, 1.25rem */
.p-6 /* padding, 1.5rem */
.p-7 /* padding, 2rem */
.p-8 /* padding, 2.5rem */
.p-9 /* padding, 3rem */
.p-10 /* padding, 4rem */
<div class="box p-2">
<div class="mt-4 p-2">Hello there</div>
<div class="mt-4 p-2">How are you today?</div>
</div>
Calcite uses a base color palette courtesy of clrs.cc with a few white and black opacity colors added in for a little extra variety. In addition, each color has a -light and -dark counterpart that make things like button and link hover states or anything requiring slight color modifications easier.
<a href="#" class="inline-block bg-blue hover--bg-blue-dark clr-white">Click Me</a>
Color me <span class="clr-orange">orange</span> or <span class="clr-teal">teal</span>.
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.
.ta-left /* text-align: left; */
.ta-center /* text-align: center; */
.ta-right /* text-align: right; */
.td-underline /* text-decoration: underline; */
.td-strikeout /* text-decoration: line-through; */
.tt-uppercase /* text-transform: uppercase; */
.tt-lowercase /* text-transform: lowercase; */
.tt-capitalize /* text-transform: capitalize; */
.fw-light /* font-weight: $font-weight-light; (300) */
.fw-normal /* font-weight: $font-weight-normal; (400) */
.fw-bold /* font-weight: $font-weight-bold; (700) */
.fs-x-small /* font-size: 0.75rem; */
.fs-small /* font-size: 0.88rem; */
.fs-regular /* font-size: 1rem; */
.fs-large /* font-size: 1.25rem; */
.fs-x-large /* font-size: 1.5rem; */
.ls-0 /* letter-spacing: 0px; */
.ls-1 /* letter-spacing: 0.5px; */
.ls-2 /* letter-spacing: 1px; */
.ls-3 /* letter-spacing: 1.5px; */
.ls-4 /* letter-spacing: 2px; */
.ls-5 /* letter-spacing: 2.5px; */
.ls-6 /* letter-spacing: 3px; */
.lh-0 /* line-height: 0rem; */
.lh-1 /* line-height: 1rem; */
.lh-2 /* line-height: 1.25rem; */
.lh-3 /* line-height: 1.5rem; */
.lh-4 /* line-height: 1.75rem; */
.lh-5 /* line-height: 2rem; */
.lh-6 /* line-height: 2.5rem; */
.lh-tiny /* line-height: 0.5rem; */
.lh-normal /* line-height: normal; */
.lh-huge /* line-height: 3rem; */
<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>
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 .flex and every direct child under that container will be laid out using flex display.
Both the parent and the children elements can be modified with some of the classes below.
/* flex-direction */
.fd-{row|row-reverse|column|column-reverse}
/* flex-wrap */
.fw-{nowrap|wrap|wrap-reverse}
/* justify-content */
.jc-{flex-start|flex-end|center|space-between|space-around|space-evenly}
/* align-items */
.ai-{flex-start|flex-end|center|baseline|stretch}
/* align-content */
.ac-{flex-start|flex-end|center|space-between|space-around|stretch}
.order-{1-12} /* order: # */
.grow-{1-12} /* grow: # */
.shrink-{1-12} /* shrink: # */
.flex-{1-12} /* flex: # */
<div class="flex fd-row">
<div class="flex-1 ptb-2 plr-4 mr-2">Item 1</div>
<div class="flex-1 ptb-2 plr-4 mr-2">Item 2</div>
<div class="flex-1 ptb-2 plr-4 mr-2">Item 3</div>
<div class="flex-1 ptb-2 plr-4">Item 4</div>
</div>
<div class="flex fd-row-reverse">
<div class="flex-1 ptb-2 plr-4">Item 1</div>
<div class="flex-1 ptb-2 plr-4 mr-2">Item 2</div>
<div class="flex-2 ptb-2 plr-4 mr-2">Item 3</div>
<div class="flex-2 ptb-2 plr-4 mr-2">Item 4</div>
</div>
<div class="flex fd-row jc-center ai-center">
<div class="flex-1 ptb-2 plr-4 mr-2">Item 1</div>
<div class="flex-2 ptb-8 plr-4 mr-2">Item 2</div>
<div class="flex-1 ptb-2 plr-4">Item 3</div>
</div>
For more examples or in-depth info on flex layouts, this article is a great resource.
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.
.inline /* display: inline; */
.block /* display: block; */
.inline-block /* display: inline-block; */
.float-left /* float: left; */
.float-right /* float: right; */
/* a clearfix class that uses an :after display: table pseudo-element */
.clearfix
/* position: modifier */
.pos-{absolute|fixed|relative|static}
/* top|left|right|bottom: modifiers (ex: .pos-left-0 = left: 0;) */
.pos-{top|left|right|bottom}-{1-8}
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.
/* width: percentage of parent element */
.w-{5-100 (intervals of 5)}
/* height: percentage of parent element */
.h-{5-100 (intervals of 5)}
/* additionally, each quarter percent has an alias */
.w-{quarter|half|three-quarters|full}
.h-{quarter|half|three-quarters|full}
.{width|height}-fixed-1 /* 0.5rem */
.{width|height}-fixed-2 /* 1rem */
.{width|height}-fixed-3 /* 1.5rem */
.{width|height}-fixed-4 /* 2rem */
.{width|height}-fixed-5 /* 2.5rem */
.{width|height}-fixed-6 /* 3rem */
.{width|height}-fixed-7 /* 3.5rem */
.{width|height}-fixed-8 /* 4rem */
.{width|height}-fixed-9 /* 4.5rem */
.{width|height}-fixed-10 /* 5rem */
<div class="hf-8 p-2">
<div class="w-half h-60"></div>
</div>
<div class="w-25 p-2">
<div class="w-full hf-7 pos-relative p-2">
<div class="w-full h-full"></div>
</div>
</div>
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.
/* list-style: {style} */
/* choose between disc, circle, square, none, decimal, upper-alpha, lower-alpha, upper-roman, or lower-roman */
.ls-{style}
/* list-style-type: {style} */
/* choose between the same styles above */
.lst-{style}
/* list-style-position: {inside|outside} */
.lsp-{inside|outside}
<ul class="lst-square lsp-inside m-0 p-0">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ul>
<ol class="ls-lower-alpha m-0 p-0 pl-4">
<li>Item One</li>
<li>Item Two</li>
<li>Item Three</li>
<li>Item Four</li>
</ol>
Here you'll find classes that you can use to both add and adjust borders on elements throughout your site. To start off, the base for all of these is the .bdr-{color} class. This will add a border 1px thick on all sides of the element with the color specified. If you want to specify a certain direction, you should instead use .bdr-{direction}-{color}, which will again add a 1px solid border to your element, but just in the direction you gave. If you want to change the width or style of the border, add in an additional modifier class.
Check out the complete list of classes below.
/* 1px border on all sides of an element with a specified color */
.bdr-{color}
/* 1px border in a specific direction with a specified color */
.bdr-{top|left|right|bottom}-{color}
/* adjust width of border between 0-6px */
.bw-{0-6}
.bdr-dotted /* border-style: dotted; */
.bdr-dashed /* border-style: dashed; */
.bdr-solid /* border-style: solid; */
<div class="bdr-red">This has a solid red border</div>
<div class="bdr-bottom-dark-grey bw-3">This has a 3px thick solid dark grey border on the bottom</div>
Use the following classes to add a border radius to your elements in a variety of fixed sizes, with a few percentage-based ones.
/* adds a border radius in steps between 0rem and 1.5rem */
.br-{0-6}
/* adds a border radius of either 25% or 50% */
.br-{quarter|half}
<a href="#" class="inline-block ptb-2 plr-6 fs-small clr-white bg-blue br-2">A Rounded Button</a>
<span class="inline-block plr-4 fs-x-small clr-white bg-grey br-5">I'm A Tag</span>
Calcite comes with a variety of classes to add box shadows to your elements with varying direction and strength. Each class starts with the prefix .bs- to which a {direction} and {strength} is added on to. There are 9 total directions and 6 total strengths, giving you 54 possible box shadow combinations.
You'll find the directions and strengths in the class list below.
/* shadow falling on the bottom-left */
.bs-left-close-{strength}
.bs-left-{strength}
.bs-left-far-{strength}
/* shadow falling on the bottom-center */
.bs-center-close-{strength}
.bs-center-{strength}
.bs-center-far-{strength}
/* shadow falling on the bottom-right */
.bs-right-close-{strength}
.bs-right-{strength}
.bs-right-far-{strength}
.bs-{direction}-very-light /* 5% opacity */
.bs-{direction}-light /* 15% opacity */
.bs-{direction}-medium /* 25% opacity */
.bs-{direction}-dark /* 50% opacity */
.bs-{direction}-very-dark /* 75% opacity */
.bs-{direction}-black /* 100% opacity */
<div class="p-2 fs-small bg-white bs-left-far-dark">This looks like a pretty harsh light is coming from the right and the element is far away from the background.</div>
<div class="p-2 fs-small bg-white bs-center-close-light">Soft light is coming from right above and the element is pretty close to the background.</div>
Included below are a small group of classes that you can use to add CSS transitions to your elements. These will activate any time the appropriate styles (opacity, color, anything else) change, usually between hover states or when manipulated through JS. Right now all of these utilize the transition property, and all use an ease-in timing curve.
.tr-all-very-quick /* transition: all 0.15s ease-in; */
.tr-all-quick /* transition: all 0.25s ease-in; */
.tr-all-moderate /* transition: all 0.4s ease-in; */
.tr-all-slow /* transition: all 0.65s ease-in; */
.tr-all-very-slow /* transition: all 0.85s ease-in; */
/* transition: color */
.tr-clr-{speed}
/* transition: opacity */
.tr-opacity-{speed}
/* transition: background-color */
.tr-bg-{speed}
<a href="#" class="p-2 fs-small bg-blue hover--bg-blue-dark clr-white tr-bg-quick">Button with Transition</a>
The CSS box-sizing property is used to alter the default CSS box model used to calculate width and height of the elements. Each of these classes applies to both the class it's being used on, and all child classes. For instance, on this site the .bs-border-box class is used on the <body> tag, and all recursive child elements under that body tag have the box-sizing: border-box property applied to them.
/* box-sizing: border-box */
.bs-border-box
/* box-sizing: content-box */
.bs-content-box