Permalink
Browse files

updated 2.3 (general update)

Removed from the basic package: Headsupgrid.js
Replace css3-mediaquerie.js for Respond.js
Deleted a lot of files.
  • Loading branch information...
1 parent e9e0198 commit 7c5f39db69164a0baf7923459d20ce533fb0a1c7 @newaeonweb committed Jul 23, 2012
View
@@ -1,187 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
- <title>Responsive Aeon Framework - 12Columns - Grid</title>
- <meta charset="utf-8">
- <meta name="description" content="Responsive css framework with a little toucj of javascript" />
- <meta name="author" content="Fernando Monteiro newaeonweb.com.br">
- <meta name="keywords" content="css framework, html5, grid system, responsive design, mobile, mediaqueries" />
-<!-- Optimized mobile viewport -->
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <link rel="shortcut icon" href="images/favicon.ico">
- <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
- <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
- <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
-<!-- CSS -->
- <link rel="stylesheet" type="text/css" media="all" href="css/grid_12_col.css" />
- <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
- <script src="js/css3-mediaqueries.js"></script>
-<!-- HTML5 IE Enabling Script -->
- <!--[if lt IE 9]><script src="js/html5.js"></script>
- <script src="js/pie.js"></script>
-<![endif]-->
-
-
-<!--CSS for demo purpose, clean this on production mode-->
-<style type="text/css">
-
-
- .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
- background-color: #97cef9;
- height:50px;
- margin-bottom: 20px;
- }
-
- nav {
- font-family:Futura, "Century Gothic", AppleGothic, sans-serif;
- font-size: 1.3em;
- padding: 1% 0%;
- }
-
- nav ul li {display: inline; margin-right: 20px;}
-
- nav a {color:#fff;}
-
- nav a:hover {color:#000000;}
-
-</style>
-
-<!--Heads up grid only for demo purpose, clean this on production mode-->
-<link rel="stylesheet" type="text/css" media="all" href="headsupgrid/hugrid.css" />
- <script src="headsupgrid/jquery-1.6.2.min.js"></script>
- <script src="headsupgrid/hugrid.js"></script>
- <script type="text/javascript">
- definegrid = function() {
- var browserWidth = $(window).width();
- if (browserWidth >= 1104)
- {
- pageUnits = 'px';
- colUnits = 'px';
- pagewidth = 1084;
- columns = 12;
- columnwidth = 72;
- gutterwidth = 20;
- pagetopmargin = 0;
- rowheight = 20;
- pageleftmargin:0;
- pagerightmargin:0;
- gridonload = 'off';
- makehugrid();
- }
- if (browserWidth <= 1000)
- {
- pageUnits = '%';
- colUnits = '%';
- pagewidth = 100;
- columns = 6;
- columnwidth = 15.129;
- gutterwidth = 1.845;
- pagetopmargin = 0;
- rowheight = 20;
- gridonload = 'off';
- makehugrid();
- }
- if (browserWidth <= 480)
- {
- pageUnits = '%';
- colUnits = '%';
- pagewidth = 96;
- columns = 1;
- columnwidth = 49;
- gutterwidth = 2;
- pagetopmargin = 10;
- rowheight = 20;
- gridonload = 'off';
- makehugrid();
- }
- }
- $(document).ready(function() {
- definegrid();
- setgridonload();
- });
-
- $(window).resize(function() {
- definegrid();
- });
-</script>
-<!--Heads up grid only for demo purpose, clean this on production mode-->
-</head>
-
-<body>
-<div class="container"><!--Beginning of content-->
- <div class="content">
- <div class="col1"> col 1 </div>
- <div class="col11 last"> col 11 </div>
- <div class="col12">
- <nav>
- <ul id="nav">
- <li><a href="#">This is</a></li>
- <li><a href="#">only a simple</a></li>
- <li><a href="#">exemple of</a></li>
- <li><a href="#">reponsive menu</a></li>
- </ul>
- </nav>
- </div>
- <div class="col1"> col 1 </div>
- <div class="col1"> col 2 </div>
- <div class="col1"> col 3 </div>
- <div class="col1"> col 4 </div>
- <div class="col1"> col 5 </div>
- <div class="col1"> col 6 </div>
- <div class="col1"> col 7 </div>
- <div class="col1"> col 8 </div>
- <div class="col1"> col 9 </div>
- <div class="col1"> col 10 </div>
- <div class="col1"> col 11 </div>
- <div class="col1 last"> col 12 </div>
- <div class="col4">col 4 </div>
- <div class="col4">col 4</div>
- <div class="col4 last">col 4</div>
- <div class="col3">col 3</div>
- <div class="col3">col 3</div>
- <div class="col3">col 3</div>
- <div class="col3 last">col 3</div>
- <div class="col6">col 6</div>
- <div class="col6 last">col 6</div>
- <div class="col12"> col 12 </div>
- <div class="col2"> col 2 </div>
- <div class="col3"> col 3 </div>
- <div class="col4"> col 4 </div>
- <div class="col3 last"> col 3 </div>
- <div class="col5"> col 5 </div>
- <div class="col6"> col 6 </div>
- <div class="col1 last"> col 1 </div>
- <div class="col7"> col 7 </div>
- <div class="col5 last"> col 5 </div>
- <div class="col8"> col 8 </div>
- <div class="col2"> col 2 </div>
- <div class="col2 last"> col 2 </div>
- <div class="col9"> col 9 </div>
- <div class="col3 last"> col 3 </div>
- <div class="col10"> col 10 </div>
- <div class="col1"> col 1 </div>
- <div class="col1 last"> col 1 </div>
- <div class="col11"> col 11 </div>
- <div class="col1 last"> col 1 </div>
- </div><!-- /content -->
-</div><!-- /container -->
-
-<!-- JavaScript at the bottom for fast page loading with just one js file -->
- <script src="js/head.js"></script>
- <script>
- head.js("js/jquery-1.6.2.min.js", "js/selectnav.min.js", "js/custom.js" );
- </script>
- <script>
- //IE outofdate friendly warning
- var $buoop = {vs:{i:8,f:3.6,o:10.6,s:3.2,n:9}}
- $buoop.ol = window.onload;
- window.onload=function(){
- try {if ($buoop.ol) $buoop.ol();}catch (e) {}
- var e = document.createElement("script");
- e.setAttribute("type", "text/javascript");
- e.setAttribute("src", "http://browser-update.org/update.js");
- document.body.appendChild(e);
- }
- </script>
-</body>
-</html>
View
@@ -671,4 +671,4 @@ into proprietary programs. If your program is a subroutine library, you
may consider it more useful to permit linking proprietary applications with
the library. If this is what you want to do, use the GNU Lesser General
Public License instead of this License. But first, please read
-<http://www.gnu.org/philosophy/why-not-lgpl.html>.
+<http://www.gnu.org/philosophy/why-not-lgpl.html>.
View
@@ -1,12 +1,11 @@
/*
Responsive Aeon Grid v2.0
Designed & Built by Fernando Monteiro, http://www.newaeonweb.com.br
- Licensed under Unlicense, http://unlicense.org/
+ Licensed under GPL license, http://www.gnu.org/licenses/gpl-3.0-standalone.html
Base stylesheet with CSS Reset, grid and progressive responsiveness
*/
-
/* #Reset & Basics (Inspired by E. Meyers)
================================================== */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
@@ -32,24 +31,8 @@
border-collapse: collapse;
border-spacing: 0; }
-/* #Typography
-================================================== */
-body, button, input, select, textarea {font: 100%/1.5 Georgia,Palatino,"Palatino Linotype",Times,"Times New Roman", sans-serif; *font-size: 1em; color:#333;} /* IE7 and older can't resize px based text */
-p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, img {margin: 0 0 1.5em; padding: 0}
-
-h1, h2, h3, h4, h5, h6 {font-family:Futura, "Century Gothic", AppleGothic, sans-serif;color:#222;text-shadow:1px 1px 1px rgba(0,0,0,.10)}
-
-span.ampersand{font-family:Adobe Caslon Pro,Baskerville,"Goudy Old Style","Palatino","Palatino Linotype","Book Antiqua",Georgia,"Times New Roman",Times,serif;font-style:italic;font-size:110%;line-height:0;position:relative;vertical-align:baseline} /* Best available ampersand */
-
-
-/* #help
-================================================== */
- .left { float: left; }
- .right { float: right; }
- .hide { display: none; }
-
-/* Responsive navigation */
-
+/* Responsive navigation with selectnav.js plugin
+============================================================================================== */
.selectnav { display: none; width:100%; }
/* small screen */
@@ -58,16 +41,14 @@ span.ampersand{font-family:Adobe Caslon Pro,Baskerville,"Goudy Old Style","Palat
.js .selectnav { display: block; }
}
-/* Responsive navigation */
-
-
-/* GRID */
-/* ----------------------------------------- */
+/* ResponsiveAeon Grid System
+============================================================================================== */
.container {
max-width:1104px;
margin:0 auto;
width:100%;
}
+
.content{
max-width:1084px;
padding: 0 10px;
@@ -100,21 +81,20 @@ span.ampersand{font-family:Adobe Caslon Pro,Baskerville,"Goudy Old Style","Palat
.col11{width:91.512%;}
.col12{width:100%; margin-right:0px;}
-.first {
- margin-left: 0%;
-}
-.last {
-margin-right: 0%;
-}
-img, object, embed {
-max-width: 100%;
-}
-img {
- height: auto;
-}
+.first {margin-left: 0%;}
+.last {margin-right: 0%;}
+/* Media - Fluid Images - Video
+============================================================================================== */
+figure {margin: 0}
+img, object, embed, video {max-width: 100%; _width: 100%} /* Fluid images */
+img {border: 0; -ms-interpolation-mode: bicubic} /* Improve IE's resizing of images */
+svg:not(:root) {overflow: hidden} /* Correct IE9 overflow */
+img {height: auto;}
-/* Mobile */
+
+/* General small screen Mobile
+============================================================================================== */
@media handheld, only screen and (max-width: 767px) {
@@ -144,3 +124,21 @@ img {
}
+/* Custom sizes
+============================================================================================== */
+
+@media screen and (max-width: 480px) {
+ /* Add your styles for devices with a maximum width of 480 */
+}
+
+@media screen and (max-width: 768px) {
+ /* Add your styles for devices with a maximum width of 768 */
+}
+
+@media screen and (max-width: 320px) {
+ /* Add your styles for devices with a maximum width of 320 */
+}
+
+@media screen and (max-width: 1024px) {
+ /* Add your styles for devices with a maximum width of 1024 */
+}
Oops, something went wrong.

0 comments on commit 7c5f39d

Please sign in to comment.