Foundation

Amphibious has a fluid and responsive layout system based on a solid sixteen column grid system.

The Core

Built on the HTML5 Boilerplate

Amphibious inherits all of strengths and years of cross browser research of the html5 boilerplate and helps you build fast, robust, and adaptable web apps or sites.

  1. Conditionl html classes not extra style sheets for browser behaviour
  2. Minimal http requests
  3. Mobile first approach
  4. Modernizr feature detection and HTML5 Shiv
  5. Favicons and Touch Icons
  6. Google Chrome Frame
  7. and....
<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie ie7" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie ie8" lang="en"> <![endif]-->
<!--[if IE 9]>    <html class="ie ie9" lang="en"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]>
<!--[if IEMobile 7 ]>    <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">

<link rel="canonical" href="http://a.mphibio.us/index.html" />

The Grid

A.mphibio.us' base grid is a sixteen column variation of the 960 grid system. The syntax is simple, elegant, and lightweight columns, (or col for short) act like columns and rows well um... they act like rows and keep all the columns inside that row. It's effective and cross-browser, so you don’t have to worry about compatibility issues or page load inconsistencies.

Amphibious relies on the combination of classes to determine the layout, .col for example floats the element, while .ten determines that it spans ten columns of the grid. All column spans are name spaced to happen inside a container element to remian adaptpable.

A simple layout example:

Header
Left Column
Right Column
Footer
would be marked up like 
<div class="container">
  <div class="sixteen col">Header</div>
  <div class="col six">Left Column</div>
  <div class="col ten">Right Column</div>
  <div class="sixteen col">Footer</div>
</div>

A more complex layout might include a row element for example:

Header

Main Content

Some Copy

Inner sidebar

Some Copy

Footer
would be marked up like 
	<div class="container">
		<div class="sixteen col first last">Header</div>
		<div class="six col first">
		    <nav>
		        <ul>
		            <li>Nav Item</li>
		            <li>Nav Item</li>
		            <li>Nav Item</li>
		        </ul>
		    </nav>
		</div>
		<div class="ten col last">
		    <div class="row">
		        <div class="six col first">
		            <h2>Main Content</h2>
		            <p>Some Copy</p>
		        </div>
		        <div class="four col last">
		            <h4>Inner sidebar</h4>
		            <p>Some Copy</p>
		        </div>
		    </div>
		    
		</div>
		<div class="sixteen col first last">Footer</div>
	</div>

A.mphibio.us has the flexibility to go mobile like a champ. Go ahead, resize the browser and watch as the layout reacts!

Responsive Columns

These set of column classes repond to two different grid size and casscade down to blocks for mobile devices.

One
Fifteen
Fourteen
Two
Three
Thirteen
Twelve
Four
Five
Eleven
Ten
Six
Seven
Nine
Eight
Eight
Sixteen

Padded Columns

One
Fifteen
Fourteen
Two
Three
Thirteen
Twelve
Four
Five
Eleven
Ten
Six
Seven
Nine
Eight
Eight
Sixteen

Fluid Columns

These set of column classes repond fluidly for all container sizes excluding mobile devices.

One Third
One Third
One Third
One Third
Two Thirds
One Quarter
One Quarter
One Quarter
One Quarter
One Quarter
Three Quarters
One Quarter
Half
One Quarter
Half
Half

Padded Columns

One Third
One Third
One Third
One Third
Two Thirds
One Quarter
One Quarter
One Quarter
One Quarter
One Quarter
Three Quarters
One Quarter
Half
One Quarter
Half
Half

SEO Optimization

Source Ordering of content for maximum load efficiency.

<div class="six col push_ten"></div>
<div class="ten col pull_sixteen absolute"></div>
sixteen col
<div class="six col push_ten">
	<div class="six col push_ten"></div>
</div>
<div class="ten col pull_sixteen absolute">
	<div class="ten col pull_sixteen absolute"></div>
</div>
<div class="sixteen col">
	sixteen col
</div>

Media Queries

A.mphibio.us uses a lot of media queries to serve the scalable grid, but also for the convenience of styling your site on different size screens. A.mphibio.us' media queries are almost exclusively targeted at max and min widths rather than device sizes or orientations. The advantage of this is browsers and future mobile devices that don't map to exact set dimensions will still benefit from the styles. That being said, all of the queries were written to be optimal on Apple iOS devices. The built in media queries include:

  • Smaller than 960: Smaller than the standard base grid
  • Tablet Portrait: Between 768px and 959px
  • All Mobile Sizes: Less than 767px
  • Just Mobile Landscape: Between 480px and 767px
  • Just Mobile Portrait: Less than 479px