CSS

Useful CSS classes to speed up design and layout.

Articles

Article list styles are built upon re-useable class names, so rather than an article having 1 class with lots of styles, an article will have multiple classes with only 1 or 2 styles per class.

Adding the class click will make whole article will become clickable.

<article class="sa-cf list hover divide click">
  ...
</article>

<article class="col-sm-4 tab click">
  ...
</article>

View Example

Columns

Stan provides additional column sizes not supplied in BS.

<div class='col-sm-2-4'>5 columns in view</div>

<div class='col-sm-1-5'>8 columns in view</div>

<div class='col-sm-1-3'>9 columns in view</div>

<div class='col-sm-1-2'>10 columns in view</div>

View Example

Helpers

A collection of helper classes.

Floats

Float an element to the left or right with .float-left or .float-right.

Text Aligns

Align text to the left, center or right with .text-left, .text-center or .text-right.

Line Heights

To force all elements to have the same line height apply one of the following classes .line-xs, .line-xs, .line-sm, .line-md, .line-lg,.line-xl, .line-xxl.

Displays/Positions

To force an element to display block use .block. To make an element position relative use .relative.

Mouse Cursors

To make an element use the pointer as a mouse cursor use .pointer.

Pixel Ratio

Prefix classes with .x2 to reference hi-res sprites on retina ready devices e.g .x2 .sprite{ background:url(sprire@2x.png); }.

Transitions

To add CSS3 transitions to any element add one of the following classes .transition-sm, .transition-md or .transition-lg.

Stop Parent Scrolling

To stop a parent element scrolling when scrolling a child add the class .stop-parent-scroll to the child.

Lists

By default STAN turns off all list-style's, use the following class names on any <ul> or <ol> to style the <li>'s.

  • bullet - Bullet pointed list
  • numeric - Numerically ordered list
  • alpha - Alpha ordered list
  • icon - Use an icon as a bullet point. Icon should be controlled by the <i> tag.
<ul class="icon">
	<li><i class="fa fa-star"></i>Foobar</li>
	<li><i class="fa fa-star"></i>Foobar</li>
	<li><i class="fa fa-star"></i>Foobar</li>
</ul>

View Example

Margin/Paddings

Add or remove margins and paddings for requited elements.

To remove the padding or margins from all sides use .no-pad or .no-mar to only select certain sides add either -top, -btm, -left or -right to the class name.

To add padding or margin use .mar or .pad followed by an optional side modifier of either -top, -btm, -left, -right or -side. To end add a size modifier of either xs, sm, md, lg and xl.

<div class="mar-top-md"></div> <!--30px margin on the top-->
<div class="mar-sides-sm"></div> <!--15px margin on the left and right-->
<div class="mar-lg"></div> <!--45px margin on all sides-->
<div class="pad-xs"></div> <!--7px padding on all sides-->
<div class="pad-btm-xl"></div> <!--60px padding on the bottom-->
<div class="no-pad-left"></div> <!--No padding on the left-->

Navigation

Stan provides base styles for both horizontal and vertical navigations. Each must include the class of sa-nav and then either add nav-horizontal or nav-vertical. The navigations can then be turned in to inline list styles by adding nav-list or block style by adding nav-block.

Sub navigation can be added to any nav, just start another ul inside an li. When inside a horizontal nav the subnav is displayed as a drop down on mouseover, while in a vertical nav the subnav is indented.

Navigations are built around flexibility and so only the core css is included by default - this means when styling a navigation you are starting from blank and not constantly over writing styles. In the examples there is a mix of using padding classes placed on the html elements to style the navigation and creating some navigation specific classes.

<nav class="sa-nav nav-horizontal nav-block">
  <div class="title-block float-left">
    <h6>Nav Title</h6>
  </div>
  <ul>
    <li><a href=''>Link 1</a></li>
    <li><a href=''>Link 2</a>
      <ul>
        <li><a href=''>Sub Nav Link 1</a></li>
        <li><a href=''>Sub Nav Link 2</a></li>
      </ul>
    </li>
  </ul>
</nav>

<nav class="sa-nav nav-vertical nav-list">
  <ul>
    <li><a href=''><i class="fa fa-check"></i> Link 1</a></li>
    <li><a href=''><i class="fa fa-check"></i> Link 2</a></li>
  </ul>
</nav>

View Example

Pagination

Standard pagination styles based on inline-block positioning (rather than float) so that paging links can easily be positioned left, right or center. As the li's are positioned inline, to avoid any extra spacing beetween the elements ensure there is no white space between the closing </li> and the opening <li>.

<ul class="sa-pagination text-center">
  <li class='arrow'>
    <a href="#"><i class='fa fa-chevron-left'></i></a>
  </li><li class='active'>
    <a href="#">1</a>
  </li><li class='arrow'>
    <a href="#"><i class='fa fa-chevron-right'></i></a>
  </li>
</ul>

View Example

Social Icons

A collection of different styled social icon widgets.

<p class="sa-social">
  <a href="#" class="icon twitter">
    <i class="fa fa-twitter-square"></i>
  </a><a href="#" class="icon facebook">
    <i class="fa fa-facebook-square"></i>
  </a>
</p>

View Example

Space/Divide

A selection of spacing and dividing elements.

Spaces have a base styling of clear:both; while divides have a base styling of clear:both; border-bottom:solid 1px #ccc;.

Both are available in the sizes xs, sm, md, lg and xl.

<div class="space-xs"></div> <!--7px high-->
<div class="divide-sm"></div> <!--15px high - 15px margin bottom-->
<div class="space-md"></div> <!--30px high-->
<div class="divide-lg"></div> <!--45px high - 45px margin bottom-->
<div class="space-xl"></div> <!--60px high-->

Title Blocks

Simple wrapper class to make a heading element in to a block title.

<div class="title-block">
  <h1>Title Block</h1>
<div>

View Example

VAlign

Align any element to the middle or bottom of its parent element by adding class valign-mid or valign-btm. The parents will need to be at a constant height to get the table cell like display - the Fixed Size plugin will help achieve this.

<div class='row'>
	<div class='col-sm-4' style='height:100px;'>
		<div class='valign-mid' style='height:40px;'></div>
	</div>
	<div class='col-sm-4' style='height:100px;'>
		<div class='valign-mid' style='height:80px;'></div>
	</div>
	<div class='col-sm-4' style='height:100px;'>
		<div class='valign-mid' style='height:60px;'></div>
	</div>
</div>

View Example

STAN v0.0.40   -   Download   -   View Github Project