Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

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...
commit 7c5f39db69164a0baf7923459d20ce533fb0a1c7 1 parent e9e0198
fernando monteiro authored
187 12-col_response.html
... ... @@ -1,187 +0,0 @@
1   -<!DOCTYPE html>
2   -<html>
3   -<head>
4   - <title>Responsive Aeon Framework - 12Columns - Grid</title>
5   - <meta charset="utf-8">
6   - <meta name="description" content="Responsive css framework with a little toucj of javascript" />
7   - <meta name="author" content="Fernando Monteiro newaeonweb.com.br">
8   - <meta name="keywords" content="css framework, html5, grid system, responsive design, mobile, mediaqueries" />
9   -<!-- Optimized mobile viewport -->
10   - <meta name="viewport" content="width=device-width, initial-scale=1.0">
11   - <link rel="shortcut icon" href="images/favicon.ico">
12   - <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
13   - <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png">
14   - <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png">
15   -<!-- CSS -->
16   - <link rel="stylesheet" type="text/css" media="all" href="css/grid_12_col.css" />
17   - <link rel="stylesheet" type="text/css" media="all" href="css/style.css" />
18   - <script src="js/css3-mediaqueries.js"></script>
19   -<!-- HTML5 IE Enabling Script -->
20   - <!--[if lt IE 9]><script src="js/html5.js"></script>
21   - <script src="js/pie.js"></script>
22   -<![endif]-->
23   -
24   -
25   -<!--CSS for demo purpose, clean this on production mode-->
26   -<style type="text/css">
27   -
28   -
29   - .col1, .col2, .col3, .col4, .col5, .col6, .col7, .col8, .col9, .col10, .col11, .col12 {
30   - background-color: #97cef9;
31   - height:50px;
32   - margin-bottom: 20px;
33   - }
34   -
35   - nav {
36   - font-family:Futura, "Century Gothic", AppleGothic, sans-serif;
37   - font-size: 1.3em;
38   - padding: 1% 0%;
39   - }
40   -
41   - nav ul li {display: inline; margin-right: 20px;}
42   -
43   - nav a {color:#fff;}
44   -
45   - nav a:hover {color:#000000;}
46   -
47   -</style>
48   -
49   -<!--Heads up grid only for demo purpose, clean this on production mode-->
50   -<link rel="stylesheet" type="text/css" media="all" href="headsupgrid/hugrid.css" />
51   - <script src="headsupgrid/jquery-1.6.2.min.js"></script>
52   - <script src="headsupgrid/hugrid.js"></script>
53   - <script type="text/javascript">
54   - definegrid = function() {
55   - var browserWidth = $(window).width();
56   - if (browserWidth >= 1104)
57   - {
58   - pageUnits = 'px';
59   - colUnits = 'px';
60   - pagewidth = 1084;
61   - columns = 12;
62   - columnwidth = 72;
63   - gutterwidth = 20;
64   - pagetopmargin = 0;
65   - rowheight = 20;
66   - pageleftmargin:0;
67   - pagerightmargin:0;
68   - gridonload = 'off';
69   - makehugrid();
70   - }
71   - if (browserWidth <= 1000)
72   - {
73   - pageUnits = '%';
74   - colUnits = '%';
75   - pagewidth = 100;
76   - columns = 6;
77   - columnwidth = 15.129;
78   - gutterwidth = 1.845;
79   - pagetopmargin = 0;
80   - rowheight = 20;
81   - gridonload = 'off';
82   - makehugrid();
83   - }
84   - if (browserWidth <= 480)
85   - {
86   - pageUnits = '%';
87   - colUnits = '%';
88   - pagewidth = 96;
89   - columns = 1;
90   - columnwidth = 49;
91   - gutterwidth = 2;
92   - pagetopmargin = 10;
93   - rowheight = 20;
94   - gridonload = 'off';
95   - makehugrid();
96   - }
97   - }
98   - $(document).ready(function() {
99   - definegrid();
100   - setgridonload();
101   - });
102   -
103   - $(window).resize(function() {
104   - definegrid();
105   - });
106   -</script>
107   -<!--Heads up grid only for demo purpose, clean this on production mode-->
108   -</head>
109   -
110   -<body>
111   -<div class="container"><!--Beginning of content-->
112   - <div class="content">
113   - <div class="col1"> col 1 </div>
114   - <div class="col11 last"> col 11 </div>
115   - <div class="col12">
116   - <nav>
117   - <ul id="nav">
118   - <li><a href="#">This is</a></li>
119   - <li><a href="#">only a simple</a></li>
120   - <li><a href="#">exemple of</a></li>
121   - <li><a href="#">reponsive menu</a></li>
122   - </ul>
123   - </nav>
124   - </div>
125   - <div class="col1"> col 1 </div>
126   - <div class="col1"> col 2 </div>
127   - <div class="col1"> col 3 </div>
128   - <div class="col1"> col 4 </div>
129   - <div class="col1"> col 5 </div>
130   - <div class="col1"> col 6 </div>
131   - <div class="col1"> col 7 </div>
132   - <div class="col1"> col 8 </div>
133   - <div class="col1"> col 9 </div>
134   - <div class="col1"> col 10 </div>
135   - <div class="col1"> col 11 </div>
136   - <div class="col1 last"> col 12 </div>
137   - <div class="col4">col 4 </div>
138   - <div class="col4">col 4</div>
139   - <div class="col4 last">col 4</div>
140   - <div class="col3">col 3</div>
141   - <div class="col3">col 3</div>
142   - <div class="col3">col 3</div>
143   - <div class="col3 last">col 3</div>
144   - <div class="col6">col 6</div>
145   - <div class="col6 last">col 6</div>
146   - <div class="col12"> col 12 </div>
147   - <div class="col2"> col 2 </div>
148   - <div class="col3"> col 3 </div>
149   - <div class="col4"> col 4 </div>
150   - <div class="col3 last"> col 3 </div>
151   - <div class="col5"> col 5 </div>
152   - <div class="col6"> col 6 </div>
153   - <div class="col1 last"> col 1 </div>
154   - <div class="col7"> col 7 </div>
155   - <div class="col5 last"> col 5 </div>
156   - <div class="col8"> col 8 </div>
157   - <div class="col2"> col 2 </div>
158   - <div class="col2 last"> col 2 </div>
159   - <div class="col9"> col 9 </div>
160   - <div class="col3 last"> col 3 </div>
161   - <div class="col10"> col 10 </div>
162   - <div class="col1"> col 1 </div>
163   - <div class="col1 last"> col 1 </div>
164   - <div class="col11"> col 11 </div>
165   - <div class="col1 last"> col 1 </div>
166   - </div><!-- /content -->
167   -</div><!-- /container -->
168   -
169   -<!-- JavaScript at the bottom for fast page loading with just one js file -->
170   - <script src="js/head.js"></script>
171   - <script>
172   - head.js("js/jquery-1.6.2.min.js", "js/selectnav.min.js", "js/custom.js" );
173   - </script>
174   - <script>
175   - //IE outofdate friendly warning
176   - var $buoop = {vs:{i:8,f:3.6,o:10.6,s:3.2,n:9}}
177   - $buoop.ol = window.onload;
178   - window.onload=function(){
179   - try {if ($buoop.ol) $buoop.ol();}catch (e) {}
180   - var e = document.createElement("script");
181   - e.setAttribute("type", "text/javascript");
182   - e.setAttribute("src", "http://browser-update.org/update.js");
183   - document.body.appendChild(e);
184   - }
185   - </script>
186   -</body>
187   -</html>
2  GPL_license.txt
@@ -671,4 +671,4 @@ into proprietary programs. If your program is a subroutine library, you
671 671 may consider it more useful to permit linking proprietary applications with
672 672 the library. If this is what you want to do, use the GNU Lesser General
673 673 Public License instead of this License. But first, please read
674   -<http://www.gnu.org/philosophy/why-not-lgpl.html>.
  674 +<http://www.gnu.org/philosophy/why-not-lgpl.html>.
74 css/grid_12_col.css
... ... @@ -1,12 +1,11 @@
1 1 /*
2 2 Responsive Aeon Grid v2.0
3 3 Designed & Built by Fernando Monteiro, http://www.newaeonweb.com.br
4   - Licensed under Unlicense, http://unlicense.org/
  4 + Licensed under GPL license, http://www.gnu.org/licenses/gpl-3.0-standalone.html
5 5
6 6 Base stylesheet with CSS Reset, grid and progressive responsiveness
7 7 */
8 8
9   -
10 9 /* #Reset & Basics (Inspired by E. Meyers)
11 10 ================================================== */
12 11 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 @@
32 31 border-collapse: collapse;
33 32 border-spacing: 0; }
34 33
35   -/* #Typography
36   -================================================== */
37   -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 */
38   -p, blockquote, q, pre, address, hr, code, samp, dl, ol, ul, form, table, fieldset, menu, img {margin: 0 0 1.5em; padding: 0}
39   -
40   -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)}
41   -
42   -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 */
43   -
44   -
45   -/* #help
46   -================================================== */
47   - .left { float: left; }
48   - .right { float: right; }
49   - .hide { display: none; }
50   -
51   -/* Responsive navigation */
52   -
  34 +/* Responsive navigation with selectnav.js plugin
  35 +============================================================================================== */
53 36 .selectnav { display: none; width:100%; }
54 37
55 38 /* small screen */
@@ -58,16 +41,14 @@ span.ampersand{font-family:Adobe Caslon Pro,Baskerville,"Goudy Old Style","Palat
58 41 .js .selectnav { display: block; }
59 42 }
60 43
61   -/* Responsive navigation */
62   -
63   -
64   -/* GRID */
65   -/* ----------------------------------------- */
  44 +/* ResponsiveAeon Grid System
  45 +============================================================================================== */
66 46 .container {
67 47 max-width:1104px;
68 48 margin:0 auto;
69 49 width:100%;
70 50 }
  51 +
71 52 .content{
72 53 max-width:1084px;
73 54 padding: 0 10px;
@@ -100,21 +81,20 @@ span.ampersand{font-family:Adobe Caslon Pro,Baskerville,"Goudy Old Style","Palat
100 81 .col11{width:91.512%;}
101 82 .col12{width:100%; margin-right:0px;}
102 83
103   -.first {
104   - margin-left: 0%;
105   -}
106   -.last {
107   -margin-right: 0%;
108   -}
109   -img, object, embed {
110   -max-width: 100%;
111   -}
112   -img {
113   - height: auto;
114   -}
  84 +.first {margin-left: 0%;}
  85 +.last {margin-right: 0%;}
115 86
  87 +/* Media - Fluid Images - Video
  88 +============================================================================================== */
  89 +figure {margin: 0}
  90 +img, object, embed, video {max-width: 100%; _width: 100%} /* Fluid images */
  91 +img {border: 0; -ms-interpolation-mode: bicubic} /* Improve IE's resizing of images */
  92 +svg:not(:root) {overflow: hidden} /* Correct IE9 overflow */
  93 +img {height: auto;}
116 94
117   -/* Mobile */
  95 +
  96 +/* General small screen Mobile
  97 +============================================================================================== */
118 98
119 99 @media handheld, only screen and (max-width: 767px) {
120 100
@@ -144,3 +124,21 @@ img {
144 124 }
145 125
146 126
  127 +/* Custom sizes
  128 +============================================================================================== */
  129 +
  130 +@media screen and (max-width: 480px) {
  131 + /* Add your styles for devices with a maximum width of 480 */
  132 +}
  133 +
  134 +@media screen and (max-width: 768px) {
  135 + /* Add your styles for devices with a maximum width of 768 */
  136 +}
  137 +
  138 +@media screen and (max-width: 320px) {
  139 + /* Add your styles for devices with a maximum width of 320 */
  140 +}
  141 +
  142 +@media screen and (max-width: 1024px) {
  143 + /* Add your styles for devices with a maximum width of 1024 */
  144 +}
188 css/style.css
... ... @@ -1,188 +0,0 @@
1   -/*
2   - Responsive Aeon Grid v2.0
3   - Designed & Built by Fernando Monteiro, http://www.newaeonweb.com.br
4   - Licensed under Unlicense, http://unlicense.org/
5   -
6   - Base stylesheet with CSS Body, quotes, typography, lists, Hyperlinks, tables, forms, media, clearfix and lights
7   -*/
8   -
9   -/* BODY Optmized */
10   -body {margin: 0; min-height: 100%; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; background:url('../images/white_texture.jpg') 0 1.1875em}
11   -/* QUOTES */
12   -blockquote, q {quotes: none}
13   -blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none}
14   -blockquote, q, cite {font-style: italic}
15   -blockquote {padding-left: 1.5em; border-left: 3px solid #ccc}
16   -blockquote > p {padding: 0}
17   -
18   -h1 {margin: 0; font-size: 2.5em; line-height: 1.2em; margin-bottom: 0.4em} /* 60px / 72px */
19   -h2 {margin: 0; font-size: 2em; line-height: 1em; margin-bottom: 0.5em} /* 48px / 48px */
20   -h3 {margin: 0; font-size: 1.5em; line-height: 1.3333333333333333333333333333333em; margin-bottom: 0.6667em} /* 36px / 48px */
21   -h4 {margin: 0; font-size: 1.0em; line-height: 1em; margin-bottom: 1em} /* 24px / 24px */
22   -h5 {margin: 0; font-size: 0.835em; line-height: 1.1428571428571428571428571428571em; margin-bottom: 1.1428571428571428571428571428571em} /* 21px / 24px */
23   -h6 {margin: 0; font-size: 0.80em; line-height: 1.3333333333333333333333333333333em; margin-bottom: 1.3333333333333333333333333333333em} /* 18px / 24px */
24   -p, ul, blockquote, pre, td, th, label {margin: 0; font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em} /* 16px / 24px */
25   -small, p.small {margin: 0; font-size: 0.875em; line-height: 1.7142857142857142857142857142857em; margin-bottom: 1.7142857142857142857142857142857em} /* 14px / 24px */
26   -
27   -/* LISTS */
28   -ul, ol { margin-bottom: 18px; padding-left: 10px;}
29   -ul { list-style: none outside; }
30   -ol { list-style: decimal; }
31   -ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
32   -ul.square { list-style: square outside; }
33   -ul.circle { list-style: circle outside; }
34   -ul.disc { list-style: disc outside; }
35   -li { margin-bottom: 0px; }
36   -ul.large li { line-height: 21px; }
37   -
38   -/* HYPERLINKS */
39   -a {text-decoration: none; color:#ff7c00}
40   -a:hover {text-decoration: none}
41   -a:focus {outline: thin dotted}
42   -a:hover, a:active {outline: none;} /* Better CSS Outline Suppression */
43   -
44   -/* TABLES */
45   -table {border-collapse: collapse; border-spacing: 0; margin-bottom: 1.5em}
46   -th {text-align: left}
47   -tr, th, td {padding-right: 1.5em; border-bottom: 0 solid #333}
48   -
49   -/* FORMS */
50   -form {margin: 0}
51   -fieldset {border: 0;padding: 0}
52   -textarea {overflow: auto; vertical-align: top}
53   -legend {*margin-left: -.75em}
54   -button, input, select, textarea {vertical-align: baseline; *vertical-align: middle} /* IE7 and older */
55   -button, input {line-height: normal; *overflow: visible}
56   -button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer;-webkit-appearance: button}
57   -input[type="checkbox"], input[type="radio"] {box-sizing: border-box}
58   -input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box}
59   -input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}
60   -button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0}
61   -
62   -/* MEDIA */
63   -figure {margin: 0}
64   -img, object, embed, video {max-width: 100%; _width: 100%} /* Fluid images */
65   -img {border: 0; -ms-interpolation-mode: bicubic} /* Improve IE's resizing of images */
66   -svg:not(:root) {overflow: hidden} /* Correct IE9 overflow */
67   -
68   -/* CLEARFIX */
69   -.clear:before, .clear:after {content:"";display:table} /* For modern browsers */
70   -.clear:after {clear:both}
71   -.clear {zoom:1} /* For IE 6/7 (trigger hasLayout) */
72   -
73   -/* LIGHT TEXT */
74   -.light {color:#ff7c00;}
75   -.lightgreen {color:#73880A;}
76   -
77   -/* TEXT ALIGN*/
78   -.center {text-align: center;}
79   -.left {text-align: left;}
80   -.right {text-align: right;}
81   -.justify {text-align:justify;}
82   -
83   -
84   -/*======================================================Place your code here======================================================*/
85   -
86   -
87   -
88   -/*======================================================Place yout code here======================================================*/
89   -
90   -/* CSS for jQuery Reveal Plugin
91   - * Maintained for Foundation. foundation.zurb.com
92   - * Free to use under the MIT license.
93   - * http://www.opensource.org/licenses/mit-license.php
94   - * Adapted to Responsive Aeon Framework by Fernando Monteiro
95   -
96   -/* --------------------------------------------------
97   - Reveal Modals
98   - -------------------------------------------------- */
99   -
100   - .reveal-modal-bg {
101   - position: fixed;
102   - height: 100%;
103   - width: 100%;
104   - background: #000;
105   - z-index: 40;
106   - display: none;
107   - top: 0;
108   - left: 0;
109   - }
110   -
111   - .reveal-modal {
112   - visibility: hidden;
113   - top: 100px;
114   - left: 50%;
115   - margin-left: -300px;
116   - width: 520px;
117   - background: #eee url(../images/modal-gloss.png) no-repeat -200px -80px;
118   - position: absolute;
119   - z-index: 41;
120   - padding: 30px 40px 34px;
121   - -moz-border-radius: 5px;
122   - -webkit-border-radius: 5px;
123   - border-radius: 5px;
124   - -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
125   - -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
126   - box-shadow: 0 0 10px rgba(0,0,0,.4);
127   - }
128   -
129   - .reveal-modal.small { width: 200px; margin-left: -140px;}
130   - .reveal-modal.medium { width: 400px; margin-left: -240px;}
131   - .reveal-modal.large { width: 600px; margin-left: -340px;}
132   - .reveal-modal.xlarge { width: 800px; margin-left: -440px;}
133   -
134   - .reveal-modal .close-reveal-modal {
135   - font-size: 22px;
136   - line-height: .5;
137   - position: absolute;
138   - top: 8px;
139   - right: 11px;
140   - color: #aaa;
141   - text-shadow: 0 -1px 1px rbga(0,0,0,.6);
142   - font-weight: bold;
143   - cursor: pointer;
144   - }
145   -
146   - .reveal-modal .row {
147   - min-width: 0;
148   - }
149   -
150   - /* Mobile */
151   -
152   - @media handheld, only screen and (max-width: 1023px) {
153   - .reveal-modal-bg { position: absolute; }
154   -
155   - .reveal-modal,
156   - .reveal-modal.small,
157   - .reveal-modal.medium,
158   - .reveal-modal.large,
159   - .reveal-modal.xlarge { width: 60%; top: 60px; left: 15%; margin-left: 0; padding: 20px; height: auto; }
160   - }
161   -
162   - @media handheld, only screen and (max-width: 767px) {
163   - .reveal-modal-bg { position: absolute; }
164   -
165   - .reveal-modal,
166   - .reveal-modal.small,
167   - .reveal-modal.medium,
168   - .reveal-modal.large,
169   - .reveal-modal.xlarge { width: 80%; top: 15px; left: 5%; margin-left: 0; padding: 20px; height: auto; }
170   - }
171   -
172   -
173   - /*
174   -
175   - NOTES
176   -
177   - Close button entity is &#215;
178   -
179   - Example markup
180   -
181   - <div id="myModal" class="reveal-modal">
182   - <h2>Awesome. I have it.</h2>
183   - <p class="lead">Your couch. I it's mine.</p>
184   - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
185   - <a class="close-reveal-modal">&#215;</a>
186   - </div>
187   -
188   - */
188 css/style_index.css
... ... @@ -1,188 +0,0 @@
1   -/*
2   - Responsive Aeon Grid v2.0
3   - Designed & Built by Fernando Monteiro, http://www.newaeonweb.com.br
4   - Licensed under Unlicense, http://unlicense.org/
5   -
6   - Base stylesheet with CSS Body, quotes, typography, lists, Hyperlinks, tables, forms, media, clearfix and lights
7   -*/
8   -
9   -/* BODY Optmized */
10   -body {margin: 0; min-height: 100%; -webkit-font-smoothing:antialiased; font-smoothing:antialiased; text-rendering:optimizeLegibility; background:url('../images/white_texture.jpg') 0 1.1875em}
11   -/* QUOTES */
12   -blockquote, q {quotes: none}
13   -blockquote:before, blockquote:after, q:before, q:after {content: ''; content: none}
14   -blockquote, q, cite {font-style: italic}
15   -blockquote {padding-left: 1.5em; border-left: 3px solid #ccc}
16   -blockquote > p {padding: 0}
17   -
18   -h1 {margin: 0; font-size: 2.5em; line-height: 1.2em; margin-bottom: 0.4em} /* 60px / 72px */
19   -h2 {margin: 0; font-size: 2em; line-height: 1em; margin-bottom: 0.5em} /* 48px / 48px */
20   -h3 {margin: 0; font-size: 1.5em; line-height: 1.3333333333333333333333333333333em; margin-bottom: 0.6667em} /* 36px / 48px */
21   -h4 {margin: 0; font-size: 1.0em; line-height: 1em; margin-bottom: 1em} /* 24px / 24px */
22   -h5 {margin: 0; font-size: 0.835em; line-height: 1.1428571428571428571428571428571em; margin-bottom: 1.1428571428571428571428571428571em} /* 21px / 24px */
23   -h6 {margin: 0; font-size: 0.80em; line-height: 1.3333333333333333333333333333333em; margin-bottom: 1.3333333333333333333333333333333em} /* 18px / 24px */
24   -p, ul, blockquote, pre, td, th, label {margin: 0; font-size: 1em; line-height: 1.5em; margin-bottom: 1.5em} /* 16px / 24px */
25   -small, p.small {margin: 0; font-size: 0.875em; line-height: 1.7142857142857142857142857142857em; margin-bottom: 1.7142857142857142857142857142857em} /* 14px / 24px */
26   -
27   -/* LISTS */
28   -ul, ol { margin-bottom: 18px; padding-left: 10px;}
29   -ul { list-style: none outside; }
30   -ol { list-style: decimal; }
31   -ol, ul.square, ul.circle, ul.disc { margin-left: 30px; }
32   -ul.square { list-style: square outside; }
33   -ul.circle { list-style: circle outside; }
34   -ul.disc { list-style: disc outside; }
35   -li { margin-bottom: 0px; }
36   -ul.large li { line-height: 21px; }
37   -
38   -/* HYPERLINKS */
39   -a {text-decoration: none; color:#ff7c00}
40   -a:hover {text-decoration: none}
41   -a:focus {outline: thin dotted}
42   -a:hover, a:active {outline: none;} /* Better CSS Outline Suppression */
43   -
44   -/* TABLES */
45   -table {border-collapse: collapse; border-spacing: 0; margin-bottom: 1.5em}
46   -th {text-align: left}
47   -tr, th, td {padding-right: 1.5em; border-bottom: 0 solid #333}
48   -
49   -/* FORMS */
50   -form {margin: 0}
51   -fieldset {border: 0;padding: 0}
52   -textarea {overflow: auto; vertical-align: top}
53   -legend {*margin-left: -.75em}
54   -button, input, select, textarea {vertical-align: baseline; *vertical-align: middle} /* IE7 and older */
55   -button, input {line-height: normal; *overflow: visible}
56   -button, input[type="button"], input[type="reset"], input[type="submit"] {cursor: pointer;-webkit-appearance: button}
57   -input[type="checkbox"], input[type="radio"] {box-sizing: border-box}
58   -input[type="search"] {-webkit-appearance: textfield; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box}
59   -input[type="search"]::-webkit-search-decoration {-webkit-appearance: none}
60   -button::-moz-focus-inner, input::-moz-focus-inner {border: 0; padding: 0}
61   -
62   -/* MEDIA */
63   -figure {margin: 0}
64   -img, object, embed, video {max-width: 100%; _width: 100%} /* Fluid images */
65   -img {border: 0; -ms-interpolation-mode: bicubic} /* Improve IE's resizing of images */
66   -svg:not(:root) {overflow: hidden} /* Correct IE9 overflow */
67   -
68   -/* CLEARFIX */
69   -.clear:before, .clear:after {content:"";display:table} /* For modern browsers */
70   -.clear:after {clear:both}
71   -.clear {zoom:1} /* For IE 6/7 (trigger hasLayout) */
72   -
73   -/* LIGHT TEXT */
74   -.light {color:#ff7c00;}
75   -.lightgreen {color:#73880A;}
76   -
77   -/* TEXT ALIGN*/
78   -.center {text-align: center;}
79   -.left {text-align: left;}
80   -.right {text-align: right;}
81   -.justify {text-align:justify;}
82   -
83   -
84   -/*======================================================Place your code here======================================================*/
85   -
86   -
87   -
88   -/*======================================================Place yout code here======================================================*/
89   -
90   -/* CSS for jQuery Reveal Plugin
91   - * Maintained for Foundation. foundation.zurb.com
92   - * Free to use under the MIT license.
93   - * http://www.opensource.org/licenses/mit-license.php
94   - * Adapted to Responsive Aeon Framework by Fernando Monteiro
95   -
96   -/* --------------------------------------------------
97   - Reveal Modals
98   - -------------------------------------------------- */
99   -
100   - .reveal-modal-bg {
101   - position: fixed;
102   - height: 100%;
103   - width: 100%;
104   - background: #000;
105   - z-index: 40;
106   - display: none;
107   - top: 0;
108   - left: 0;
109   - }
110   -
111   - .reveal-modal {
112   - visibility: hidden;
113   - top: 100px;
114   - left: 50%;
115   - margin-left: -300px;
116   - width: 520px;
117   - background: #eee url(../images/modal-gloss.png) no-repeat -200px -80px;
118   - position: absolute;
119   - z-index: 41;
120   - padding: 30px 40px 34px;
121   - -moz-border-radius: 5px;
122   - -webkit-border-radius: 5px;
123   - border-radius: 5px;
124   - -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
125   - -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
126   - box-shadow: 0 0 10px rgba(0,0,0,.4);
127   - }
128   -
129   - .reveal-modal.small { width: 200px; margin-left: -140px;}
130   - .reveal-modal.medium { width: 400px; margin-left: -240px;}
131   - .reveal-modal.large { width: 600px; margin-left: -340px;}
132   - .reveal-modal.xlarge { width: 800px; margin-left: -440px;}
133   -
134   - .reveal-modal .close-reveal-modal {
135   - font-size: 22px;
136   - line-height: .5;
137   - position: absolute;
138   - top: 8px;
139   - right: 11px;
140   - color: #aaa;
141   - text-shadow: 0 -1px 1px rbga(0,0,0,.6);
142   - font-weight: bold;
143   - cursor: pointer;
144   - }
145   -
146   - .reveal-modal .row {
147   - min-width: 0;
148   - }
149   -
150   - /* Mobile */
151   -
152   - @media handheld, only screen and (max-width: 1023px) {
153   - .reveal-modal-bg { position: absolute; }
154   -
155   - .reveal-modal,
156   - .reveal-modal.small,
157   - .reveal-modal.medium,
158   - .reveal-modal.large,
159   - .reveal-modal.xlarge { width: 60%; top: 60px; left: 15%; margin-left: 0; padding: 20px; height: auto; }
160   - }
161   -
162   - @media handheld, only screen and (max-width: 767px) {
163   - .reveal-modal-bg { position: absolute; }
164   -
165   - .reveal-modal,
166   - .reveal-modal.small,
167   - .reveal-modal.medium,
168   - .reveal-modal.large,
169   - .reveal-modal.xlarge { width: 80%; top: 15px; left: 5%; margin-left: 0; padding: 20px; height: auto; }
170   - }
171   -
172   -
173   - /*
174   -
175   - NOTES
176   -
177   - Close button entity is &#215;
178   -
179   - Example markup
180   -
181   - <div id="myModal" class="reveal-modal">
182   - <h2>Awesome. I have it.</h2>
183   - <p class="lead">Your couch. I it's mine.</p>
184   - <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices aliquet placerat. Duis pulvinar orci et nisi euismod vitae tempus lorem consectetur. Duis at magna quis turpis mattis venenatis eget id diam. </p>
185   - <a class="close-reveal-modal">&#215;</a>
186   - </div>
187   -
188   - */
341 headsupgrid/example_responsive.html
... ... @@ -1,341 +0,0 @@
1   -<!doctype html>
2   -<html>
3   -<head>
4   -<meta charset="utf-8"/>
5   -<meta name="viewport" content="initial-scale=1.0,width=device-width" />
6   -<title>The Responsive Heads-Up Grid Example</title>
7   -
8   -<link href="hugrid.css" type="text/css" rel="stylesheet" />
9   -<script src="jquery-1.6.2.min.js"></script>
10   -<script src="hugrid.js"></script>
11   -<script type="text/javascript">
12   - definegrid = function() {
13   - var browserWidth = $(window).width();
14   - if (browserWidth >= 1001)
15   - {
16   - pageUnits = 'px';
17   - colUnits = 'px';
18   - pagewidth = 960;
19   - columns = 6;
20   - columnwidth = 140;
21   - gutterwidth = 24;
22   - pagetopmargin = 35;
23   - rowheight = 20;
24   - gridonload = 'off';
25   - makehugrid();
26   - }
27   - if (browserWidth <= 1000)
28   - {
29   - pageUnits = '%';
30   - colUnits = '%';
31   - pagewidth = 94;
32   - columns = 3;
33   - columnwidth = 32;
34   - gutterwidth = 2;
35   - pagetopmargin = 35;
36   - rowheight = 20;
37   - gridonload = 'off';
38   - makehugrid();
39   - }
40   - if (browserWidth <= 768)
41   - {
42   - pageUnits = '%';
43   - colUnits = '%';
44   - pagewidth = 96;
45   - columns = 2;
46   - columnwidth = 49;
47   - gutterwidth = 2;
48   - pagetopmargin = 35;
49   - rowheight = 20;
50   - gridonload = 'off';
51   - makehugrid();
52   - }
53   - }
54   - $(document).ready(function() {
55   - definegrid();
56   - setgridonload();
57   - });
58   -
59   - $(window).resize(function() {
60   - definegrid();
61   - });
62   -</script>
63   -</head>
64   -
65   -<body>
66   -
67   - <div class="page">
68   - <h1>The Responsive Heads-Up Grid</h1>
69   - <p id="subhead"><a href="http://bohemianalps.com/tools/grid/">The Heads-Up Grid</a> is an overlay grid for use during in-browser website development, built with HTML + CSS + JavaScript.</p>
70   -
71   - <div class="cols cols3">
72   - <div class="col">
73   - <h2>I’m Droppin’ Science</h2>
74   - <p>This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.</p>
75   - </div>
76   - <div class="col">
77   - <h2>Like Galileo</h2>
78   - <p>This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.</p>
79   - </div>
80   - <div class="col">
81   - <h2>Dropped the Orange!</h2>
82   - <p>This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said. This is just some filler copy. I got nothing to say that this example hasn’t already said.</p>
83   - </div>
84   - </div>
85   - </div>
86   -
87   - <p id="footer">This is just some filler copy. I got nothing to say that this example hasn’t already said.</p>
88   -
89   -<style type="text/css">
90   -body {
91   - margin:0;
92   - padding:0;
93   - background-color:#666;
94   - font-family: 'Inconsolata', sans-serif;
95   - text-align:left;
96   - color:#444;
97   -}
98   -h1 {
99   - margin:0 0 .1em 0;
100   - padding:0;
101   - font-family:Arial,sans-serif;
102   - font-weight:bold;
103   - font-size:80px;
104   - line-height:100%;
105   - text-align:center;
106   - text-transform:uppercase;
107   -}
108   -h2 {
109   - margin:1em 0 .3em 0;
110   - padding:0;
111   - font-family:Arial,sans-serif;
112   - font-weight:bold;
113   - font-size:27px;
114   - line-height:100%;
115   - text-align:center;
116   -}
117   -p {
118   - font-size:.9em;
119   - line-height:1.3em;
120   - margin:0 0 1.5em 0;
121   - padding:0;
122   -}
123   -p#subhead {
124   - margin-bottom:0;
125   - text-align:center;
126   -}
127   -p#footer {
128   - position:relative;
129   - z-index:200000;
130   - clear:both;
131   - margin:1em 0;
132   - font-size:.8em;
133   - text-align:center;
134   - color:#FFF;
135   -}
136   -pre {
137   - overflow:auto;
138   - margin:0 0 1em 0;
139   - padding:20px;
140   - background-color:#ECE9D0;
141   - border-radius:8px;
142   - font-family:'Andale Mono',monospace;
143   - font-size:.7em;
144   - line-height:1.2em;
145   - color:#666;
146   -}
147   -pre i {
148   - font-style:normal;
149   - color:#514CD6;
150   -}
151   -pre b {
152   - font-weight:normal;
153   - color:#BE0009;
154   -}
155   -a:link,
156   -a:visited {
157   - border-width:0 0 1px 0;
158   - border-style:dashed;
159   - border-color:#3773B7;
160   - text-decoration:none;
161   - color:#3773B7;
162   -}
163   -a:hover {
164   - border-style:solid;
165   -}
166   -a.button {
167   - position:relative;
168   - z-index:200000;
169   - overflow:hidden;
170   - display:block;
171   - margin:4px;
172   - padding:10px;
173   - border-radius:8px;
174   - border-width:0;
175   -}
176   -a.button:hover {
177   - background-color:#ECE9D0;
178   - box-shadow:1px 2px 8px #999;
179   -}
180   -a.button span {
181   - display:block;
182   - float:right;
183   - width:175px;
184   - padding-top:20px;
185   - font-size:.9em;
186   -}
187   -a.button span strong {
188   - font-size:1.4em;
189   -}
190   -#footer a:link,
191   -#footer a:visited {
192   - border-color:#FFF;
193   - color:#FFF;
194   -}
195   -
196   -/* Page Structure */
197   -div.page {
198   - overflow:hidden;
199   - width:960px;
200   - margin:35px auto .5em auto;
201   - padding:2em 2em 3em 2em;
202   - background-color:#F7F4DB;
203   - box-shadow:1px 2px 8px #222;
204   -}
205   -div.cols3 {
206   - overflow:hidden;
207   -}
208   -div.col {
209   - float:left;
210   - margin:0;
211   -}
212   -div.cols3 div.col {
213   - width:304px;
214   - padding:0 0 0 24px;
215   -}
216   -div.cols2 div.col {
217   - width:468px;
218   - padding:0 0 0 24px;
219   -}
220   -div.cols div.col:first-child {
221   - padding-left:0;
222   -}
223   -
224   -/* Media Query Adjustments */
225   -@media screen and (min-width:1001px) {
226   - div.page {
227   - width:960px;
228   - margin:35px auto .5em auto;
229   - padding:2em 2em 3em 2em;
230   - }
231   - div.col {
232   - float:left;
233   - margin:0;
234   - }
235   - div.cols3 div.col {
236   - width:304px;
237   - padding:0 0 0 24px;
238   - }
239   - div.cols3 div.colspan2 {
240   - width:632px;
241   - }
242   - div.cols3 div.colspanBox {
243   - width:584px;
244   - margin-left:24px;
245   - padding-right:24px;
246   - padding-bottom:20px;
247   - border-radius:20px;
248   - }
249   - div.cols2 div.col {
250   - width:468px;
251   - padding:0 0 0 24px;
252   - }
253   - div.cols div.col:first-child {
254   - padding-left:0;
255   - }
256   -}
257   -@media screen and (max-width:1000px) {
258   - div.page {
259   - width:94%;
260   - margin:35px auto .5em auto;
261   - padding:2%;
262   - }
263   - div.col {
264   - float:left;
265   - margin:0;
266   - }
267   - div.cols3 div.col {
268   - width:32%;
269   - padding:0 0 0 2%;
270   - }
271   - div.cols3 div.colspan2 {
272   - width:65.33333%;
273   - }
274   - div.cols3 div.colspanBox {
275   - width:63.33333%;
276   - margin-left:1%;
277   - padding-right:1%;
278   - padding-bottom:20px;
279   - border-radius:20px;
280   - }
281   - div.cols2 div.col {
282   - width:49%;
283   - padding:0 0 0 2%;
284   - }
285   - div.cols div.col:first-child {
286   - padding-left:0;
287   - }
288   - a.button span {
289   - width:100%;
290   - padding-top:0;
291   - text-align:center;
292   - }
293   - a.button img {
294   - display:block;
295   - float:none;
296   - margin:0 auto;
297   - }
298   -}
299   -@media screen and (max-width:768px) {
300   - h1 {
301   - font-size:60px;
302   - }
303   - div.page {
304   - width:96%;
305   - margin:0 auto;
306   - padding:2%;
307   - }
308   - div.col {
309   - float:none;
310   - margin:0;
311   - }
312   - div.cols3 div.col,
313   - div.cols3 div.colspan2,
314   - div.cols2 div.col {
315   - width:100%;
316   - padding:0;
317   - }
318   - div.cols3 div.colspanBox {
319   - width:94%;
320   - padding:2%;
321   - margin:0 1%;
322   - }
323   - a.button {
324   - width:200px;
325   - margin:20px auto 0 auto;
326   - }
327   - a.button span {
328   - width:100%;
329   - padding-top:0;
330   - text-align:center;
331   - }
332   - a.button img {
333   - display:block;
334   - float:none;
335   - margin:0 auto;
336   - }
337   -}
338   -</style>
339   -
340   -</body>
341   -</html>
188 headsupgrid/hugrid.css
... ... @@ -1,188 +0,0 @@
1   -/*
2   - * Heads-Up Grid
3   - * Simple HTML + CSS grid overlay for web design and development.
4   - *
5   - * Files: hugrid.css, hugrid.js, example.html
6   - *
7   - * Example and documentation at: http://bohemianalps.com/tools/grid
8   - *
9   - * Shurane, thanks for your help! https://github.com/shurane
10   - *
11   - * Copyright (c) 2011 Jason Simanek
12   - *
13   - * Version: 1.5 (09/03/2011)
14   - * Requires: jQuery v1.6+
15   - *
16   - * Licensed under the GPL license:
17   - * http://www.gnu.org/licenses/gpl.html
18   -*/
19   -
20   -/* Default Heads-Up Grid Properties - These will be overwritten by the values entered in the document.ready function. */
21   -#hugrid {
22   - width:1100px; /* width of webpage */
23   - margin-left:-550px; /* to center the grid, set half of webpage width as negative value */
24   -}
25   -#hugrid div {
26   - margin-left:72px; /* width of column */
27   - width:20px; /* width of column gutter */
28   -}
29   -
30   -/* Default Heads-Up Grid Styles - These styles allow you to change the color and style of the lines that make the Heads-Up Grid */
31   -#hugrid div div {
32   - border-color:#FF00EB; /* color of grid line */
33   - border-style:solid; /* style of grid line (dotted, dashed, solid) */
34   - opacity:0.3; /*opacity of grid line */
35   -}
36   -#hugrid div:hover {
37   - background-color:#36F3FF; /* color of gutter on :hover */
38   -}
39   -#hugrid div.mline {
40   - border-color:#AA82FF; /* color of margin line */
41   - border-style:solid; /* style of margin lines (dotted, dashed, solid) */
42   -}
43   -#hugridRows {
44   - border-color:#AA82FF; /* color of top margin line */
45   - border-style:solid; /* style of top margin line */
46   -}
47   -#hugridRows div.lineB {
48   - border-color:#5DFF35; /* color of row line */
49   - border-style:solid; /* style of row line */
50   - opacity:0.3; /*opacity of row line */
51   -}
52   -#hugridRows div.lineB:hover {
53   - border-color:#5DFF35; /* color of row line on :hover */
54   - border-style:solid; /* style of row line on :hover */
55   - opacity:1.0; /*opacity of row line on :hover */
56   -}
57   -
58   -/* ------------------------------------------------------------------------- */
59   -/* Fixed Styles (No need to alter the below styles for standard grid needs.) */
60   -#hugrid {
61   - position:fixed;
62   - z-index:100000;
63   - top:0;
64   - left:50%;
65   - height:0;
66   - margin-top:0;
67   - margin-right:0;
68   - margin-bottom:0;
69   - padding:0;
70   - cursor:crosshair;
71   -}
72   -#hugrid div {
73   - display:block;
74   - float:left;
75   - position:relative;
76   - top:0;
77   - border-width:0;
78   -}
79   -#hugrid div div {
80   - margin:0;
81   - width:0;
82   -}
83   -#hugrid div div.lineL {
84   - float:left;
85   - height:10000px;
86   - border-width:0 0 0 1px;
87   -}
88   -#hugrid div div.lineR {
89   - float:right;
90   - height:10000px;
91   - border-width:0 1px 0 0;
92   -}
93   -#hugrid div.mline {
94   - margin:0 0 0 -1px;
95   - width:0;
96   - height:100000px;
97   -}
98   -#hugrid div.mlineL {
99   - border-width:0 1px 0 0;
100   -}
101   -#hugrid div.mlineR {
102   - float:right;
103   - margin-right:-1px;
104   - border-width:0 0 0 1px;
105   -}
106   -#hugrid div:hover {
107   - opacity:0.5;
108   -}
109   -#hugrid div:hover div.lineL,
110   -#hugrid div:hover div.lineR {
111   - border-style:solid;
112   - opacity:1.0;
113   -}
114   -#hugridRows {
115   - position:absolute;
116   - z-index:90000;
117   - top:-1px;
118   - left:0;
119   - width:100%;
120   - height:0;
121   - margin:0;
122   - padding:0;
123   - border-width:1px 0 0 0;
124   - cursor:crosshair;
125   -}
126   -#hugridRows div {
127   - display:block;
128   - width:100%;
129   - height:1px;
130   - margin:0;
131   - padding:0;
132   -}
133   -#hugridRows div div.lineB {
134   - margin:0;
135   - border-width:0 0 1px 0;