1 - Layout

1.1 Foundation Grid

Basa uses Foundation 5 grid. This is a powerful 12-column, mobile-first, re-orderable, nestable grid layout. Supports IE9+

View the documentation

.columns.large-6
.columns.large-6
.columns.large-4
.columns.large-4
.columns.large-4
.columns.large-3.small-6
.columns.large-3.small-6
.columns.large-3.small-6
.columns.large-3.small-6

_grid-grid.scss


1.2 Flexbox Grid

Simple grid implementation using flexbox. Requires flexbox support (IE10+).

View the documentation

.col-xs-12.col-sm-6
.col-xs-12.col-sm-6
.col-xs-12.col-sm-4
.col-xs-12.col-sm-4
.col-xs-12.col-sm-4
.col-xs-6.col-md-3
.col-xs-6.col-md-3
.col-xs-6.col-md-3
.col-xs-6.col-md-3

_flex-grid.scss


1.3 Equal Grid

A full-width grid layout, useful for laying out images or portfolio items.

Box 2

Box 3

Box 4

Box 5

Box 6

_equal-grid.scss


1.4 Flexible Video

Allows embedded videos to scale to fit the device

_flex-video.scss


1.5 Slanted Box / Angled Edges

A pure SASS way of creating angled edges on sections by dynamically encoding SVGs

Documentation Demo

_angled-edges.scss


1.6 Browser Web Frame


http://mysite.com

_browser-frame.scss


1.7 Pricing Plans


_pricing-plans.scss


1.8 Media Object

Media Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis porta eros lacus, nec ultricies elit blandit non. Suspendisse pellentesque mauris sit amet dolor blandit rutrum.
Like · Reply · 6 hrs ago
A Nested Media Object

or Cancel

_media-object.scss


1.9 Fullwidth Image in Fixed Container

Stretch an image the full width of the page while keeping the text in a centered column.

Documentation Demo

_fullwidth-image.scss


2 - Elements

2.1 Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

2.2 Lists

  • Unordered List Item 1
  • Unordered List Item 2
  • Unordered List Item 3
  1. Ordered List Item 1
  2. Ordered List Item 2
  3. Ordered List Item 3

  • Unstyled List Item 1
  • Unstyled List Item 2
  • Unstyled List Item 3

2.3 Blockquote

When you are courting a nice girl an hour seems like a second. When you sit on a red-hot cinder a second seems like an hour. That's relativity.

2.4 Highlight

A 17-hour non-stop flight from Perth to London has been cleared for take off onboard Qantas' new 787-9 Dreamliner, directly linking Australia to Europe for the first time.

2.5 Simple Divider


2.6 Messages

Alert headline! This is a simple message box style

_type.scss


2.7 Buttons

Button styles

_buttons.scss


2.8 SVG Icons

Button styles

More Icons Demo


2.9 Social Buttons

_social-buttons.scss


2.10 Box Shadows

A more performant way to animate box shadows.

Hover over this box to cast a shadow.

_box-shadow.scss


2.11 Color Swatches

Rainbow color grading for alerts, buttons or other elements

.r-red .r-darkorange .r-orange .r-yellow .r-lemon .r-lightgreen .r-green .r-midgreen .r-darkgreen

_color-swatches.scss


3 - Forms and Tables

3.1 Stacked Form




3.2 Inline Form


3.3 Mobile Form

3.4 Tables

ID First Name Last Name Year of Birth
1 Sean Ockert 1984
2 Bob Jones 1962
3 Linda Emmett 2003

_forms.scss


4 - Plugins

4.1 Modal Popup

This is rare modal plugin that doesn't rely on jQuery. Alternatively, try Basic Modal.

Open a Modal Demo

4.2 Picture Fill

  1. Attach the script picture-fill.min.js
  2. Create a picture element in the header: document.createElement( "picture" );
Documentation Demo

4.3 Responsive Nav

  1. Attach the script responsive-nav.min.js
  2. Use the base styling in _responsive-nav.scss
  3. Init the plugin with a nav ID reference: var navigation = responsiveNav('#responsive-nav');
Documentation Demo

4.4 Smooth Scroll

  1. Attach the script smooth-scroll.js
  2. Voila! Anchor links will now scroll smoothly.

4.5 Lightbox

  1. Attach the script lightbox.js
  2. For each picture you want to expand in a lightbox, attach to the anchor link: rel="lightbox"
  3. You can set a breakpoint. Below this lightbox will simply load the image. Default 568px.
Demo

4.5 Flowtype

What does FlowType.JS do?

Ideally, the most legible typography contains between 45 and 75 characters per line. This is difficult to accomplish for all screen widths with only CSS media-queries. FlowType.JS eases this difficulty by changing the font-size and subsequently the line-height based on a specific element's width. This allows for a perfect character count per line at any screen width.

  1. Attach the script flowtype.native.js
  2. Init the plugin with the target element: window.flowtype(targetElem, {...});
  3. Tweak values based on your font: minFont: 16, maxFont: 48, fontRatio: 36
Documentation Demo

4.6 InstantClick

Click me for a fast load

  1. Attach the script instantclick.min.js
  2. Init the plugin InstantClick.init();
Documentation Demo

4.7 Accordion


  1. Attach the script accordion.js
  2. Use the accordion style in _accordion.scss
  3. Create a list with the ID: accordion
  4. Add list items like this: <li class="q"><dt id="question-1"><h2>Question 1</h2></dt><dd>Answer 1</dd></li>...
Demo

4.8 Waypoints

  1. Attach the script waypoints.min.js
  2. Write waypoint listeners for each section
  3. When page is scrolled to that section it will trigger the action of the waypoint (eg. highlight a menu item or start an animation)
Documentation Demo

4.9 Swipe Slider

  1. Attach the script swipe.min.js
  2. Use the swipe slider style in _swipe.scss
  3. Set up the HTML (see demo)
  4. Init the plugin with window.slider = Swipe()
1
2
3


If you need a carousel layout instead, try Slick slider

Documentation Demo

4.10 Smart Underline

This snippet improves the underline on links by clearing the descenders eg:

Documentation Demo

4.11 Tabs

Proper responsive tabs, with ARIA roles and back button support

Conflicts with smooth scroll plugin on this page. See the demo instead.

Documentation Demo

4.12 Type Improvements

Allows you to write new CSS properties to take finer typographic control of type styles on the web.

Documentation Demo

4.13 Tooltip

A simple, bloated tooltip. Hover me You can easily navigate the city by car.

Documentation Demo

4.14 Lazy Loading

  1. Attach the script echo.js
  2. Create an img with a data-echo attribute instead of src
  3. Image will load when the page is scrolled within 100px of it
Documentation Demo

5 - Animations

Click the buttons below to play the animation.

  • First Item in list
  • Second Item in list
  • Third Item in list
  • Fourth Item in list

5.2 Spinners

More Spinners here