Components

Quick and easy to use responsive javascript and css components.

Auto Class

This component allows for classes to be automatically applied to elements. Add the attribute data-auto-class to any element, specify the selector and classes and this component will cascade down the DOM tree and apply the specified classes the all matched elements. Selectors and classes should be appied in the following format selector{classes}.

<div data-auto-class="p{red lrg} .foobar{green}">
  <p>Red</p>
  <p>Red</p>
  <p><span class="foobar">Green</span></p>
  <p>Red</p>
</div>

View Example

Card UI

A quick and simple card UI layout component. Cards width's are set by standard bootstrap columns, cards will then stack neatly under each other rather than floating and leaving un-even gaps on the page. To make the cards animate in to position add the class animate to each individual card. By default the elements within sa-cards with the class card will be positioned, to override this add the attribute data-selector=".class-name" to sa-cards.

<div class="sa-cards row">

  <div class="card">...<div>
  <div class="card">...<div>
  <div class="card">...<div>
  <div class="card">...<div>

</div>

View Example

Collapse

Normal

Built upon BS collapse this component aids in changing the display depending on if the collapse is open or closed. An active class is also applied to sa-collapse when the collapse is open - you can make a collapse start open by loading the page with the active class already applied. Any element with the class sa-click can be used to activate the collapse mechanism. If a group of collapses are surrounded by an element with the class sa-accordion the collapses will behave with an accordion effect.

<div class="sa-collapse">

  <div class="sa-click">Collapse</div>

  <div class="sa-content">...<div>

</div>

View Example

Collapse in Collapse

Collapses can be placed within other collapses.

<div class="sa-collapse">

  <div class="sa-click">Collapse</div>
  <div class="sa-content">

    <div class="sa-collapse">

      <div class="sa-click">Collapse</div>
      <div class="sa-content">...<div>

    </div>

  <div>

</div>

View Example

Target Devices

Collapses can be configured to work only on certain devices and either start open or closed on a per device basis. To hide the sa-click element when the collapse is inactive, add the class hide-click to the collapse.

<div class="sa-collapse hide-click" data-collapse-devices="xs,sm,md" data-collapse-devices-open="md">

  <div class="sa-click">Collapse</div>

  <div class="sa-content">...<div>

</div>

View Example

Dropdown

A JS/CSS controlled HTML dropdown.

<div class="sa-dropdown">

  <div class='sa-click'>
    Dropdown
    <i class='fa fa-chevron-down valign-mid'></i>
  </div>

  <div class='sa-content'>...</div>

</div>

View Example

Form Elements

Easily style up checkboxes, radio buttons and select dropdowns. Uses standard markup for the form elements surrounded by some custom HTML to create the custom appearance.

Checkbox

<div class="sa-checkbox">
  <i class="fa fa-square-o sa-off sa-inset pad-right-xs"></i>
  <i class="fa fa-check-square-o sa-on sa-inset pad-right-xs"></i>
  <label>An icon based checkbox</label>
  <input type="checkbox" name="cbox" value="1" checked />
</div>

Radio

<div class="sa-radio">
  <i class="fa fa-circle-o sa-off sa-inset pad-right-xs"></i>
  <i class="fa fa-circle sa-on sa-inset pad-right-xs"></i>
  <label>An icon based radio button</label>
  <input type="radio" name="radio" value="abc" />
</div>

Select

<div class="sa-select">
  <i class="fa fa-caret-down valign-mid"></i>
  <select name="" class="form-control">
    <option>...</option>
  </select>
</div>

View Example

Hide Till

View Example

Image Box

Control the display of an image within it's parent. Either force the image to fill it's parent or fit within it.

<div>
  <div src="image.jpg" data-img-box="fit" />
</div>

<div>
  <div src="image.jpg" data-img-box="fill" />
</div>

View Example

Image Responsive

Load images responsivly depending on window size. Start by loading the smallest image and only load larger if needed. If the data-src attr is not set then no image replacement happens.

<img src='/path/img-xs.jpg' data-src='{
	"xs":"/path/img-xs.jpg",
	"sm":"/path/img-sm.jpg",
	"md":"/path/img-md.jpg",
	"lg":"/path/img-lg.jpg"
}' />

View Example

Inset/Outset

This component allows for easily insetting or outsetting an element from its parent. To inset an element add the class sa-inset and to ouset an element add the class sa-ouset. By default elements are postioned left/middle, to move them to the right add the class sa-right or to move them to the top/bottom add the classes sa-top and sa-btm.

Spacing between the inset/ouset element and other content can be achieved by adding padding or margin to the inset/ouset elemtent.

When insetting an element, left or right padding is applied to its imediate parent to achieve the inset. When outsetting an element padding is applied to the imediate parents parent and then the outset element is giving a negative left or right position.

<div>
  <h2>
    <i class='fa fa-plus-square sa-ouset'></i>
    Title with Icon
  </h2>
  <p>This text will be indented along with the title!</p>
</div>

<div class="alert alert-success">
	<a href="#" class="btn btn-success btn-lg sa-inset sa-right">Click Me</a> Alert message...
</div>

View Example

Responsive Nav

A responsive navigation that acts as a standard dropdown navigation on desktop devices and as a pop out slider navigation on mobile devices. By default the breakpoint between devices is 992px, to modify this add the attribute data-breakpoint="728" on to the main resp-nav element.

To only show certian elements on each viewport add the classes .desktop-only and .mobile-only.

<!-- Navigation holder -->
<div class="resp-nav" data-breakpoint="728">
  ...
</div>

<!-- Navigation loader for mobile -->
<i class="fa fa-bars fa-2x resp-nav-load"></i>

<!-- Navigation mask when on mobile -->
<div class="resp-nav-mask"></div>

View Example

Tabs

Normal Tabs

Built upon BS tabs this component allows for marking up tabs without the need of setting ID's and targets. To quickly style the tabs add the navigation classes sa-nav nav-horizontal nav-block to the main sa-tabs element.

Tabs can also change the URL hash depending on which tab is open, to activate this add the attribute data-id="foo" to each li within tab-nav.

Tabs can be opened/closed using the normal bootstrap API - eg $('[data-id="home"]').tab('show'); or $('.tab-nav li:first-child').tab('hide');.

<div class="sa-tabs">

  <ul class="tab-nav">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane">...Tab 1 Content...</div>
    <div class="tab-pane">...Tab 2 Content...</div>
  </div>

</div>

View Example

Collapse Tabs

Tabs can also be configured to act as collapses when on smaller devices. By default the breakpoint between devices is 992px, to modify this add the attribute data-breakpoint="728" on to the main sa-collapse-tabs element.

To only show certian elements on each viewport add the classes .desktop-only and .mobile-only.

<div class="sa-collapse-tabs">

  <ul class="tab-nav desktop-only">
    <li><a href="#">Tab 1</a></li>
    <li><a href="#">Tab 2</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane">

      <div class="sa-click mobile-only">Tab 1</div>
      <div class="sa-content">
        ...Tab 1 Content...
      </div>

    </div>
    <div class="tab-pane">

      <div class="sa-click mobile-only">Tab 2</div>
      <div class="sa-content">
        ...Tab 2 Content...
      </div>

    </div>
  </div>

</div>

View Example

Tooltips / Popovers

A wrapper component for BS's tooltips and popovers. As the BS API specifies that tooltips and popovers are opt-in and must be initialized by the user creating and initiating them can be long winded, especially if you want to set the container too.

Tooltips

Simply add the class sa-tooltip to any element you want to have a tooltip, all the normal BS options set via data attributes will work as expected.

<button class="sa-tooltip" data-placement="left" title="Title">Tooltip</button>

View Example

Popovers

Simply add the class sa-popover to any element you want to have a popover, all the normal BS options set via data attributes will work as expected.

<button class="sa-popover" data-placement="left" data-content="Content">Popover</button>

View Example

Touch Hover

Easily control hover effects when on touch enabled devices. Add the class touch-hover to any element with a hover effect then in the CSS as well as setting the pseudo :hover class add a .hover class too.

<div class="touch-hover"></div>
div:hover,
div.hover{
  background:#f00;
}

View Example

STAN v0.0.40   -   Download   -   View Github Project