Code Club Style Guide

Other Utility Classes

Round corners

Add one of these classes to make corners round:

Example
 
 
 
 
 
 
 
<div class="c-grid">
<div class="c-col c-col--1 u-background--green u-rounded--xx-large">&nbsp;</div>
<div class="c-col c-col--1 u-background--green u-rounded--x-large">&nbsp;</div>
<div class="c-col c-col--1 u-background--green u-rounded--large">&nbsp;</div>
<div class="c-col c-col--1 u-background--green u-rounded">&nbsp;</div>
<div class="c-col c-col--1 u-background--green u-rounded--small">&nbsp;</div>
<div class="c-col c-col--1 u-background--green u-rounded--x-small">&nbsp;</div>
<div class="c-col c-col--1 u-background--green u-rounded--xx-small">&nbsp;</div>
</div>

Element visibility

Example
Text
Text
Text
Text
<div class="c-grid">
<div class="c-col c-col--1 u-background--green u-hide-text">Text</div>
<div class="c-col c-col--1 u-background--green u-hidden">Text</div>
<div class="c-col c-col--1 u-background--green u-invisible">Text</div>
<div class="c-col c-col--1 u-background--green u-visually-hidden">Text</div>
</div>

Clearfix

You can add clearfix using .u-clearfix

Element Alignment

Use .u-align-vert to vertically align elements.