ResponsiveAeon, elegant & minimalistic css3 grid system framework!

This's the new version from HTML5 NewAeon Framework. Now with a responsive grid all based in percentage with mediaqueries, html5 starting point and javascript.

Tired to create all the files and structure from every new project? Try Responsive Aeon!

 

This is a reponsive menu.

Lets you convert your website navigation into a select drop-down menu.
Used together with media queries it helps you to create a space saving, responsive navigation for small screen devices.
The plugin is called: SelectNav.js *Tested in the most recent browsers.*

browser logos

Also this is a modal popup exemple.

×

HTML5 Compilant.

All the New HTML5 elements in usage like: article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, dialog, audio, canvas,video are supported with the include of html.js.

Css3/Grid System.

Basic responsive grid system based on 12 columns layout called: col1, col2, col3, col4, etc..., with full width of 1104px. Very easy to understand and use. Allready with @mediaqueries.

Javascript Non-Obstrutive.

All javascript loading in parallel with: head.js Your page will be faster even with a single combined file. Also include some jquery scripts for presentation.

Easy to use - Easy to understand.

The whole framework has only three basic classes: 1-Container, 2-Content and Col, Simply you can create with them mockups/wireframes and final websites in the speed of light. Try to resize your screen and see the magic.
Usage:

<div class="container"><!--Hold all the page-->
    <div class="content"><!--Hold content-->
	<div class="col4"></div><!--Layout with 4 columns-->
	<div class="col4"></div><!--Middle Column-->
	<div class="col4 last"></div><!--Last columns with .last class-->
    </div><!---->
</div><!---->

CHECK IT OUT - demo

Cross-size - Cross-device.

anydevice

Folder & File Structure.

The zip package contain:

  • css - folder (12-col_response.css)
  • js - folder (respond.min.js + selectnav.js + head.js + custom.js)
  • images - folder (favicon.ico and iphone icons)
  • 12-col_response - file (html5 template)
  • Templates - folder (Psd, Ai, Png + Sublime Text Snippets)

Optional javascript & css files.

A little help with Typography, Forms and buttons:

  • Style.css (Basic styles for all elements, like: quotes, tables, lists, etc..)
  • Forms.less and Forms.css (Basic styles for buttons and forms with LESS CSS..)
  • Placeholder.js (Placeholder on IE8, 7)
  • Pie.js (Border-Radius, Border-Shadow, etc... on IE8, 7)
  • Browserupdate.js (Friendly IE8, 7 warning)
  • Reveal.js - file (beatiful modals)

Forms Exemple - HERE

Download

Complete package (Include all files)

Download Complete

Basic package (Include only core files)

Download Basic

This page was created using the framework as it is, no extra class was added in mediaqueries. The framework has just over 120 lines of code, a little short for a framework but very useful for projects from scratch. We find that the less you worry about the basics you gain more time in development. *Tested in the most recent browsers.

browser logos
For a better web experience use a updated browser.

We have put ResponsiveAeon on GitHub to make handling code maintenance and issue tracking easier. Please log issues through GitHub.

Inspiration & credits

me

Fernando Monteiro is web developer and systems analyst, currently working with web software for the public sector and freelance on the side.
Addicted to html5, css3, usability and Guinness beer.
This framework was born of necessity found in starting several projects simultaneously and is used in 100% of projects where he works.
Some inspiration go to: Eric Mayer, Remy Sharpy, Tero Piirainen, Mathias, Zurb.

Fork me on GitHub
Beta Version 2.0