Welcome to aj.css

A responsive atomic css inspired framework

Utilities

This section is kind of weird, because most people feel that atomic css is simply utilities. So, what could I possibly be putting on this page? This page contains a few useful classes, along with examples to show you how combining these with the previous sections can be very powerful.

Example: Positioning Utilities


This is centered

This is on the right

This is on the left

This is vertically and horizontally centered


<p class="tc">This is centered</p> <div class="cf"> <p class="fr">This is on the right</p> <p class="fl">This is on the left</p> </div> <div class="bg-primary vh-25 white"> <p class="vc tc">This is vertically and horizontally centered</p> </div>

Example: Height Utilities

Warning, lots of scrolling

25% of Browser Height

50% of Browser Height

75% of Browser Height

100% of Browser Height


<div class="bg-primary vh-25 white mv2"> <p class="vc tc">25% of Browser Height</p> </div> <div class="bg-red vh-50 white mv2"> <p class="vc tc">50% of Browser Height</p> </div> <div class="bg-yellow vh-75 black mv2"> <p class="vc tc">75% of Browser Height</p> </div> <div class="bg-purple vh-100 white mv2"> <p class="vc tc">100% of Browser Height</p> </div>

Example: Border Utilities

Simple border
Colored border
Colored and Rounded border
Card style border
<div class="ba mv2">Simple border</div> <div class="ba b-red mv2">Colored border</div> <div class="ba b-blue mv2 br3">Colored and Rounded border</div> <div class="ba b-light-gray br2 p3">Card style border</div>

You can use any of the colors that are on the colors page for borders. Just use b-color! The br classes are for border radius, or the roundness. They go from br1 to br3.

Example: Misc Utilities

This will have a hand cursor over it on hover

This will dim on hover

Hey

Hello

<p class="hand">This will have a hand cursor over it on hover</p> <p class="dim">This will dim on hover</p> <button class="grow db mv2">This will grow on hover</button> <button class="grow-large db mv2">This will grow a lot on hover</button> <p class="dib">Hey</p> <p class="dib">Hello</p>

The db classes simply mean display: block, or it makes things break lines. The dib class means that the element will try and stay in a line, but if the width is smaller than that line, they will break lines like the db class.