Classes to Add Some Extra Utilities
Clickable/Not-Clickable Shortcuts

Two simple classes to change which cursor appears on an element. Clickable's rule is also automatically applied to any elements with the attribute of onclick.

// .clickable and .not-clickable

// These would all make the cursor change to a pointer on hover
<div class="clickable"></div>
<div onclick="function()"></div>

// This would force the cursor to not change to a pointer
<a href="" class="not-clickable"></a>
Full Height Shortcut

This class simply adds a quick height:100% rule to elements. Super handy in certain cases, especially when wanting to do full-height webpages, where you have to make sure all elements are height:100% from <html> and <body> downwards.

// .height-100

// A full height div
<html class="height-100"> // Without this class, the div wouldn't be full height
  <body class="height-100"> // Without this class, the div wouldn't be full height
    <div class="height-100" style="background-color:#03A9F4;color:#fff;">
Full Width Shortcut

This class simply adds a quick width:100% rule to elements.

// .width-100

// A full width div
    <div class="width-100"> // Without this class, the div wouldn't be full width
Drop Shadow Shortcuts

Make items pop off the page a little with these nice looking classes. The elements will look as though they are cards set upon the webpage.

// .card-shadow and .dark-card-shadow

// For light-colored backgrounds
<div class="card-shadow"></div>

// For dark-colored backgrounds
<div class="dark-card-shadow"></div>

Important Note: These classes only provide the drop-shadow, nothing else. This makes it usable on any type of element, such as buttons, etc.

Text Transform Shortcuts

Use these pre-made text transform rules to avoid having to make specific classes for elements.

// Makes text uppercase
<div class="uppercase">Hello world</div>
// Displays as: HELLO WORLD

// Makes text lowercase
<div class="lowercase">Hello world</div>
// Displays as: hello world

// Makes text capitalized
<div class="capitalize">Hello world</div>
// Displays as: Hello World

As a flexbox enthusiast, I strongly encourage you to figure out a way to do EVERYTHING with display:flex. However, for those times when you absolutely must use a CSS float, I've included a clearfix class.

// .clearfix

<div style="float:right;">Eww.</div>
<div class="clearfix"></div> // Just add this line

Unimportant Note: This website is 100% organic and float-free.

Frow is from Cody Sherman via