├── favicon.ico
├── img
    └── html5rocks.png
├── README.md
├── css
    └── screen.css
├── scripts
    └── css3-mediaqueries.js
└── index.html


/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crozynski/Fluid-Squares/HEAD/favicon.ico


--------------------------------------------------------------------------------
/img/html5rocks.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/crozynski/Fluid-Squares/HEAD/img/html5rocks.png


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Fluid-Squares
 2 | 
 3 | ## What is it?
 4 | 
 5 | A fluid grid of square units using HTML and CSS.
 6 | 
 7 | Fluid Squares preserves a unit's square proportion within a fluid layout. The number of columns also reduce to suit browser or device width using CSS media queries.
 8 | 
 9 | It works on all modern desktop browsers. Media queries are written Mobile First. IE8 doesn't support media queries, so the css3-mediaqueries.js polyfill is temporarily included. 
10 | 
11 | See [www.fluidsquares.com](http://www.fluidsquares.com) for more.
12 | 
13 | ## What problem does Fluid Squares fix?
14 | 
15 | Without a fix, the result of reducing a browser window's width squashes a fluid grid's squares into rectangles.
16 | 
17 | To fix this each unit's padding-bottom size is set to match its width in percentages. On top of that each unit is a percentage of the global container to determine how many columns there are.
18 | 
19 | Setting a unit's width to 25% and padding-bottom to 25% will give you four units in a row that will remain square regardless of screen size or browser window resizing.
20 | 
21 | ## The ingredients
22 | 
23 | ### HTML
24 | 
25 | The basic structure of each unit is a div for content, which is nested in an anchor element:
26 | 
27 | ````
28 | <a href="url">
29 | <div>content</div>
30 | </a>
31 | ````
32 | 
33 | If you don't want the entire unit to be a link, a class has been created for that purpose. Just remove the anchor element and add class="category" to the div instead.
34 | 
35 | ````
36 | <div class="category">content</div>
37 | ````
38 | 
39 | ### CSS
40 | 
41 | Media queries control the number of columns displayed (1, 2, 3, and 4) on browser resize, as well as providing fine control over font sizes.
42 | 
43 | It includes a cut down CSS reset to suit this bare bones grid. Replace with a fresh [Reset](http://meyerweb.com/eric/tools/css/reset/) or [Normalize](http://necolas.github.io/normalize.css/) and customise to suit your own needs.
44 | 
45 | ### No wrapper?
46 | 
47 | It uses the body tag as a wrapper, but would certainly work within a standard div wrapper or HTML5 block elements.


--------------------------------------------------------------------------------
/css/screen.css:
--------------------------------------------------------------------------------
  1 | /*	Authors		Craig Rozynski craigrozynski.com
  2 | 							Marco Lago marcolago.com
  3 | 		Version		2.0 2015-02-02 */
  4 | 
  5 | /* CSS Reset (customised) */
  6 | 
  7 | html, body, div, span, h1, h2, h3, h4, h5, h6, p, em, img, small, strong {
  8 | 	margin: 0;
  9 | 	padding: 0;
 10 | 	border: 0;
 11 | 	font: inherit;
 12 | 	vertical-align: baseline;
 13 | }
 14 | body { display: block; }
 15 | html { overflow-y: scroll; }
 16 | a:hover, a:active { outline: none; }
 17 | small { font-size: 85%; }
 18 | strong, th { font-weight: bold; }
 19 | ::-moz-selection{ background: #3b7cbf; color: #fff; text-shadow: none; }
 20 | ::selection { background: #3b7cbf; color: #fff; text-shadow: none; }
 21 | a:link { -webkit-tap-highlight-color: #3b7cbf; }
 22 | .ie7 img { -ms-interpolation-mode: bicubic; }
 23 | h1, h2, h3, h4, h5, h6 { font-weight: 700; }
 24 | 
 25 | /* Primary Styles */
 26 |   
 27 | body {
 28 | 	padding: 10px;
 29 | 	font: 1em "HelveticaNeue", "Helvetica Neue", Helvetica, Arial sans-serif;
 30 | 	font-weight: 300;
 31 | 	color: #515047;
 32 | 	background-color: #F2F1DB;
 33 | }
 34 | a, a:link, a:visited, a:active, .title, .category {
 35 | 	float: left;
 36 | 	width: 100%;
 37 | 	height: auto;
 38 | 	margin-bottom: 30px;
 39 | 	text-decoration: none;
 40 | }
 41 | h1, h2, h3 { 
 42 | 	font-size: 3em;
 43 | 	font-weight: 700;
 44 | }
 45 | h1 {
 46 | 	color: #515047;
 47 | 	line-height: 0.8;
 48 | 	letter-spacing: -0.05em;
 49 | }
 50 | h2 {
 51 | 	color: #d4d3c0;
 52 | 	line-height: 0.9;
 53 | 	letter-spacing: -0.05em;
 54 | }
 55 | h3 {
 56 | 	color: #3b7cbf;
 57 | 	line-height: 0.9;
 58 | 	letter-spacing: -0.05em;
 59 | }
 60 | p {
 61 | 	font-size: 1.25em; 
 62 | 	line-height: 1.15;
 63 | 	margin: 0.75em 0;
 64 | 	color: #b9b8a4;
 65 | }
 66 | small {
 67 | 	font-size: 1em; 
 68 | 	color: #3b7cbf;
 69 | }
 70 | img { max-width: 100%; }
 71 | 
 72 | /* Media Queries */
 73 | 
 74 | /* Column Control Media Queries */
 75 | 
 76 | @media screen and (min-width:500px) {
 77 | 	body {
 78 | 		max-width: 1600px;
 79 | 		margin: 0 auto;
 80 | 		padding: 40px;
 81 | 		overflow: hidden;
 82 | 	}
 83 | 	a {
 84 | 		-webkit-transition: background-color .3s linear;
 85 | 		-moz-transition: -color .3s linear;
 86 | 		transition: background-color .3s linear;
 87 | 	}
 88 | 	a:hover { background-color: #e5e4cf; }
 89 | 	a.title { background-color: #f2f1db; }
 90 | 	a, a:link, a:visited, a:active, .title, .category {
 91 | 		position: relative;
 92 | 		top: 0;
 93 | 		overflow: hidden;
 94 | 	}
 95 | 	div, h2 { position: absolute; }
 96 | }
 97 | 
 98 | /* Two Column */
 99 | 
100 | @media screen and (min-width:500px) {
101 | 	a, a:link, a:visited, a:hover, a:active, .title, .category {
102 | 		width: 47%;
103 | 		margin: 0 3% 20px 0;
104 | 		padding-bottom: 47%;
105 | 	}
106 | }
107 | 
108 | /* Three Column */
109 | 
110 | @media screen and (min-width:800px) {
111 | 	.title, .category, a, a:link, a:visited, a:hover, a:active {
112 | 		width: 31%;
113 | 		margin: 0 2% 20px 0;
114 | 		padding-bottom: 31%;
115 | 	}
116 | }
117 | 
118 | /* Four Column */
119 | 
120 | @media screen and (min-width:1200px) {
121 | 	.title, .category, a, a:link, a:visited, a:hover, a:active {
122 | 		width: 23%;
123 | 		margin: 20px 2% 0 0;
124 | 		padding-bottom: 23%;
125 | 	}
126 | }
127 | 
128 | /* Font Size Control Media Queries */
129 | 
130 | @media screen and (min-width:500px) {
131 | 	h1, h2, h3 { font-size: 2em; }
132 | 	p { font-size: 1em; line-height: 1.2; }
133 | }
134 | @media screen and (min-width:600px) {
135 | 	h1, h2, h3 { font-size: 2.5em; }
136 | }
137 | @media screen and (min-width:700px) {
138 | 	h1, h2, h3 { font-size: 3em; }
139 | 	p { font-size: 1.25em; }
140 | }
141 | @media screen and (min-width:800px) {
142 | 	h1, h2, h3 { font-size: 2.5em; }
143 | 	p { font-size: 1em; }
144 | }
145 | @media screen and (min-width:1000px) {
146 | 	h1, h2, h3 { font-size: 3.25em; }
147 | 	p { font-size: 1.25em; }
148 | }
149 | @media screen and (min-width:1200px) {
150 | 	p { font-size: 1em; }
151 | }
152 | @media screen and (min-width:1400px) {
153 | 	p { font-size: 1.25em; }
154 | }
155 | @media screen and (min-width:1600px) {
156 | 	h1, h2, h3 { font-size: 4em; }
157 | }
158 | 
159 | 


--------------------------------------------------------------------------------
/scripts/css3-mediaqueries.js:
--------------------------------------------------------------------------------
  1 | if(typeof Object.create!=="function"){
  2 | Object.create=function(o){
  3 | function F(){
  4 | };
  5 | F.prototype=o;
  6 | return new F();
  7 | };
  8 | }
  9 | var ua={toString:function(){
 10 | return navigator.userAgent;
 11 | },test:function(s){
 12 | return this.toString().toLowerCase().indexOf(s.toLowerCase())>-1;
 13 | }};
 14 | ua.version=(ua.toString().toLowerCase().match(/[\s\S]+(?:rv|it|ra|ie)[\/: ]([\d.]+)/)||[])[1];
 15 | ua.webkit=ua.test("webkit");
 16 | ua.gecko=ua.test("gecko")&&!ua.webkit;
 17 | ua.opera=ua.test("opera");
 18 | ua.ie=ua.test("msie")&&!ua.opera;
 19 | ua.ie6=ua.ie&&document.compatMode&&typeof document.documentElement.style.maxHeight==="undefined";
 20 | ua.ie7=ua.ie&&document.documentElement&&typeof document.documentElement.style.maxHeight!=="undefined"&&typeof XDomainRequest==="undefined";
 21 | ua.ie8=ua.ie&&typeof XDomainRequest!=="undefined";
 22 | var domReady=function(){
 23 | var _1=[];
 24 | var _2=function(){
 25 | if(!arguments.callee.done){
 26 | arguments.callee.done=true;
 27 | for(var i=0;i<_1.length;i++){
 28 | _1[i]();
 29 | }
 30 | }
 31 | };
 32 | if(document.addEventListener){
 33 | document.addEventListener("DOMContentLoaded",_2,false);
 34 | }
 35 | if(ua.ie){
 36 | (function(){
 37 | try{
 38 | document.documentElement.doScroll("left");
 39 | }
 40 | catch(e){
 41 | setTimeout(arguments.callee,50);
 42 | return;
 43 | }
 44 | _2();
 45 | })();
 46 | document.onreadystatechange=function(){
 47 | if(document.readyState==="complete"){
 48 | document.onreadystatechange=null;
 49 | _2();
 50 | }
 51 | };
 52 | }
 53 | if(ua.webkit&&document.readyState){
 54 | (function(){
 55 | if(document.readyState!=="loading"){
 56 | _2();
 57 | }else{
 58 | setTimeout(arguments.callee,10);
 59 | }
 60 | })();
 61 | }
 62 | window.onload=_2;
 63 | return function(fn){
 64 | if(typeof fn==="function"){
 65 | _1[_1.length]=fn;
 66 | }
 67 | return fn;
 68 | };
 69 | }();
 70 | var cssHelper=function(){
 71 | var _3={BLOCKS:/[^\s{][^{]*\{(?:[^{}]*\{[^{}]*\}[^{}]*|[^{}]*)*\}/g,BLOCKS_INSIDE:/[^\s{][^{]*\{[^{}]*\}/g,DECLARATIONS:/[a-zA-Z\-]+[^;]*:[^;]+;/g,RELATIVE_URLS:/url\(['"]?([^\/\)'"][^:\)'"]+)['"]?\)/g,REDUNDANT_COMPONENTS:/(?:\/\*([^*\\\\]|\*(?!\/))+\*\/|@import[^;]+;)/g,REDUNDANT_WHITESPACE:/\s*(,|:|;|\{|\})\s*/g,MORE_WHITESPACE:/\s{2,}/g,FINAL_SEMICOLONS:/;\}/g,NOT_WHITESPACE:/\S+/g};
 72 | var _4,_5=false;
 73 | var _6=[];
 74 | var _7=function(fn){
 75 | if(typeof fn==="function"){
 76 | _6[_6.length]=fn;
 77 | }
 78 | };
 79 | var _8=function(){
 80 | for(var i=0;i<_6.length;i++){
 81 | _6[i](_4);
 82 | }
 83 | };
 84 | var _9={};
 85 | var _a=function(n,v){
 86 | if(_9[n]){
 87 | var _b=_9[n].listeners;
 88 | if(_b){
 89 | for(var i=0;i<_b.length;i++){
 90 | _b[i](v);
 91 | }
 92 | }
 93 | }
 94 | };
 95 | var _c=function(_d,_e,_f){
 96 | if(ua.ie&&!window.XMLHttpRequest){
 97 | window.XMLHttpRequest=function(){
 98 | return new ActiveXObject("Microsoft.XMLHTTP");
 99 | };
100 | }
101 | if(!XMLHttpRequest){
102 | return "";
103 | }
104 | var r=new XMLHttpRequest();
105 | try{
106 | r.open("get",_d,true);
107 | r.setRequestHeader("X_REQUESTED_WITH","XMLHttpRequest");
108 | }
109 | catch(e){
110 | _f();
111 | return;
112 | }
113 | var _10=false;
114 | setTimeout(function(){
115 | _10=true;
116 | },5000);
117 | document.documentElement.style.cursor="progress";
118 | r.onreadystatechange=function(){
119 | if(r.readyState===4&&!_10){
120 | if(!r.status&&location.protocol==="file:"||(r.status>=200&&r.status<300)||r.status===304||navigator.userAgent.indexOf("Safari")>-1&&typeof r.status==="undefined"){
121 | _e(r.responseText);
122 | }else{
123 | _f();
124 | }
125 | document.documentElement.style.cursor="";
126 | r=null;
127 | }
128 | };
129 | r.send("");
130 | };
131 | var _11=function(_12){
132 | _12=_12.replace(_3.REDUNDANT_COMPONENTS,"");
133 | _12=_12.replace(_3.REDUNDANT_WHITESPACE,"$1");
134 | _12=_12.replace(_3.MORE_WHITESPACE," ");
135 | _12=_12.replace(_3.FINAL_SEMICOLONS,"}");
136 | return _12;
137 | };
138 | var _13={mediaQueryList:function(s){
139 | var o={};
140 | var idx=s.indexOf("{");
141 | var lt=s.substring(0,idx);
142 | s=s.substring(idx+1,s.length-1);
143 | var mqs=[],rs=[];
144 | var qts=lt.toLowerCase().substring(7).split(",");
145 | for(var i=0;i<qts.length;i++){
146 | mqs[mqs.length]=_13.mediaQuery(qts[i],o);
147 | }
148 | var rts=s.match(_3.BLOCKS_INSIDE);
149 | if(rts!==null){
150 | for(i=0;i<rts.length;i++){
151 | rs[rs.length]=_13.rule(rts[i],o);
152 | }
153 | }
154 | o.getMediaQueries=function(){
155 | return mqs;
156 | };
157 | o.getRules=function(){
158 | return rs;
159 | };
160 | o.getListText=function(){
161 | return lt;
162 | };
163 | o.getCssText=function(){
164 | return s;
165 | };
166 | return o;
167 | },mediaQuery:function(s,mql){
168 | s=s||"";
169 | var not=false,_14;
170 | var exp=[];
171 | var _15=true;
172 | var _16=s.match(_3.NOT_WHITESPACE);
173 | for(var i=0;i<_16.length;i++){
174 | var _17=_16[i];
175 | if(!_14&&(_17==="not"||_17==="only")){
176 | if(_17==="not"){
177 | not=true;
178 | }
179 | }else{
180 | if(!_14){
181 | _14=_17;
182 | }else{
183 | if(_17.charAt(0)==="("){
184 | var _18=_17.substring(1,_17.length-1).split(":");
185 | exp[exp.length]={mediaFeature:_18[0],value:_18[1]||null};
186 | }
187 | }
188 | }
189 | }
190 | return {getList:function(){
191 | return mql||null;
192 | },getValid:function(){
193 | return _15;
194 | },getNot:function(){
195 | return not;
196 | },getMediaType:function(){
197 | return _14;
198 | },getExpressions:function(){
199 | return exp;
200 | }};
201 | },rule:function(s,mql){
202 | var o={};
203 | var idx=s.indexOf("{");
204 | var st=s.substring(0,idx);
205 | var ss=st.split(",");
206 | var ds=[];
207 | var dts=s.substring(idx+1,s.length-1).split(";");
208 | for(var i=0;i<dts.length;i++){
209 | ds[ds.length]=_13.declaration(dts[i],o);
210 | }
211 | o.getMediaQueryList=function(){
212 | return mql||null;
213 | };
214 | o.getSelectors=function(){
215 | return ss;
216 | };
217 | o.getSelectorText=function(){
218 | return st;
219 | };
220 | o.getDeclarations=function(){
221 | return ds;
222 | };
223 | o.getPropertyValue=function(n){
224 | for(var i=0;i<ds.length;i++){
225 | if(ds[i].getProperty()===n){
226 | return ds[i].getValue();
227 | }
228 | }
229 | return null;
230 | };
231 | return o;
232 | },declaration:function(s,r){
233 | var idx=s.indexOf(":");
234 | var p=s.substring(0,idx);
235 | var v=s.substring(idx+1);
236 | return {getRule:function(){
237 | return r||null;
238 | },getProperty:function(){
239 | return p;
240 | },getValue:function(){
241 | return v;
242 | }};
243 | }};
244 | var _19=function(el){
245 | if(typeof el.cssHelperText!=="string"){
246 | return;
247 | }
248 | var o={mediaQueryLists:[],rules:[],selectors:{},declarations:[],properties:{}};
249 | var _1a=o.mediaQueryLists;
250 | var ors=o.rules;
251 | var _1b=el.cssHelperText.match(_3.BLOCKS);
252 | if(_1b!==null){
253 | for(var i=0;i<_1b.length;i++){
254 | if(_1b[i].substring(0,7)==="@media "){
255 | _1a[_1a.length]=_13.mediaQueryList(_1b[i]);
256 | ors=o.rules=ors.concat(_1a[_1a.length-1].getRules());
257 | }else{
258 | ors[ors.length]=_13.rule(_1b[i]);
259 | }
260 | }
261 | }
262 | var oss=o.selectors;
263 | var _1c=function(r){
264 | var ss=r.getSelectors();
265 | for(var i=0;i<ss.length;i++){
266 | var n=ss[i];
267 | if(!oss[n]){
268 | oss[n]=[];
269 | }
270 | oss[n][oss[n].length]=r;
271 | }
272 | };
273 | for(i=0;i<ors.length;i++){
274 | _1c(ors[i]);
275 | }
276 | var ods=o.declarations;
277 | for(i=0;i<ors.length;i++){
278 | ods=o.declarations=ods.concat(ors[i].getDeclarations());
279 | }
280 | var ops=o.properties;
281 | for(i=0;i<ods.length;i++){
282 | var n=ods[i].getProperty();
283 | if(!ops[n]){
284 | ops[n]=[];
285 | }
286 | ops[n][ops[n].length]=ods[i];
287 | }
288 | el.cssHelperParsed=o;
289 | _4[_4.length]=el;
290 | return o;
291 | };
292 | var _1d=function(el,s){
293 | el.cssHelperText=_11(s||el.innerHTML);
294 | return _19(el);
295 | };
296 | var _1e=function(){
297 | _5=true;
298 | _4=[];
299 | var _1f=[];
300 | var _20=function(){
301 | for(var i=0;i<_1f.length;i++){
302 | _19(_1f[i]);
303 | }
304 | var _21=document.getElementsByTagName("style");
305 | for(i=0;i<_21.length;i++){
306 | _1d(_21[i]);
307 | }
308 | _5=false;
309 | _8();
310 | };
311 | var _22=document.getElementsByTagName("link");
312 | for(var i=0;i<_22.length;i++){
313 | var _23=_22[i];
314 | if(_23.getAttribute("rel").indexOf("style")>-1&&_23.href&&_23.href.length!==0&&!_23.disabled){
315 | _1f[_1f.length]=_23;
316 | }
317 | }
318 | if(_1f.length>0){
319 | var c=0;
320 | var _24=function(){
321 | c++;
322 | if(c===_1f.length){
323 | _20();
324 | }
325 | };
326 | var _25=function(_26){
327 | var _27=_26.href;
328 | _c(_27,function(_28){
329 | _28=_11(_28).replace(_3.RELATIVE_URLS,"url("+_27.substring(0,_27.lastIndexOf("/"))+"/$1)");
330 | _26.cssHelperText=_28;
331 | _24();
332 | },_24);
333 | };
334 | for(i=0;i<_1f.length;i++){
335 | _25(_1f[i]);
336 | }
337 | }else{
338 | _20();
339 | }
340 | };
341 | var _29={mediaQueryLists:"array",rules:"array",selectors:"object",declarations:"array",properties:"object"};
342 | var _2a={mediaQueryLists:null,rules:null,selectors:null,declarations:null,properties:null};
343 | var _2b=function(_2c,v){
344 | if(_2a[_2c]!==null){
345 | if(_29[_2c]==="array"){
346 | return (_2a[_2c]=_2a[_2c].concat(v));
347 | }else{
348 | var c=_2a[_2c];
349 | for(var n in v){
350 | if(v.hasOwnProperty(n)){
351 | if(!c[n]){
352 | c[n]=v[n];
353 | }else{
354 | c[n]=c[n].concat(v[n]);
355 | }
356 | }
357 | }
358 | return c;
359 | }
360 | }
361 | };
362 | var _2d=function(_2e){
363 | _2a[_2e]=(_29[_2e]==="array")?[]:{};
364 | for(var i=0;i<_4.length;i++){
365 | _2b(_2e,_4[i].cssHelperParsed[_2e]);
366 | }
367 | return _2a[_2e];
368 | };
369 | domReady(function(){
370 | var els=document.body.getElementsByTagName("*");
371 | for(var i=0;i<els.length;i++){
372 | els[i].checkedByCssHelper=true;
373 | }
374 | if(document.implementation.hasFeature("MutationEvents","2.0")||window.MutationEvent){
375 | document.body.addEventListener("DOMNodeInserted",function(e){
376 | var el=e.target;
377 | if(el.nodeType===1){
378 | _a("DOMElementInserted",el);
379 | el.checkedByCssHelper=true;
380 | }
381 | },false);
382 | }else{
383 | setInterval(function(){
384 | var els=document.body.getElementsByTagName("*");
385 | for(var i=0;i<els.length;i++){
386 | if(!els[i].checkedByCssHelper){
387 | _a("DOMElementInserted",els[i]);
388 | els[i].checkedByCssHelper=true;
389 | }
390 | }
391 | },1000);
392 | }
393 | });
394 | var _2f=function(d){
395 | if(typeof window.innerWidth!="undefined"){
396 | return window["inner"+d];
397 | }else{
398 | if(typeof document.documentElement!="undefined"&&typeof document.documentElement.clientWidth!="undefined"&&document.documentElement.clientWidth!=0){
399 | return document.documentElement["client"+d];
400 | }
401 | }
402 | };
403 | return {addStyle:function(s,_30){
404 | var el=document.createElement("style");
405 | el.setAttribute("type","text/css");
406 | document.getElementsByTagName("head")[0].appendChild(el);
407 | if(el.styleSheet){
408 | el.styleSheet.cssText=s;
409 | }else{
410 | el.appendChild(document.createTextNode(s));
411 | }
412 | el.addedWithCssHelper=true;
413 | if(typeof _30==="undefined"||_30===true){
414 | cssHelper.parsed(function(_31){
415 | var o=_1d(el,s);
416 | for(var n in o){
417 | if(o.hasOwnProperty(n)){
418 | _2b(n,o[n]);
419 | }
420 | }
421 | _a("newStyleParsed",el);
422 | });
423 | }else{
424 | el.parsingDisallowed=true;
425 | }
426 | return el;
427 | },removeStyle:function(el){
428 | return el.parentNode.removeChild(el);
429 | },parsed:function(fn){
430 | if(_5){
431 | _7(fn);
432 | }else{
433 | if(typeof _4!=="undefined"){
434 | if(typeof fn==="function"){
435 | fn(_4);
436 | }
437 | }else{
438 | _7(fn);
439 | _1e();
440 | }
441 | }
442 | },mediaQueryLists:function(fn){
443 | cssHelper.parsed(function(_32){
444 | fn(_2a.mediaQueryLists||_2d("mediaQueryLists"));
445 | });
446 | },rules:function(fn){
447 | cssHelper.parsed(function(_33){
448 | fn(_2a.rules||_2d("rules"));
449 | });
450 | },selectors:function(fn){
451 | cssHelper.parsed(function(_34){
452 | fn(_2a.selectors||_2d("selectors"));
453 | });
454 | },declarations:function(fn){
455 | cssHelper.parsed(function(_35){
456 | fn(_2a.declarations||_2d("declarations"));
457 | });
458 | },properties:function(fn){
459 | cssHelper.parsed(function(_36){
460 | fn(_2a.properties||_2d("properties"));
461 | });
462 | },broadcast:_a,addListener:function(n,fn){
463 | if(typeof fn==="function"){
464 | if(!_9[n]){
465 | _9[n]={listeners:[]};
466 | }
467 | _9[n].listeners[_9[n].listeners.length]=fn;
468 | }
469 | },removeListener:function(n,fn){
470 | if(typeof fn==="function"&&_9[n]){
471 | var ls=_9[n].listeners;
472 | for(var i=0;i<ls.length;i++){
473 | if(ls[i]===fn){
474 | ls.splice(i,1);
475 | i-=1;
476 | }
477 | }
478 | }
479 | },getViewportWidth:function(){
480 | return _2f("Width");
481 | },getViewportHeight:function(){
482 | return _2f("Height");
483 | }};
484 | }();
485 | domReady(function enableCssMediaQueries(){
486 | var _37;
487 | var _38={LENGTH_UNIT:/[0-9]+(em|ex|px|in|cm|mm|pt|pc)$/,RESOLUTION_UNIT:/[0-9]+(dpi|dpcm)$/,ASPECT_RATIO:/^[0-9]+\/[0-9]+$/,ABSOLUTE_VALUE:/^[0-9]*(\.[0-9]+)*$/};
488 | var _39=[];
489 | var _3a=function(){
490 | var id="css3-mediaqueries-test";
491 | var el=document.createElement("div");
492 | el.id=id;
493 | var _3b=cssHelper.addStyle("@media all and (width) { #"+id+" { width: 1px !important; } }",false);
494 | document.body.appendChild(el);
495 | var ret=el.offsetWidth===1;
496 | _3b.parentNode.removeChild(_3b);
497 | el.parentNode.removeChild(el);
498 | _3a=function(){
499 | return ret;
500 | };
501 | return ret;
502 | };
503 | var _3c=function(){
504 | _37=document.createElement("div");
505 | _37.style.cssText="position:absolute;top:-9999em;left:-9999em;"+"margin:0;border:none;padding:0;width:1em;font-size:1em;";
506 | document.body.appendChild(_37);
507 | if(_37.offsetWidth!==16){
508 | _37.style.fontSize=16/_37.offsetWidth+"em";
509 | }
510 | _37.style.width="";
511 | };
512 | var _3d=function(_3e){
513 | _37.style.width=_3e;
514 | var _3f=_37.offsetWidth;
515 | _37.style.width="";
516 | return _3f;
517 | };
518 | var _40=function(_41,_42){
519 | var l=_41.length;
520 | var min=(_41.substring(0,4)==="min-");
521 | var max=(!min&&_41.substring(0,4)==="max-");
522 | if(_42!==null){
523 | var _43;
524 | var _44;
525 | if(_38.LENGTH_UNIT.exec(_42)){
526 | _43="length";
527 | _44=_3d(_42);
528 | }else{
529 | if(_38.RESOLUTION_UNIT.exec(_42)){
530 | _43="resolution";
531 | _44=parseInt(_42,10);
532 | var _45=_42.substring((_44+"").length);
533 | }else{
534 | if(_38.ASPECT_RATIO.exec(_42)){
535 | _43="aspect-ratio";
536 | _44=_42.split("/");
537 | }else{
538 | if(_38.ABSOLUTE_VALUE){
539 | _43="absolute";
540 | _44=_42;
541 | }else{
542 | _43="unknown";
543 | }
544 | }
545 | }
546 | }
547 | }
548 | var _46,_47;
549 | if("device-width"===_41.substring(l-12,l)){
550 | _46=screen.width;
551 | if(_42!==null){
552 | if(_43==="length"){
553 | return ((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44));
554 | }else{
555 | return false;
556 | }
557 | }else{
558 | return _46>0;
559 | }
560 | }else{
561 | if("device-height"===_41.substring(l-13,l)){
562 | _47=screen.height;
563 | if(_42!==null){
564 | if(_43==="length"){
565 | return ((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44));
566 | }else{
567 | return false;
568 | }
569 | }else{
570 | return _47>0;
571 | }
572 | }else{
573 | if("width"===_41.substring(l-5,l)){
574 | _46=document.documentElement.clientWidth||document.body.clientWidth;
575 | if(_42!==null){
576 | if(_43==="length"){
577 | return ((min&&_46>=_44)||(max&&_46<_44)||(!min&&!max&&_46===_44));
578 | }else{
579 | return false;
580 | }
581 | }else{
582 | return _46>0;
583 | }
584 | }else{
585 | if("height"===_41.substring(l-6,l)){
586 | _47=document.documentElement.clientHeight||document.body.clientHeight;
587 | if(_42!==null){
588 | if(_43==="length"){
589 | return ((min&&_47>=_44)||(max&&_47<_44)||(!min&&!max&&_47===_44));
590 | }else{
591 | return false;
592 | }
593 | }else{
594 | return _47>0;
595 | }
596 | }else{
597 | if("device-aspect-ratio"===_41.substring(l-19,l)){
598 | return _43==="aspect-ratio"&&screen.width*_44[1]===screen.height*_44[0];
599 | }else{
600 | if("color-index"===_41.substring(l-11,l)){
601 | var _48=Math.pow(2,screen.colorDepth);
602 | if(_42!==null){
603 | if(_43==="absolute"){
604 | return ((min&&_48>=_44)||(max&&_48<_44)||(!min&&!max&&_48===_44));
605 | }else{
606 | return false;
607 | }
608 | }else{
609 | return _48>0;
610 | }
611 | }else{
612 | if("color"===_41.substring(l-5,l)){
613 | var _49=screen.colorDepth;
614 | if(_42!==null){
615 | if(_43==="absolute"){
616 | return ((min&&_49>=_44)||(max&&_49<_44)||(!min&&!max&&_49===_44));
617 | }else{
618 | return false;
619 | }
620 | }else{
621 | return _49>0;
622 | }
623 | }else{
624 | if("resolution"===_41.substring(l-10,l)){
625 | var res;
626 | if(_45==="dpcm"){
627 | res=_3d("1cm");
628 | }else{
629 | res=_3d("1in");
630 | }
631 | if(_42!==null){
632 | if(_43==="resolution"){
633 | return ((min&&res>=_44)||(max&&res<_44)||(!min&&!max&&res===_44));
634 | }else{
635 | return false;
636 | }
637 | }else{
638 | return res>0;
639 | }
640 | }else{
641 | return false;
642 | }
643 | }
644 | }
645 | }
646 | }
647 | }
648 | }
649 | }
650 | };
651 | var _4a=function(mq){
652 | var _4b=mq.getValid();
653 | var _4c=mq.getExpressions();
654 | var l=_4c.length;
655 | if(l>0){
656 | for(var i=0;i<l&&_4b;i++){
657 | _4b=_40(_4c[i].mediaFeature,_4c[i].value);
658 | }
659 | var not=mq.getNot();
660 | return (_4b&&!not||not&&!_4b);
661 | }
662 | };
663 | var _4d=function(mql){
664 | var mqs=mql.getMediaQueries();
665 | var t={};
666 | for(var i=0;i<mqs.length;i++){
667 | if(_4a(mqs[i])){
668 | t[mqs[i].getMediaType()]=true;
669 | }
670 | }
671 | var s=[],c=0;
672 | for(var n in t){
673 | if(t.hasOwnProperty(n)){
674 | if(c>0){
675 | s[c++]=",";
676 | }
677 | s[c++]=n;
678 | }
679 | }
680 | if(s.length>0){
681 | _39[_39.length]=cssHelper.addStyle("@media "+s.join("")+"{"+mql.getCssText()+"}",false);
682 | }
683 | };
684 | var _4e=function(_4f){
685 | for(var i=0;i<_4f.length;i++){
686 | _4d(_4f[i]);
687 | }
688 | if(ua.ie){
689 | document.documentElement.style.display="block";
690 | setTimeout(function(){
691 | document.documentElement.style.display="";
692 | },0);
693 | setTimeout(function(){
694 | cssHelper.broadcast("cssMediaQueriesTested");
695 | },100);
696 | }else{
697 | cssHelper.broadcast("cssMediaQueriesTested");
698 | }
699 | };
700 | var _50=function(){
701 | for(var i=0;i<_39.length;i++){
702 | cssHelper.removeStyle(_39[i]);
703 | }
704 | _39=[];
705 | cssHelper.mediaQueryLists(_4e);
706 | };
707 | var _51=0;
708 | var _52=function(){
709 | var _53=cssHelper.getViewportWidth();
710 | var _54=cssHelper.getViewportHeight();
711 | if(ua.ie){
712 | var el=document.createElement("div");
713 | el.style.position="absolute";
714 | el.style.top="-9999em";
715 | el.style.overflow="scroll";
716 | document.body.appendChild(el);
717 | _51=el.offsetWidth-el.clientWidth;
718 | document.body.removeChild(el);
719 | }
720 | var _55;
721 | var _56=function(){
722 | var vpw=cssHelper.getViewportWidth();
723 | var vph=cssHelper.getViewportHeight();
724 | if(Math.abs(vpw-_53)>_51||Math.abs(vph-_54)>_51){
725 | _53=vpw;
726 | _54=vph;
727 | clearTimeout(_55);
728 | _55=setTimeout(function(){
729 | if(!_3a()){
730 | _50();
731 | }else{
732 | cssHelper.broadcast("cssMediaQueriesTested");
733 | }
734 | },500);
735 | }
736 | };
737 | window.onresize=function(){
738 | var x=window.onresize||function(){
739 | };
740 | return function(){
741 | x();
742 | _56();
743 | };
744 | }();
745 | };
746 | var _57=document.documentElement;
747 | _57.style.marginLeft="-32767px";
748 | setTimeout(function(){
749 | _57.style.marginTop="";
750 | },20000);
751 | return function(){
752 | if(!_3a()){
753 | cssHelper.addListener("newStyleParsed",function(el){
754 | _4e(el.cssHelperParsed.mediaQueryLists);
755 | });
756 | cssHelper.addListener("cssMediaQueriesTested",function(){
757 | if(ua.ie){
758 | _57.style.width="1px";
759 | }
760 | setTimeout(function(){
761 | _57.style.width="";
762 | _57.style.marginLeft="";
763 | },0);
764 | cssHelper.removeListener("cssMediaQueriesTested",arguments.callee);
765 | });
766 | _3c();
767 | _50();
768 | }else{
769 | _57.style.marginLeft="";
770 | }
771 | _52();
772 | };
773 | }());
774 | try{
775 | document.execCommand("BackgroundImageCache",false,true);
776 | }
777 | catch(e){
778 | }
779 | 
780 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html> 
  2 | <html lang="en"> 
  3 | <head> 
  4 | <title>Fluid Squares v2. A responsive grid experiment.</title> 
  5 | <meta charset="utf-8"> 
  6 | <meta name="viewport" content="initial-scale=1">
  7 | <link rel="stylesheet" href="css/screen.css?v=2"> 
  8 | </head> 
  9 | <body> 
 10 | 
 11 | <a href="https://github.com/crozynski/Fluid-Squares" class="title"> 
 12 | <div> 
 13 | <h1>Fluid Squares</h1> 
 14 | <p>Fluid Squares preserves a unit's square proportion within a fluid layout. Number of columns also reduce to suit browser or device width using CSS media queries.</p> 
 15 | <small>More about Fluid Squares</small> 
 16 | </div> 
 17 | </a> 
 18 | 
 19 | <a href="http://absolide.tumblr.com/post/7317210512/full-css-fluid-squares/" class="title"> 
 20 | <div> 
 21 | <h1>V2</h1> 
 22 | <p>V1 used a transparent image with max-width:100%. Marco Lago stepped up with a clever CSS method that eliminates the need for images. This new version also uses css3-mediaqueries.js (now works in IE) and is Mobile First.</p>
 23 | <small>Marco Lago's CSS method</small>
 24 | </div> 
 25 | </a>
 26 |  
 27 | <div class="category"> 
 28 | <h2>HTML + <br>CSS + <br>JS = <br>HTML5</h2> 
 29 | </div> 
 30 |  
 31 | <!-- How this works
 32 | <body> is the wrapper
 33 | <a href=""> is your unit container, set the padding-bottom same as width to preserve the square
 34 | <div> positions a unit's content inside the square
 35 | <h3>Title</h3>
 36 | <p>Words</p>
 37 | <small>Small words</small>
 38 | </div>
 39 | </a>
 40 | Rinse and repeat
 41 | </body>
 42 | --> 
 43 |  
 44 | <a href="http://diveintohtml5.ep.io/"> 
 45 | <div> 
 46 | <h3>Dive into HTML5</h3> 
 47 | <p>Dive Into HTML5 seeks to elaborate on a hand-picked Selection of features from the HTML5 specification and other fine Standards. The final manuscript has been published...</p> 
 48 | <small>diveintohtml5.ep.io/</small> 
 49 | </div> 
 50 | </a> 
 51 |  
 52 | <a href="http://html5rocks.com"> 
 53 | <div> 
 54 | <h3>HTML5 Rocks</h3> 
 55 | <p>Watch the sldeshow that let's you play with HTML5 features. Jump headfirst into HTML5 by experimenting with each API. A showroom of content that you can reuse...</p> 
 56 | <small>html5rocks.com</small> 
 57 | </div> 
 58 | </a> 
 59 | 
 60 | <a href="http://html5rocks.com"> 
 61 | <div> 
 62 | <img src="http://fluidsquares.com/img/html5rocks.png" />
 63 | </div> 
 64 | </a> 
 65 |  
 66 | <a href="http://www.whatwg.org/specs/web-apps/current-work/multipage/"> 
 67 | <div> 
 68 | <h3>WHATWG HTML Living Standard</h3> 
 69 | <p>This specification evolves HTML and its related APIs to ease the authoring of Web-based applications...</p> 
 70 | <small>whatwg.org</small> 
 71 | </div> 
 72 | </a> 
 73 |  
 74 | <a href="http://developers.whatwg.org/"> 
 75 | <div> 
 76 | <h3>HTML5 Spec for Web Devs</h3> 
 77 | <p>This HTML5 specification is like no other—It has been processed with you, the humble web developer, in mind...</p> 
 78 | <small>developers.whatwg.org</small> 
 79 | </div> 
 80 | </a> 
 81 |  
 82 | <a href="http://html5.org/"> 
 83 | <div> 
 84 | <h3>HTML5.org</h3> 
 85 | <p>HTML5 differences from HTML4.<br> WHATWG and HTML5 FAQ.<br> HTML5 validator.<br> HTML5 (changes) tracker...</p> 
 86 | <small>html5.org</small> 
 87 | </div> 
 88 | </a> 
 89 |  
 90 | <a href="http://remysharp.com/2009/01/07/html5-enabling-script"> 
 91 | <div> 
 92 | <h3>HTML5 Shiv</h3> 
 93 | <p>Since HTML5 is getting more attention by way of marking up our new pages, and the only way to get IE to acknowledge the new elements...</p> 
 94 | <small>remysharp.com</small> 
 95 | </div> 
 96 | </a> 
 97 |  
 98 | <a href="http://modernizr.com"> 
 99 | <div> 
100 | <h3>Modernizr</h3> 
101 | <p>Modernizr adds classes to the &lt;html&gt; element which allow you to target specific browser functionality in your stylesheet. You don't actually need to write any Javascript to use it...</p> 
102 | <small>modernizr.com</small> 
103 | </div> 
104 | </a> 
105 |  
106 | <a href="https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills"> 
107 | <div> 
108 | <h3>HTML5 Polyfills</h3> 
109 | <p>All the shims, fallbacks, and polyfills in order to implant html5 functionality in browsers that don't natively support them...</p> 
110 | <small>github.com/Modernizr</small> 
111 | </div> 
112 | </a> 
113 |  
114 | <a href="http://html5boilerplate.com"> 
115 | <div> 
116 | <h3>HTML5 Boilerplate</h3> 
117 | <p>Along with HTML5 Boilerplate's rock solid commitment to cross-browser consistency, H5BP brings you delicious documentation, a site optimizing build script...</p> 
118 | <small>html5boilerplate.com</small> 
119 | </div> 
120 | </a> 
121 |  
122 | <a href="http://html5reset.org/"> 
123 | <div> 
124 | <h3>HTML5 Reset</h3> 
125 | <p>Now that modern browsers are starting to support some of the really useful parts of HTML5 and CSS3, it's time for our best practices to catch up...</p> 
126 | <small>html5reset.org/</small> 
127 | </div> 
128 | </a> 
129 |  
130 | <a href="http://initializr.com"> 
131 | <div> 
132 | <h3>Initializr: Customise Boilerplate</h3> 
133 | <p>Initializr is an HTML5 templates generator to help you getting started with an HTML5 project. It is built on HTML5 Boilerplate...</p> 
134 | <small>initializr.com</small> 
135 | </div> 
136 | </a> 
137 |  
138 | <a href="http://camendesign.com/code/video_for_everybody"> 
139 | <div> 
140 | <h3>Video for Everybody</h3> 
141 | <p>Video for Everybody is simply a chunk of HTML code that embeds a video into a website using the HTML5 &lt;video&gt; element, falling back to Flash automatically...</p> 
142 | <small>camendesign.com</small> 
143 | </div> 
144 | </a> 
145 |  
146 | <a href="http://html5test.com"> 
147 | <div> 
148 | <h3>HTML5 Browser Test</h3> 
149 | <p>The HTML5 test score is only an indication of how well your browser supports the upcoming HTML5 standard and related specifications. It does not try to test all...</p> 
150 | <small>html5test.com</small> 
151 | </div> 
152 | </a> 
153 |  
154 | <a href="http://hsivonen.iki.fi/doctype"> 
155 | <div> 
156 | <h3>Activating Browser Modes with Doctype</h3> 
157 | <p>In order to deal both with content written according to Web standards...</p> 
158 | <small>hsivonen.iki.fi</small> 
159 | </div> 
160 | </a> 
161 |  
162 | <a href="http://software.hixie.ch/utilities/js/live-dom-viewer"> 
163 | <div> 
164 | <h3>Live DOM Viewer</h3> 
165 | <p>Markup to test. DOM view. Rendered view. innerHTML view. Log.</p> 
166 | <small>software.hixie.ch</small> 
167 | </div> 
168 | </a> 
169 |  
170 | <a href="http://camendesign.com/code/developpeurs_sans_frontieres"> 
171 | <div> 
172 | <h3>Centre your page without a wrapper</h3> 
173 | <p>The number one suggestion I see from the proprietor of html5gallery.com to submitters is...</p> 
174 | <small>camendesign.com</small> 
175 | </div> 
176 | </a> 
177 |  
178 | <a href="http://pxtoem.com"> 
179 | <div> 
180 | <h3>Pixels, ems, percentages, points</h3> 
181 | <p>Pixel to em conversion made simple. Select your body font size. Voila! Your conversions. Oh la la! Custom conversions...</p> 
182 | <small>pxtoem.com</small> 
183 | </div> 
184 | </a> 
185 |  
186 | <a href="http://www.29digital.net/grid"> 
187 | <div> 
188 | <h3>Grid Calculator</h3> 
189 | <p>Change the settings (by dragging the sliders, clicking on the bars, or editing the values) to calculate the overall width of your grid...</p> 
190 | <small>www.29digital.net</small> 
191 | </div> 
192 | </a> 
193 |  
194 | <a href="http://code.google.com/chrome/devtools/docs/overview.html"> 
195 | <div> 
196 | <h3>Chrome Developer Tools</h3> 
197 | <p>The Developer Tools, bundled and available in Chrome, allows web developers and programmers deep access...</p> 
198 | <small>code.google.com/chrome</small> 
199 | </div> 
200 | </a> 
201 |  
202 | <a href="http://meyerweb.com/eric/thoughts/2011/01/03/reset-revisited/"> 
203 | <div> 
204 | <h3>Eric Revisits Reset</h3> 
205 | <p>It was close to four years ago now that I first floated (ha!), publicly refined, and then published at its own home what’s become known as...</p> 
206 | <small>meyerweb.com</small> 
207 | </div> 
208 | </a> 
209 |  
210 | <a href="http://developer.yahoo.com/performance/rules.html#js_bottom"> 
211 | <div> 
212 | <h3>YUI Best Practices</h3> 
213 | <p>The Exceptional Performance team has identified a number of best practices for making web pages fast. The list includes 35 best practices...</p> 
214 | <small>developer.yahoo.com</small> 
215 | </div> 
216 | </a> 
217 |  
218 | <a href="http://na.isobar.com/standards"> 
219 | <div> 
220 | <h3>Isobar Code Standards</h3> 
221 | <p>This document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America...</p> 
222 | <small>na.isobar.com/standards</small> 
223 | </div> 
224 | </a> 
225 |  
226 | <a href="http://code.google.com/edu/introductory_courses.html"> 
227 | <div> 
228 | <h3>Google Code Uni</h3> 
229 | <p>Read. Learn. Build. $.</p> 
230 | <small>code.google.com/edu</small> 
231 | </div> 
232 | </a> 
233 |  
234 | <div class="category"> 
235 |  
236 | <h2>CSS</h2> 
237 | </div> 
238 |  
239 | <a href="http://css3please.com"> 
240 | <div> 
241 | <h3>CSS3, Please!</h3> 
242 | <p>The Cross-Browser CSS3 Rule Generator. You can edit the underlined values in this css file, but don't worry about making sure the corresponding values match...</p> 
243 | <small>css3please.com</small> 
244 | </div> 
245 | </a> 
246 |  
247 | <a href="http://css3generator.com"> 
248 | <div> 
249 | <h3>CSS3 Generator</h3> 
250 | <p>Another nice way to play with CSS3.</p> 
251 | <small>css3generator.com</small> 
252 | </div> 
253 | </a> 
254 |  
255 | <a href="http://css3maker.com"> 
256 | <div> 
257 | <h3>CSS3 Maker</h3> 
258 | <p>Another nice way to play with CSS3.</p> 
259 | <small>css3maker.com</small> 
260 | </div> 
261 | </a> 
262 |  
263 | <a href="http://www.smashingmagazine.com/2011/02/16/css-useful-coding-techniques-and-design-solutions"> 
264 | <div> 
265 | <h3>CSS Gimmicks</h3> 
266 | <p>Although CSS isn’t that difficult, useful CSS techniques are not easy to find. Sometimes finding a cross-browser solution might take time...</p> 
267 | <small>smashingmagazine.com</small> 
268 | </div> 
269 | </a> 
270 |  
271 | <a href="http://matthewlein.com/ceaser"> 
272 | <div> 
273 | <h3>Ceaser</h3> 
274 | <p>CSS easing animation tool. Choose an easing type and test it out with a few effects. If you don’t quite like the easing, grab a handle and fix it...</p> 
275 | <small>matthewlein.com/ceaser</small> 
276 | </div> 
277 | </a> 
278 |  
279 | <a href="http://paulirish.com/2009/browser-specific-css-hacks"> 
280 | <div> 
281 | <h3>Browser CSS Hacks</h3> 
282 | <p>I don't use CSS hacks anymore. Instead I use IE's conditional comments to apply classes to the body tag. Nonetheless, I wanted to document every browser-specific...</p> 
283 | <small>paulirish.com</small> 
284 | </div> 
285 | </a> 
286 |  
287 | <a href="http://css-tricks.com/efficiently-rendering-css/"> 
288 | <div> 
289 | <h3>Efficiently Rendering CSS</h3> 
290 | <p>I admittedly don't think about this idea very often... how efficient is the CSS that we write, in terms of how quickly the browser can render it?</p> 
291 | <small>css-tricks.com</small> 
292 | </div> 
293 | </a> 
294 |  
295 | <a href="http://blog.mozilla.com/webdev/2009/03/27/css-spriting-tips"> 
296 | <div> 
297 | <h3>CSS Spriting Tips</h3> 
298 | <p>One of the most effective ways of speeding up a website’s render time is to reduce the number of HTTP requests required to fetch content. An effective method...</p> 
299 | <small>blog.mozilla.com</small> 
300 | </div> 
301 | </a> 
302 |  
303 | <a href="http://css3pie.com"> 
304 | <div> 
305 | <h3>CSS3 Pie</h3> 
306 | <p>PIE makes Internet Explorer 6-8 capable of rendering several of the most useful CSS3 decoration features.</p> 
307 | <small>css3pie.com</small> 
308 | </div> 
309 | </a> 
310 |  
311 | <a href="http://selectivizr.com"> 
312 | <div> 
313 | <h3>Selectivizr</h3> 
314 | <p>selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your...</p> 
315 | <small>selectivizr.com</small> 
316 | </div> 
317 | </a> 
318 |  
319 | <a href="http://css-infos.net/properties/webkit.php"> 
320 | <div> 
321 | <h3>Webkit CSS Properties</h3> 
322 | <p>Comprehensive list of -webkit properties.</p> 
323 | <small>css-infos.net</small> 
324 | </div> 
325 | </a> 
326 |  
327 | <a href="http://www.findmebyip.com/litmus/"> 
328 |  
329 | <div> 
330 | <h3>HTML5 &amp; CSS3 Browser Support</h3> 
331 | <p>CSS3 properties and selectors. HTML5 web applications, graphics, embedded content, audio and video, form inputs and attributes...</p> 
332 | <small>findmebyip.com/litmus</small> 
333 | </div> 
334 | </a> 
335 |  
336 | <div class="category"> 
337 |  
338 | <h2>JavaScript</h2> 
339 | </div> 
340 |  
341 | <a href="http://developer.yahoo.com/yui/theater/"> 
342 | <div> 
343 | <h3>Crockford on JavaScript</h3> 
344 | <p>Great collection of videos at YUI Theater, particularly from Douglas Crockford on Javascript.</p> 
345 | <small>developer.yahoo.com</small> 
346 | </div> 
347 | </a> 
348 |  
349 | <a href="http://nodejs.org/#about"> 
350 | <div> 
351 | <h3>node.js</h3> 
352 | <p>Node's goal is to provide an easy way to build scalable network programs. In the "hello world" web server example...</p> 
353 | <small>nodejs.org</small> 
354 | </div> 
355 | </a> 
356 |  
357 | <a href="http://raphaeljs.com/"> 
358 | <div> 
359 | <h3>raphael.js</h3> 
360 | <p>Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you...</p> 
361 | <small>raphaeljs.com</small> 
362 | </div> 
363 | </a> 
364 |  
365 | <a href="http://jsfiddle.net/"> 
366 | <div> 
367 | <h3>jsfiddle</h3> 
368 | <p>JsFiddle is a playground for web developers, a tool which may be used in many ways. One can use it as an online editor for snippets...</p> 
369 | <small>jsfiddle.net</small> 
370 | </div> 
371 | </a> 
372 |  
373 | <a href="http://jquery.com/"> 
374 | <div> 
375 | <h3>jQuery</h3> 
376 | <p>jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development...</p> 
377 | <small>jquery.com</small> 
378 | </div> 
379 | </a> 
380 |  
381 | <a href="http://jqueryfordesigners.com/"> 
382 |  
383 | <div> 
384 | <h3>jQuery for Designers</h3> 
385 | <p>Learn how easy it is to apply web interaction using jQuery...</p> 
386 | <small>jqueryfordesigners.com</small> 
387 | </div> 
388 | </a> 
389 |  
390 | <a href="http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml"> 
391 | <div> 
392 | <h3>Google JavaScript Style Guide</h3> 
393 | <p>JavaScript is the main client-side scripting language used by many of Google's open-source projects...</p> 
394 | <small>google-styleguide.googlecode.com</small> 
395 | </div> 
396 | </a> 
397 |  
398 | <a href="http://net.tutsplus.com/tutorials/javascript-ajax/the-essentials-of-writing-high-quality-javascript/"> 
399 | <div> 
400 | <h3>High Quality JavaScript</h3> 
401 | <p>The brilliant Stoyan Stefanov, in promotion of his new book from O’Reilly, “JavaScript Patterns,” was kind enough to contribute an excerpt...</p> 
402 | <small>net.tutsplus.com</small> 
403 | </div> 
404 | </a> 
405 |  
406 | <a href="http://bonsaiden.github.com/JavaScript-Garden/"> 
407 | <div> 
408 | <h3>JavaScript Garden</h3> 
409 | <p>JavaScript Garden is a growing collection of documentation about the most quirky parts of the JavaScript programming language...</p> 
410 | <small>bonsaiden.github.com</small> 
411 | </div> 
412 | </a> 
413 |  
414 | <a href="https://developer.mozilla.org/en/JavaScript"> 
415 | <div> 
416 | <h3>MDN JavaScript</h3> 
417 | <p>JavaScript® (sometimes shortened to JS) is a lightweight, object-oriented language, most known as the scripting language for web pages...</p> 
418 | <small>developer.mozilla.org</small> 
419 | </div> 
420 | </a> 
421 |  
422 |  
423 | <div class="category"> 
424 | <h2>Responsive Design</h2> 
425 | </div> 
426 |  
427 | <a href="http://www.alistapart.com/articles/responsive-web-design"> 
428 | <div> 
429 | <h3>Responsive Web Design</h3> 
430 | <p>The control which designers know in the print medium, and often desire in the web medium, is simply a function of the limitation of the printed page...</p> 
431 | <small>alistapart.com</small> 
432 | </div> 
433 | </a> 
434 |  
435 | <a href="http://mediaqueri.es/"> 
436 | <div> 
437 | <h3>Media Queries Gallery</h3> 
438 | <p>A collection of responsive web designs...</p> 
439 | <small>mediaqueri.es</small> 
440 | </div> 
441 | </a> 
442 |  
443 | <a href="http://www.w3.org/TR/css3-mediaqueries/"> 
444 | <div> 
445 | <h3>W3C CSS Media Queries</h3> 
446 | <p>A media query consists of a media type and zero or more expressions that check for the conditions of particular media features...</p> 
447 | <small>w3.org</small> 
448 | </div> 
449 | </a> 
450 |  
451 | <a href="http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/"> 
452 | <div> 
453 | <h3>Media Queries are Fool's Gold</h3> 
454 | <p>Unfortunately, CSS media query is fool’s gold for mobile devices. It hides tough problems and gives developers a false...</p> 
455 | <small>cloudfour.com</small> 
456 | </div> 
457 | </a> 
458 |  
459 | <a href="http://www.alistapart.com/articles/fluidgrids"> 
460 | <div> 
461 | <h3>Fluid Grids</h3> 
462 | <p>Early last year, I worked on the redesign of a rather content-heavy website. Design requirements were fairly light: the client as...</p> 
463 | <small>alistapart.com</small> 
464 | </div> 
465 | </a> 
466 |  
467 | <a href="http://unstoppablerobotninja.com/entry/fluid-images"> 
468 | <div> 
469 | <h3>Fluid Images</h3> 
470 | <p>I’ve always hated publishing. I don’t mean the industry, but the act. Hitting “print,” sending an email, pressing that “Publish” button on the CMS...</p> 
471 | <small>unstoppablerobotninja.com</small> 
472 | </div> 
473 | </a> 
474 |  
475 | <div class="category"> 
476 | <h2>Grids</h2> 
477 | </div> 
478 |  
479 | <a href="http://www.w3.org/TR/2011/WD-css3-grid-layout-20110407/"> 
480 | <div> 
481 | <h3>Grid Layout W3C Working Draft</h3> 
482 | <p>Grid Layout contains features targeted at web application authors. The Grid can be used to achieve many different layouts...</p> 
483 | <small>w3.org</small> 
484 | </div> 
485 | </a> 
486 |  
487 | <a href="http://designinfluences.com/fluid960gs"> 
488 |  
489 | <div> 
490 | <h3>Fluid 960 Grid System</h3> 
491 | <p>Templates for Rapid Interactive Prototyping...</p> 
492 | <small>designinfluences.com</small> 
493 | </div> 
494 | </a> 
495 |  
496 | <a href="http://aplus.rs/css/em-based-typographic-grid/"> 
497 | <div> 
498 | <h3>Em-based Typographic Grid</h3> 
499 | <p>Unlike most of the ready-made grid systems like BluePrint and 960.gs which are based on pixels — I wanted to base it all on ems...</p> 
500 | <small>aplus.rs</small> 
501 | </div> 
502 | </a> 
503 |  
504 | <a href="http://developer.yahoo.com/yui/grids"> 
505 | <div> 
506 | <h3>YUI Grid Framework</h3> 
507 | <p>The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three...</p> 
508 | <small>developer.yahoo.com</small> 
509 | </div> 
510 | </a> 
511 |  
512 | <a href="http://www.tinyfluidgrid.com"> 
513 | <div> 
514 | <h3>Tiny Fluid Grid</h3> 
515 | <p>The happy and awesome way to build fluid grid based websites. Inspired by 1kbgrid.com. Developed with love by Girlfriend's overconfident...</p> 
516 | <small>tinyfluidgrid.com</small> 
517 | </div> 
518 | </a> 
519 |  
520 | <a href="http://lessframework.com"> 
521 | <div> 
522 | <h3>Less Framework</h3> 
523 | <p>Less Framework is a CSS grid system for designing adaptive web­sites. It contains 4 layouts and 3 sets of typography presets, all based on a single grid...</p> 
524 | <small>lessframework.com</small> 
525 | </div> 
526 | </a> 
527 |  
528 | <a href="http://ejohn.org/blog/sub-pixel-problems-in-css"> 
529 |  
530 | <div> 
531 | <h3>Sub-Pixel Problems in CSS</h3> 
532 | <p>Something that jumped at me, recently, was a rendering dilemma that browsers have to encounter, and gracefully handle, on a day-by-day basis with little...</p> 
533 | <small>ejohn.org</small> 
534 | </div> 
535 | </a> 
536 |  
537 | <a href="http://jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css"> 
538 | <div> 
539 | <h3>Incredible Em &amp; Elastic Layouts with CSS</h3> 
540 | <p>Almost a year ago, Ty Gossman over at Stylegala asked me to write an article about elastic layouts. The best I could do was a quick email between work...</p> 
541 | <small>jontangerine.com</small> 
542 | </div> 
543 | </a> 
544 |  
545 | <div class="category"> 
546 |  
547 | <h2>Mobile</h2> 
548 | </div> 
549 |  
550 | <a href="http://yiibu.com/"> 
551 | <div> 
552 | <h3>Rethinking the Mobile Web</h3> 
553 | <p>This site is a proof of concept for many of the ideas described in Rethinking the Mobile Web...</p> 
554 | <small>yiibu.com</small> 
555 | </div> 
556 | </a> 
557 |  
558 | <a href="http://www.lukew.com/presos/preso.asp?26"> 
559 |  
560 | <div> 
561 | <h3>Mobile First</h3> 
562 | <p>For years, most Web teams have designed for the desktop. Mobile, if it even happened, was a port off the desktop version, designed and built before...</p> 
563 | <small>lukew.com</small> 
564 | </div> 
565 | </a> 
566 |  
567 | <a href="http://www.enough.de/products/mobile-developers-guide/"> 
568 | <div> 
569 | <h3>Mobile Developers' Guide</h3> 
570 | <p>This non-commercial brochure provides an overview on the different mobile technologies and platforms. 17 writers contributed their know-how...</p> 
571 | <small>enough.de</small> 
572 | </div> 
573 | </a> 
574 |  
575 | <a href="http://www.cloudfour.com/new-to-mobile-welcome-to-the-one-web-debate/"> 
576 | <div> 
577 | <h3>The One Web Debate</h3> 
578 | <p>There are two main camps in the mobile web: One Web and Mobile Web...</p> 
579 | <small>cloudfour.com</small> 
580 | </div> 
581 | </a> 
582 |  
583 | <a href="http://www.opera.com/smw/"> 
584 |  
585 | <div> 
586 | <h3>State of the Mobile Web</h3> 
587 | <p>Every month Opera conducts the definitive analysis of the key trends affecting the mobile Web worldwide. We publish these findings as...</p> 
588 | <small>opera.com</small> 
589 | </div> 
590 | </a> 
591 |  
592 | <a href="http://www.w3.org/TR/mobile-bp/"> 
593 | <div> 
594 | <h3>W3C Mobile Web Best Practices</h3> 
595 | <p>This document specifies Best Practices for delivering Web content to mobile devices....</p> 
596 | <small>w3.org</small> 
597 | </div> 
598 | </a> 
599 |  
600 | <a href="http://www.alistapart.com/articles/return-of-the-mobile-stylesheet"> 
601 | <div> 
602 | <h3>Return of the Mobile Stylesheet</h3> 
603 | <p>The past couple of years have seen numerous new web-capable mobile devices arise, including Apple’s iPhone and its Safari browser...</p> 
604 | <small>alistapart.com</small> 
605 | </div> 
606 | </a> 
607 |  
608 | <a href="http://html5boilerplate.com/mobile"> 
609 | <div> 
610 | <h3>HTML5 Mobile Boilerplate</h3> 
611 | <p>Mobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps...</p> 
612 | <small>html5boilerplate.com/mobile</small> 
613 | </div> 
614 | </a> 
615 |  
616 | <a href="http://stuffandnonsense.co.uk/projects/320andup/"> 
617 | <div> 
618 | <h3>320 and Up boilerplate</h3> 
619 | <p>‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s...</p> 
620 | <small>stuffandnonsense.co.uk</small> 
621 | </div> 
622 | </a> 
623 |  
624 | <a href="http://dinosaurswithlaserz.com/2011/03/28/mobile-framework-throwdown/"> 
625 | <div> 
626 | <h3>Mobile Framework Comparison</h3> 
627 | <p>Web development vs. custom API frameworks. JQTouch, jQuery Mobile, PhoneGap, Sencha Touch, Titanium...</p> 
628 | <small>dinosaurswithlaserz.com</small> 
629 | </div> 
630 | </a> 
631 |  
632 | <a href="http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/"> 
633 | <div> 
634 | <h3>Responsive Images</h3> 
635 | <p>The goal of this technique is to deliver optimized, contextual image sizes for responsive layouts that utilize dramatically different...</p> 
636 | <small>filamentgroup.com</small> 
637 | </div> 
638 | </a> 
639 |  
640 | <a href="http://tinysrc.net/"> 
641 | <div> 
642 | <h3>Reformat Images for Mobile</h3> 
643 | <p>Tinysrc a fast, easy - and free - way to reformat graphics and images for mobile devices....</p> 
644 | <small>tinysrc.net</small> 
645 | </div> 
646 | </a> 
647 |  
648 | <a href="http://mobiforge.com/designing/story/effective-design-multiple-screen-sizes"> 
649 | <div> 
650 | <h3>Multiple Screen Sizes</h3> 
651 | <p>So you're a designer and have been tasked with the design of a mobile web site...</p> 
652 | <small>mobiforge.com</small> 
653 | </div> 
654 | </a> 
655 |  
656 | <a href="http://www.quirksmode.org/m/css.html#t021"> 
657 | <div> 
658 | <h3>Mobile browser CSS support</h3> 
659 | <p>CSS contents and browser compatibility - mobile. My CSS tests, but now on mobile phones...</p> 
660 | <small>quirksmode.org</small> 
661 | </div> 
662 | </a> 
663 |  
664 | <a href="http://gs.statcounter.com/"> 
665 | <div> 
666 | <h3>StatCounter GlobalStats</h3> 
667 | <p>Based on aggregate data collected on a sample exceeding 15 billion pageviews per month collected from across...</p> 
668 | <small>gs.statcounter.com</small> 
669 | </div> 
670 | </a> 
671 |  
672 | <a href="http://metrics.admob.com/"> 
673 | <div> 
674 | <h3>AdMob Mobile Metrics</h3> 
675 | <p>Over the past two years at AdMob, we’ve experienced the rapid growth in consumer usage of the the mobile...</p> 
676 | <small>metrics.admob.com</small> 
677 | </div> 
678 | </a> 
679 |  
680 | <a href="http://www.w3.org/TR/mobile-bp/"> 
681 | <div> 
682 | <h3>W3C Mobile Web Best Practices</h3> 
683 | <p>This document specifies Best Practices for delivering Web content to mobile devices..</p> 
684 | <small>w3.org</small> 
685 | </div> 
686 | </a> 
687 |  
688 | <a href="http://www.passani.it/gap/"> 
689 | <div> 
690 | <h3>Global Authoring Practices</h3> 
691 | <p>This document gives general guidelines for web developers and content authors who are searching for directions to help create sites for the mobile web....</p> 
692 | <small>www.passani.it</small> 
693 | </div> 
694 | </a> 
695 |  
696 | <a href="https://spreadsheets.google.com/ccc?key=0AsJ0Pb__7jQAdExlbjBYWkJWVHppVlpCend3UUZ4bHc&authkey=CJPSkfwO&hl=en&pli=1#gid=0"> 
697 | <div> 
698 | <h3>Smartphone Front-end Matrices</h3> 
699 | <p>This spreadsheet provides smart-phone information matter to front end mobile web developers...</p> 
700 | <small>spreadsheets.google.com</small> 
701 | </div> 
702 | </a> 
703 |  
704 | <a href="http://www.campaignmonitor.com/blog/post/3163/optimizing-your-emails-for-mobile-devices-with-media/"> 
705 |  
706 | <div> 
707 | <h3>Optimise EDM for Mobile</h3> 
708 | <p>Designing for the mobile web is nothing particularly new - or rare. With pretty much every decent handset available providing the...</p> 
709 | <small>campaignmonitor.com</small> 
710 | </div> 
711 | </a> 
712 |  
713 | <a href="http://quirksmode.org/mobile/"> 
714 |  
715 | <div> 
716 | <h3>Quirksmode Mobile</h3> 
717 | <p>This section contains my official mobile pages. They treat various aspects of mobile web development...</p> 
718 | <small>quirksmode.org</small> 
719 | </div> 
720 | </a> 
721 |  
722 | <a href="http://validator.w3.org/mobile/"> 
723 | <div> 
724 | <h3>W3C mobileOK Checker</h3> 
725 | <p>This checker performs various tests on a Web Page to determine its level of mobile-friendliness. The tests are defined in the mobileOK Basic Tests 1.0 specification...</p> 
726 | <small>validator.w3.org/mobile</small> 
727 | </div> 
728 | </a> 
729 |  
730 | <a href="http://chrispederick.com/work/user-agent-switcher/"> 
731 | <div> 
732 | <h3>User Agent Switcher</h3> 
733 | <p>Chris Pederick's User Agent Switcher is an essential Firefox add-on for anybody in the business of creating mobile web sites...</p> 
734 | <small>chrispederick.com</small> 
735 | </div> 
736 | </a> 
737 |  
738 | <a href="http://alexw.me/ipad2/"> 
739 | <div> 
740 | <h3>iPad Emulator</h3> 
741 | <p>Browser-based iPad emulator...</p> 
742 | <small>alexw.me</small> 
743 | </div> 
744 | </a> 
745 |  
746 | <a href="http://www.testiphone.com/"> 
747 | <div> 
748 | <h3>iPhone Emulator</h3> 
749 | <p>This is a web browser based simulator for quickly testing your iPhone web applications...</p> 
750 | <small>testiphone.com</small> 
751 | </div> 
752 | </a> 
753 |  
754 | <a href="http://developer.palm.com"> 
755 | <div> 
756 | <h3>HP/Palm webOS Emulator</h3> 
757 | <p>Emulator accessible via webOS SDK...</p> 
758 | <small>developer.palm.com</small> 
759 | </div> 
760 | </a> 
761 |  
762 | <a href="http://forum.xda-developers.com/showthread.php?p=4420071#post442007"> 
763 | <div> 
764 | <h3>Android Emulator</h3> 
765 | <p>Test your web app on Android, bypass Android's SDK (tested and works a charm).</p> 
766 | <small>forum.xda-developers.com</small> 
767 | </div> 
768 | </a> 
769 |  
770 | <a href="https://swdownloads.blackberry.com/Downloads/entry.do?code=060AD92489947D410D897474079C1477"> 
771 | <div> 
772 | <h3>BlackBerry Device Simulators</h3> 
773 | <p>Welcome Developers! To view software for a BlackBerry product, please select a product from the drop down menu and click Select...</p> 
774 | <small>swdownloads.blackberry.com</small> 
775 | </div> 
776 | </a> 
777 |  
778 | <a href="http://msdn.microsoft.com/en-us/windowsmobile"> 
779 | <div> 
780 | <h3>Windows Phone 7 Emulator</h3> 
781 | <p>Emulator accessible via Windows Mobile 6 SDK...</p> 
782 | <small>swdownloads.blackberry.com</small> 
783 | </div> 
784 | </a> 
785 |  
786 | <a href="http://www.opera.com/mobile/demo/"> 
787 | <div> 
788 | <h3>Opera Mini Simulator</h3> 
789 | <p>Browser-based demo of Opera Mini 6 that functions as it would when installed on a handset...</p> 
790 | <small>opera.com</small> 
791 | </div> 
792 | </a> 
793 |  
794 | <a href="http://www.forum.nokia.com/Library/Tools_and_downloads/Other/Symbian_SDKs/"> 
795 | <div> 
796 | <h3>Symbian Emulator</h3> 
797 | <p>Emulator accessible via Symbian SDK...</p> 
798 | <small>forum.nokia.com</small> 
799 | </div> 
800 | </a> 
801 |  
802 | <div class="category"> 
803 | <h2>Typography</h2> 
804 | </div> 
805 |  
806 | <a href="http://webtypography.net/toc"> 
807 | <div> 
808 | <h3>Elements of Typographic Style Applied to the Web</h3> 
809 | <p>Great reference for laying out type on the web. The Vertical Motion chapter is particularly good.</p> 
810 | <small>webtypography.net/toc</small> 
811 | </div> 
812 | </a> 
813 |  
814 | <a href="http://www.alistapart.com/articles/howtosizetextincss"> 
815 |  
816 | <div> 
817 | <h3>How to Size Text in CSS</h3> 
818 | <p>In this article, we will reconcile the designer’s requirement for accuracy with the user’s need to resize text on demand, arriving at a best practice...</p> 
819 | <small>alistapart.com</small> 
820 | </div> 
821 | </a> 
822 |  
823 | <a href="http://typekit.com"> 
824 | <div> 
825 | <h3>Typekit</h3> 
826 | <p>This will change the way you design websites. Add a line of code to your pages and choose from hundreds of fonts. Simple, bulletproof, standards compliant, accessible, and totally legal.</p> 
827 | <small>typekit.com</small> 
828 | </div> 
829 | </a> 
830 |  
831 | <a href="http://developer.yahoo.com/yui/3/cssfonts"> 
832 | <div> 
833 | <h3>YUI 3: CSS Fonts</h3> 
834 | <p>The foundational CSS Fonts provides cross-browser typographical normalization and control while still allowing users to choose and adjust their font size...</p> 
835 | <small>developer.yahoo.com</small> 
836 | </div> 
837 | </a> 
838 | <script src="scripts/css3-mediaqueries.js"></script>
839 | </body> 
840 | </html>


--------------------------------------------------------------------------------