Introduction:
Components:
Resources:
Helpers
Helpers are utility classes that augment general capabilities across page elements. The use of helpers are not required, but may serve to enhance the experience of a page.
Images
<img class="img--border" src="beard-slayer.jpg" alt="Nerces Image">
<img class="img--circle" src="double-carnitas.jpg" alt="Nerces Circle Image">
<img class="img--hexagon" src="heavy-cream.jpg" alt="Nerces Hexagon Image">
// IMAGE MODIFIERS
.img--fluid
.img--circle
.img--hexagon
.img--border
Note: We recommend using image modifiers only on square images.
Colors & Backgrounds
The following pallete reflects the colors available in the CSUN Design Guidelines.
<div class="bg--red"></div>
<div class="bg--black"></div>
<div class="bg--dark-gray"></div>
<div class="bg--gray"></div>
<div class="bg--light-gray"></div>
<div class="bg--sea-green"></div>
<div class="bg--periwinkle"></div>
<div class="bg--golden-yellow"></div>
<div class="bg--azure"></div>
<div class="bg--iris"></div>
<div class="bg--cream"></div>
<div class="bg--scarlet"></div>Floats & Positioning
You can position elements to the left and right using the following floats:
<div class="pull-left"></div>
<div class="pull-right"></div>Additionally, you can avoid parent elements with floated children from collapsing by adding a clearfix .cf class on the parent element. To learn more about clearfixes read Micro Clearfix Hack by Nicolas Gallagher.
<div class="cf">
<div class="pull-left"></div>
<div class="pull-right"></div>
</div>Element Visibility
You can reveal and hide elements with the following visibility helpers:
<div class="show"></div>
<div class="hide"></div>
<!-- Impacts flow of content but not visible --><div class="invisible"></div>