PageSourceSearch

http://www.vcarrer.com/2009/06/1-line-css-grid-framework.html

html vcarrer.com collected 2026-09-24 18:08:45 UTC 69,866 bytes, 1,409 lines download raw bytes

1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2
3<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
4<head>
5  <title>Carrer Blog: 1 line CSS Grid Framework</title>
6
7    <link href="http://vcarrer.googlepages.com/favicon.png" rel="shortcut icon"/>
8<meta name="description" content="Blog about web programming & web design" />
9<meta name="keywords" content="Mysql, database, javascript, gridview, programming,asp.net,php,cold fusion,sql server" />
10<meta name="p:domain_verify" content="94ccd042aa20fb8eb6ec5028d7a426d0"/>
11<meta name="verify-v1" content="wtPeMftTOYsq745nPKHUos5mX+TrOnQbNJ8sVwcBiXs=" />
12<meta name="msvalidate.01" content="5550065980266AED67AF2AE326236A8B" />
13<link rel="alternate" type="application/rss+xml" title="RSS" href="http://feeds.feedburner.com/CarrerBlog" />
14    
15<!-- Google tag (gtag.js) -->
vendor: 64 bytes, lines 15-16
15
16<script async src="https://www.googletagmanager.com/gtag/js?id=
16G-GYQDJECWTC
vendor: 12 bytes, line 16
16"></script>
17<script>
18  
vendor: 134 bytes, lines 18-22
18window.dataLayer = window.dataLayer || [];
19  function gtag(){dataLayer.push(arguments);}
20  gtag('js', new Date());
21
22  gtag('config', '
22G-GYQDJECWTC
vendor: 4 bytes, line 22
22');
23</script>
23
24    
25  <style type="text/css">
26/* Reset */
27
28body { 
29  margin: 0; line-height: 1.5; 
30}
31
32/* Tables still need 'cellspacing="0"' in the markup. */
33table { border-collapse: separate; border-spacing: 0; }
34caption, th, td { text-align: left; font-weight: normal; }
35table, td, th { vertical-align: middle; }
36
37/* Remove possible quote marks (") from <q>, <blockquote>. */
38blockquote:before, blockquote:after, q:before, q:after { content: ""; }
39blockquote, q { quotes: "" ""; }
40
41/* Remove annoying border on linked images. */
42a img { border: none; }
43
44/* GRID */
45
46
47.main { 
48width:80em;margin:0 auto;text-align:left;  }
49
50.clear {clear:both;}
51
52.dl1,
53.dl2,
54.dl5,
55.dl10,
56.dl15,
57.dl20,
58.dl25,
59.dl30,
60.dl35,
61.dl40,
62.dl45,
63.dl50,
64.dl55,
65.dl60,
66.dl65,
67.dl70,
68.dl75{float:left; display: inline; }
69
70.dr1,
71.dr2,
72.dr5,
73.dr10,
74.dr15,
75.dr20,
76.dr25,
77.dr30,
78.dr35,
79.dr40,
80.dr45,
81.dr50,
82.dr55,
83.dr60,
84.dr65,
85.dr70,
86.dr75
87{float:right; display: inline; }
88
89.dl1, .dr1 {width:1em;}
90.dl2, .dr2 {width:2em;}
91.dl5, .dr5{width:5em;}
92.dl10, .dr10{width:10em;}
93.dl15, .dr15{width:15em;}
94.dl20, .dr20{width:20em;}
95.dl25, .dr25{width:25em;}
96.dl30, .dr30{width:30em;}
97.dl35, .dr35{width:35em;}
98.dl40, .dr40{width:40em;}
99.dl45, .dr45{width:45em;}
100.dl50, .dr50{width:50em;}
101.dl55, .dr55{width:55em;}
102.dl60, .dr60{width:60em;}
103.dl65, .dr65{width:65em;}
104.dl70, .dr70{width:70em;}
105.dl75, .dr75{width:75em;}
106
107
108.ml5{margin-left:5em;}
109.ml10{margin-left:10em;}
110.ml15{margin-left:15em;}
111.ml20{margin-left:20em;}
112.ml25{margin-left:25em;}
113.ml30{margin-left:30em;}
114.ml35{margin-left:35em;}
115.ml40{margin-left:40em;}
116.ml45{margin-left:45em;}
117.ml50{margin-left:50em;}
118.ml55{margin-left:55em;}
119.ml60{margin-left:60em;}
120.ml65{margin-left:65em;}
121.ml70{margin-left:70em;}
122.ml75{margin-left:75em;}
123
124.mr5{margin-right:5em;}
125.mr10{margin-right:10em;}
126.mr15{margin-right:15em;}
127.mr20{margin-right:20em;}
128.mr25{margin-right:25em;}
129.mr30{margin-right:30em;}
130.mr35{margin-right:35em;}
131.mr40{margin-right:40em;}
132.mr45{margin-right:45em;}
133.mr50{margin-right:50em;}
134.mr55{margin-right:55em;}
135.mr60{margin-right:60em;}
136.mr65{margin-right:65em;}
137.mr70{margin-right:70em;}
138.mr75{margin-right:75em;}
139
140.fluid {width:auto;    float:none;}
141div .fluid {padding:0em 0em 0em 0.1em;}
142
143.hp{width:100%;  float:left; }
144
145.clearfix, .main{ display:block;} 
146
147.clearfix:after, .main:after {
148     visibility: hidden;
149     display: block;
150     font-size: 0;
151     content: " ";
152     clear: both;
153     height: 0;
154	 
155     }
156
157/* IE5/MAC hack \*/
158* html .clearfix{ display: inline;  height: 1px;}
159/* close */
160
161/* Typography */
162body { font:75%/1.5em Arial, Helvetica, sans-serif;
163font-size-adjust:none;
164font-style:normal;
165font-variant:normal;
166font-weight:normal;
167 }
168
169p { padding:0 0 1.5em 0em;color:#111; word-spacing:0.03em;   letter-spacing:-0.03em; }
170p img       { float: left; margin: 0 1em 1em 0; padding: 0; }
171p img.right { float: right; margin: 0 0 1em 1em;  }
172
173h1,h2{ font-weight:normal; color: #333; font-family:Georgia, "Times New Roman", serif; letter-spacing: 2px; word-spacing:0.1em;  }
174h3,h4,h5,h6 { font-weight: normal; color: #333; font-family:Georgia, "Times New Roman", serif; }
175
176
177h1 { font-size: 2.2em;  margin-bottom: 0.682em; }
178h2 { font-size: 1.9em;  margin-bottom: 0.79em; }
179h3 { font-size: 1.7em;  margin-bottom: 0.882em; }
180h4 { font-size: 1.4em;  margin-bottom: 1.071em; }
181h5,h6 { font-size: 1.3em;  margin-bottom: 1,154em; }
182
183
184
185li ul, 
186li ol       { margin:0 1.5em; }
187ul, ol      { margin: 0; padding: 10px 0 20px 20px; }
188
189
190dl { margin: 0 0 1.5em 0; }
191dl dt { font-weight: bold; }
192dl dd { margin-left: 1.5em; }
193
194a { color: #035292; text-decoration: none; }
195a:hover { text-decoration: underline; }
196
197
198table { margin-bottom: 1.5em; }
199th {  border-top: 0px solid #ddd; border-bottom: 0px solid #ddd;font-weight: bold; }
200th,td { padding:0 1.5em 0em 1em;}
201tfoot { font-style: italic;  }
202tfoot td  { border-top: 0px solid #ddd;border-bottom: 0px solid #ddd; }
203caption { text-align:center; font-family:Georgia, serif;  }
204
205
206abbr, acronym { border-bottom: 1px dotted #000; }
207address { margin-top: 1.5em; font-style: italic; }
208del { color: #000; }
209
210
211blockquote { padding-left:1.5em; margin: 1.5em; border-left:3px solid #ccc; font-style:italic;  }
212strong { font-weight: bold; }
213em, dfn { font-style: italic; }
214dfn { font-weight: bold; }
215pre, code { margin: 1.5em 0; white-space: pre; }
216pre, code, tt { font: 1em 'lucida console',monospace; line-height: 1.5; } 
217tt { display: block; margin: 1.5em 0; line-height: 1.5; }
218hr {margin-bottom:1.5em;}
219
220/* new */
221.rc {-moz-border-radius: 10px;  -webkit-border-radius: 10px; ; border:1px solid #fff; }
222.drzac { position:relative; right:10px; margin:auto;  margin:auto; display:block; }
223.byline {
224font-family: "Lucida Grande", Tahoma;
225	font-size: 0.865em;
226	font-weight: lighter;
227	font-variant: normal;
228	text-transform: uppercase;
229	color: #666666;
230	letter-spacing: 0.4em;
231	display: block;
232	margin-bottom: 1.734em;
233	padding:0em 0em 0em 1em;
234	}
235
236.byline>p{margin:0; padding: 0 0 20px 0; line-height: 1;}
237
238	span.and{font-family: Baskerville, "Goudy Old Style", "Palatino", "Book Antiqua", serif;
239	font-style: italic;
240	color: #777;
241	}
242 .shadow {
243 
244  background: #fff url(sahdow1.png)  repeat-y  bottom right  ;
245 
246 
247
248
249 padding: 0px 5px 6px 0px; 
250 
251 
252}
253 .shadow1 { position:absolute; top:0px; right:0px;   }
254 .shadow2 { position:absolute; bottom:0px; left:0px;  }
255 
256.ramka {border:1px solid #ccc; padding:0.25em;}
257.tc {text-align:center;}
258.tr {text-align:right;}
259.tl {text-align:left;}
260.b{ font-weight:bold;}
261.pl1{padding-left:1em;}
262.pl2{padding-left:2em;}
263.pl3{padding-left:3em;}
264
265
266.water{color:#5582d1;}
267.earth{color:#4e3e2c;}
268.air{color:#f1fff7;}
269.fire{ color:#ff8a19;}
270 /* drinks food */
271 .wine{color:#4a040a;}
272 .beer{color:#F0C030;}
273 .caffe{color:#473523;}
274 .caffe-cream{color:#b68d3d;}
275 .espresso{color:#2c1901;}
276 .caramel{color:#ab671f;}
277 .chocolate{color:#290200;}
278 .black-pepper{color:#444334;}
279 .pepper-lite{color:#8d8a72;}
280 
281 .lipstick{color:#c20c0c;}
282 .oldbook{font-family:"Book Antiqua","Warnock Pro","Goudy Old Style","Palatino",Georgia,serif;}
283.note{font-family:Georgia, "Times New Roman", Times, serif; font-style:italic; font-size:0.9em; color:#333;} 
284
285  .main{width:80em;}
286
287  .gridlines {background:url(grid.png);}
288 h1 + p, h2 + p, h3 + p { text-indent:0; } 
289 .mono + p:first-line {text-align: justify;
290 font-variant: small-caps;
291 text-transform: lowercase;
292 font-weight: 700;
293letter-spacing: 0.1em;
294 }
295.frame {border:1px dotted #ccc; padding:0.25em;}
296.bline {border-bottom:1px dotted #000; margin:0;}
297.bline1 {border-bottom:1px dotted; border-top:1px dotted; margin:0 0 0.3em 0; padding:0 0.1em 0 0.5em; background-color:#FAFAFA;}
298p{font-size:1em; line-height:1.6;}
299h3{color:#111;}
300ul{ list-style-type: circle; list-style-position:outside;}
301.small{font-size:0.35em;margin:0;padding:0;line-height:0;} 
302.medium{font-size:0.9em;margin:0;padding:0;line-height:0; color:#ccc;} 
303.mono{font-family:"Courier New", Courier, monospace;font-size:12px; margin:0}
304#navbar-iframe {
305
306height:0px;
307visibility:hidden;
308display:none;
309} 
310
311  </style>
312
313  <!--[if IE]>
314 
315 <![endif]-->
316
317<meta name='google-adsense-platform-account' content='ca-host-pub-1556223355139109'/>
318<meta name='google-adsense-platform-domain' content='blogspot.com'/>
319
320<!-- data-ad-client=ca-pub-0316081000391490 -->
321<!-- --><style type="text/css">@import url(https://www.blogger.com/static/v1/v-css/navbar/3334278262-classic.css);
322div.b-mobile {display:none;}
323</style>
324
325</head>
326
327<body>
327<script type="text/javascript">
328    function setAttributeOnload(object, attribute, val) {
329      if(window.addEventListener) {
330        window.addEventListener('load',
331          function(){ object[attribute] = val; }, false);
332      } else {
333        window.attachEvent('onload', function(){ object[attribute] = val; });
334      }
335    }
336  </script>
336
337<div id="navbar-iframe-container"></div>
338<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
vendor: 1 bytes, line 338
338
339<script type="text/javascript">
340      gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() {
341        if (gapi.iframes && gapi.iframes.getContext) {
342          gapi.iframes.getContext().openChild({
343              url: 'https://www.blogger.com/navbar/20880701?origin\x3dhttp://www.vcarrer.com',
344              where: document.getElementById("navbar-iframe-container"),
345              id: "navbar-iframe"
346          });
347        }
348      });
349    </script>
349
350
351<div class="main gridlines">
352<div class="hp mt2"><h1>{<span class="espresso">Carrer<span> <span class="lipstick">web</span> <span class="pepper-lite">log</span>}     <a href="http://www.vcarrer.com"> ← </a> </h1></div>
353<br class="clear" />
354<div class="hp clearfix byline"><p>Blog about web design <span class="and caffe-cream" style="font-size:1.3em;">&</span>  development</p></div>
355
356
357<div class="dl50">
358
359
360<h3 class="bline">1 line CSS Grid Framework</h3>
361
362<p class="mono tl">Tuesday, June 02, 2009  { <a  href="https://www.blogger.com/comment/fullpage/post/20880701/5390047367608710321"location.href=https://www.blogger.com/comment/fullpage/post/20880701/5390047367608710321;>48 Comments</a> }</p>
363This is the challenge of writing entire CSS layout system with one line CSS class.<br />
364<br />
365I just wanted to prove how easy CSS  can be, and with little <a href="http://www.southparkstudios.com/guide/1110">imagination</a> we can be build cool things.<br />
366<br />
367I started with the principle that every column can be <b>divided  by two</b>, becoming half column or 50% column.<br />
368<br />
369So how can we build CSS Layout system with this principle?<br />
370<br />
371One column can become 2 (50%) column or 100% = 50% + 50%. <br />
372<br />
373So we can make 2,4,8,16, … layout system.<br />
374<br />
375Believe it or not we only need <b>this line of CSS code</b>:<br />
376<pre><code>.dp50 {width:50%;  float:left;  display: inline;  *margin-right:-1px; }</code>
377</pre><br />
378A little explanation:<br />
379<br />
380.dp50 means div 50 percent<br />
381<br />
382and we have floated left 50% column, display: inline;  *margin-right:-1px; is fix for IE.<br />
383<br />
384So the result is:<br />
385<br />
386<a href="http://www.allapis.com/1-Line-CSS-Framework/1-line-css-framework-1.html"><img style="cursor:pointer; cursor:hand;width: 400px; height: 256px;float:none;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSOWwWoC97pOVHF9bSjbrQskuNtukS-WcPMB9OgOvhA8FgLELxe82agYlIKcKtJeQpYA05Vb3PZeQSg7tRSDx8uQ_vHcvqeAKP32Tb5FmTxuudeA_F28Yff0njnhOorw16GK2z9w/s400/1-line-CSS-Framework.png" border="0" alt="1 line css framework"id="BLOGGER_PHOTO_ID_5342506997146299410" /></a><br />
387<br />
388<ul><li><a href="https://dl.dropboxusercontent.com/u/2111778/1-Line-CSS-Framework/1-line-css-framework-1.html">Example 1</a></li>
389
390<li><a href="https://dl.dropboxusercontent.com/u/2111778/1-Line-CSS-Framework/1-line-css-framework-2.html">Example 2</a></li>
391
392<li><a href="https://dl.dropboxusercontent.com/u/2111778/1-Line-CSS-Framework/1-line-css-framework-3.html">Example 3</a></li>
393
394</ul><br />
395Download <a href="https://dl.dropboxusercontent.com/u/2111778/1-Line-CSS-Framework.zip">link</a><br />
396<br />
397The system can be made to work with any main default size(px, em, %)  something like 950px or 550px or 90% or 50em. This system works <b>even in IE5.5</b>, so you don’t have problem of multi browser compatibility.<br />
398<br />
399You can use the system in many different ways.<br />
400<br />
401Limits of this Framework?<br />
402<br />
403The main limit is that you can use only 1,2,4,8,16 columns system plus some combinations like (50% + 25% +25%). If you have something like 16 columns you will have many nested divs.<br />
404<br />
405<b>Conclusion</b>: This is just technical demo and I don’t advise you to use it in production. If you need something very small you can use <a href="http://code.google.com/p/malo/">Malo</a>, it is just 8 lines of code and uses the same naming system but has to offer much more.<br />
406<br />
407Building some "<b>real</b>" css layout system(CSS Framework) is much more complex work. Usually you project your layout starting with the typography . On the base of the typography you make the grid and the gutter.<br />
408<br />
409I spend a lot of time searching for <a href="http://www.vcarrer.com/2009/05/o-rule-golden-proportion-for.html">the best gutter</a> or <a href="http://www.vcarrer.com/2008/12/in-search-of-holy-web-grid.html">perfect web grid</a> and searching the answer to the question "<a href="http://www.vcarrer.com/2009/03/f-pattern-or-just-simple-triangle.html">how we read</a>?". <br />
410<br />
411So I <b>repeat</b>, this experiment has pure <b>technical nature</b> of building relatively complex css layout  with minimum CSS code.<br />
412<br />
413<br />
414
415
416
417
418	<h4><span id="comments">48</span> Responses to &#8220;1 line CSS Grid Framework&#8221;  </h4>
419
420	<ol>
421
422   
423					
424				<li type="i" id="comment-1549850680569106003">
425				
426                    
427
428					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://www.simple-blog.eu" rel="nofollow">Simple</a></span>
429					
430 						<span class="mono">//</span> <a href="#comment-1549850680569106003">6/02/2009</a>
431											
432
433	
434					<div>
435						<p>This is brilliant. Cool idea. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/1549850680569106003" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
436					</div>
437				</li>
438		
439   
440					
441				<li type="i" id="comment-4889094501060505059">
442				
443                    
444
445					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://www.eskapism.se" rel="nofollow">Pär Thernström</a></span>
446					
447 						<span class="mono">//</span> <a href="#comment-4889094501060505059">6/02/2009</a>
448											
449
450	
451					<div>
452						<p>Yes, I also like this idea. Keep it simple! :) <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/4889094501060505059" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
453					</div>
454				</li>
455		
456   
457					
458				<li type="i" id="comment-7807284514367336341">
459				
460                    
461
462					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/14394406622791031932" rel="nofollow">jrosell</a></span>
463					
464 						<span class="mono">//</span> <a href="#comment-7807284514367336341">6/02/2009</a>
465											
466
467	
468					<div>
469						<p>That's an interesting aproach. Do you have some as simply idea for 3,5,7 column grids? <span class="item-control blog-admin pid-1525153042"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/7807284514367336341" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
470					</div>
471				</li>
472		
473   
474					
475				<li type="i" id="comment-7053436300839212522">
476				
477                    
478
479					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/04801854386297420021" rel="nofollow">Vladimir</a></span>
480					
481 						<span class="mono">//</span> <a href="#comment-7053436300839212522">6/02/2009</a>
482											
483
484	
485					<div>
486						<p>@jrosell: You can use <A HREF="http://code.google.com/p/malo/" REL="nofollow">Malo</A> the same css syntax but more options. <span class="item-control blog-admin pid-62779914"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/7053436300839212522" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
487					</div>
488				</li>
489		
490   
491					
492				<li type="i" id="comment-5113214934411710178">
493				
494                    
495
496					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://www.seoadsensethemes.com" rel="nofollow">Stanley</a></span>
497					
498 						<span class="mono">//</span> <a href="#comment-5113214934411710178">6/02/2009</a>
499											
500
501	
502					<div>
503						<p>
503I thought Malo was already pushing the limits for minimum code size. How wrong could I be. But I'm delighted to be proven wrong. This is a really interesting and different idea of doing grids. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/5113214934411710178" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
504					</div>
505				</li>
506		
507   
508					
509				<li type="i" id="comment-8777781402303211091">
510				
511                    
512
513					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/04477880525374108573" rel="nofollow">Unknown</a></span>
514					
515 						<span class="mono">//</span> <a href="#comment-8777781402303211091">6/02/2009</a>
516											
517
518	
519					<div>
520						<p>That's great! Nice use of your imagination. ;) <span class="item-control blog-admin pid-1640124137"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/8777781402303211091" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
521					</div>
522				</li>
523		
524   
525					
526				<li type="i" id="comment-6223968512858373597">
527				
528                    
529
530					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/13343552883351584445" rel="nofollow">test</a></span>
531					
532 						<span class="mono">//</span> <a href="#comment-6223968512858373597">6/02/2009</a>
533											
534
535	
536					<div>
537						<p>great work.<br /><br />you might be familiar with<br />http://www.designinfluences.com/fluid960gs/#<br /><br />could your plan also work for 12 collom grid? <span class="item-control blog-admin pid-1719183067"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/6223968512858373597" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
538					</div>
539				</li>
540		
541   
542					
543				<li type="i" id="comment-1906951162751810803">
544				
545                    
546
547					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/08304007084118273561" rel="nofollow">Netwala</a></span>
548					
549 						<span class="mono">//</span> <a href="#comment-1906951162751810803">6/02/2009</a>
550											
551
552	
553					<div>
554						<p>Awesome! Thanks for sharing!<br /><br />Cheers! <span class="item-control blog-admin pid-1175955851"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/1906951162751810803" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
555					</div>
556				</li>
557		
558   
559					
560				<li type="i" id="comment-441555991035727800">
561				
562                    
563
564					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<span class="anon-comment-author">Anonymous</span></span>
565					
566 						<span class="mono">//</span> <a href="#comment-441555991035727800">6/02/2009</a>
567											
568
569	
570					<div>
571						<p>This looks like a nice companion to http://unobtrusivecss.com/ <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/441555991035727800" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
572					</div>
573				</li>
574		
575   
576					
577				<li type="i" id="comment-7834090045358237342">
578				
579                    
580
581					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://www.niceoutput.com" rel="nofollow">Niceoutput</a></span>
582					
583 						<span class="mono">//</span> <a href="#comment-7834090045358237342">6/02/2009</a>
584											
585
586	
587					<div>
588						<p>very very interesting, this is brilliant! <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/7834090045358237342" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
589					</div>
590				</li>
591		
592   
593					
594				<li type="i" id="comment-2067773676976135844">
595				
596                    
597
598					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;
598<a href="http://www.tylerdiaz.com" rel="nofollow">Tyler Diaz</a></span>
599					
600 						<span class="mono">//</span> <a href="#comment-2067773676976135844">6/02/2009</a>
601											
602
603	
604					<div>
605						<p>Nice concept, I'm starting to notice more and more developers taking different approaches to grids. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/2067773676976135844" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
606					</div>
607				</li>
608		
609   
610					
611				<li type="i" id="comment-8725925929480909436">
612				
613                    
614
615					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/14394406622791031932" rel="nofollow">jrosell</a></span>
616					
617 						<span class="mono">//</span> <a href="#comment-8725925929480909436">6/02/2009</a>
618											
619
620	
621					<div>
622						<p>@Vladimir I take a look at Malo. What I mean is 2 cols (one using 66% width, while another using the rest 33%) <span class="item-control blog-admin pid-1525153042"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/8725925929480909436" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
623					</div>
624				</li>
625		
626   
627					
628				<li type="i" id="comment-1290033704597419449">
629				
630                    
631
632					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/04801854386297420021" rel="nofollow">Vladimir</a></span>
633					
634 						<span class="mono">//</span> <a href="#comment-1290033704597419449">6/02/2009</a>
635											
636
637	
638					<div>
639						<p>@jrosell: If you need something complete with all options you can use <A HREF="http://code.google.com/p/emastic/" REL="nofollow">Emastic</A> (inside plugins there is percent-grid.css). Inside there are almost all combination from 10% to 100% <span class="item-control blog-admin pid-62779914"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/1290033704597419449" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
640					</div>
641				</li>
642		
643   
644					
645				<li type="i" id="comment-6626620285330648556">
646				
647                    
648
649					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/10959148195991101111" rel="nofollow">Jan Järfalk</a></span>
650					
651 						<span class="mono">//</span> <a href="#comment-6626620285330648556">6/02/2009</a>
652											
653
654	
655					<div>
656						<p>Never been a fan of css frameworks, but this one I like! <span class="item-control blog-admin pid-233342553"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/6626620285330648556" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
657					</div>
658				</li>
659		
660   
661					
662				<li type="i" id="comment-1142701136446439894">
663				
664                    
665
666					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/09150501600353272367" rel="nofollow">aApe</a></span>
667					
668 						<span class="mono">//</span> <a href="#comment-1142701136446439894">6/02/2009</a>
669											
670
671	
672					<div>
673						<p>really nice.  thanks. <span class="item-control blog-admin pid-839139776"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/1142701136446439894" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
674					</div>
675				</li>
676		
677   
678					
679				<li type="i" id="comment-5229463737596104318">
680				
681                    
682
683					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/18375523424668861621" rel="nofollow">Unknown</a></span>
684					
685 						<span class="mono">//</span> <a href="#comment-5229463737596104318">6/02/2009</a>
686											
687
688	
689					<div>
690						<p>
690Interesting experiment, but I'd hate to maintain it.<br /><br />Using a nested hierarchy of divs to achieve layout eliminates the separation of layout and markup. You could have replaced lots of those div tags with trs and tds. <span class="item-control blog-admin pid-1767196873"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/5229463737596104318" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
691					</div>
692				</li>
693		
694   
695					
696				<li type="i" id="comment-5695536833946677592">
697				
698                    
699
700					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/04801854386297420021" rel="nofollow">Vladimir</a></span>
701					
702 						<span class="mono">//</span> <a href="#comment-5695536833946677592">6/02/2009</a>
703											
704
705	
706					<div>
707						<p>@Mark H: The point of this experiment was not to improve the CSS Layout system there much more elegant solution.<br />Like I sad nested div are one of the limits for this type of CSS solution.<br />My main goal was to show that you can make cool things with very little CSS. <span class="item-control blog-admin pid-62779914"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/5695536833946677592" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
708					</div>
709				</li>
710		
711   
712					
713				<li type="i" id="comment-2813326654711780262">
714				
715                    
716
717					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://danbauer.net" rel="nofollow">Dan</a></span>
718					
719 						<span class="mono">//</span> <a href="#comment-2813326654711780262">6/02/2009</a>
720											
721
722	
723					<div>
724						<p>Yours is a very intriguing solution to the overly complex grid layouts.  A great proof of concept, thanks. I'll check out Malo. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/2813326654711780262" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
725					</div>
726				</li>
727		
728   
729					
730				<li type="i" id="comment-1210076993766681265">
731				
732                    
733
734					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://delfuego.com.ar" rel="nofollow">delfuego</a></span>
735					
736 						<span class="mono">//</span> <a href="#comment-1210076993766681265">6/02/2009</a>
737											
738
739	
740					<div>
741						<p>I love how even in a 1-line framework we still have to use hacks to fix IE6. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/1210076993766681265" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
742					</div>
743				</li>
744		
745   
746					
747				<li type="i" id="comment-1910993076194337691">
748				
749                    
750
751					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/04801854386297420021" rel="nofollow">Vladimir</a></span>
752					
753 						<span class="mono">//</span> <a href="#comment-1910993076194337691">6/02/2009</a>
754											
755
756	
757					<div>
758						<p>@delfuego: Good point! But is not just IE6 also IE7 doesn't handle % very well and the grid brakes.<br /><br />Without IE :<br /><br />.dp50 {width:50%;  float:left; }<br /><br />Than I can call it: Two Word CSS Framework, lol <span class="item-control blog-admin pid-62779914"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/1910993076194337691" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
759					</div>
760				</li>
761		
762   
763					
764				<li type="i" id="comment-424816745630043152">
765				
766                    
767
768					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<span class="anon-comment-author">Anonymous</span></span>
769					
770 						<span class="mono">//</span> <a href="#comment-424816745630043152">6/02/2009</a>
771											
772
773	
774					<div>
775						<p>You keep using that word.  I do not think it means what you think it means.  :-) <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/424816745630043152" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
776					</div>
777				</li>
778		
779   
780					
781				<li type="i" id="comment-6963467375798020506">
782				
783                    
784
785					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<span class="anon-comment-author">Anonymous</span></span>
786					
787 						<span class="mono">//</span> <a href="#comment-6963467375798020506">6/02/2009</a>
788											
789
790	
791					<div>
792						<p>The only problem I see with this solution (and this is true with many CSS frameworks) is that all the spacing like margins and paddings have to be added to content inside the divs. If you add any padding to the 50% div its width will be more than 50% and you'll end up with float drops. So, if you want 15px margin between columns, you have to add margin to each tag in the div--too much redundancy for me. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/6963467375798020506" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
793					</div>
794				</li>
795		
796   
797					
798				<li type="i" id="comment-7652144052908495445">
799				
800                    
801
802					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/04801854386297420021" rel="nofollow">Vladimir</a></span>
803					
804 						<span class="mono">//</span> <a href="#comment-7652144052908495445">6/02/2009</a>
805											
806
807	
808					<div>
809						<p>@MyID.php(dave): The solution is very simple: p{padding:0 14px 0 0;}<br /><br />You always have paragraphs (p) indie div. So you can use divs like building blocks.And paragraphs for text,images and everything else.<br />Look at the code: <A HREF="http://www.allapis.com/1-Line-CSS-Framework/1-line-css-framework-3.html" REL="nofollow">Example 3</A> <span class="item-control blog-admin pid-62779914"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/7652144052908495445" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
810					</div>
811				</li>
812		
813   
814					
815				<li type="i" id="comment-2860097896721140182">
816				
817                    
818
819					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/04107182559147048937" rel="nofollow">Crantea Mihaita</a></span>
820					
821 						<span class="mono">//</span> <a href="#comment-2860097896721140182">6/02/2009</a>
822											
823
824	
825					<div>
826						<p>Smart thinking :) <span class="item-control blog-admin pid-442135324"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/2860097896721140182" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
827					</div>
828				</li>
829		
830   
831					
832				<li type="i" id="comment-523350260450798310">
833				
834                    
835
836					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/17833978831672004475" rel="nofollow">
836Ashton Sanders</a></span>
837					
838 						<span class="mono">//</span> <a href="#comment-523350260450798310">6/03/2009</a>
839											
840
841	
842					<div>
843						<p>Hahaha that is pretty funny.<br /><br />Man do I hate frameworks, but that's a great addition to any website.<br /><br />Thanks for the code. RT'ed <span class="item-control blog-admin pid-964581585"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/523350260450798310" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
844					</div>
845				</li>
846		
847   
848					
849				<li type="i" id="comment-4946313391007176324">
850				
851                    
852
853					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<span class="anon-comment-author">Dean</span></span>
854					
855 						<span class="mono">//</span> <a href="#comment-4946313391007176324">6/03/2009</a>
856											
857
858	
859					<div>
860						<p>You're putting presentation in the markup - why not just use b, i, u, width=, height=, etc if you're littering your HTML with class names that describe the presentation. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/4946313391007176324" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
861					</div>
862				</li>
863		
864   
865					
866				<li type="i" id="comment-124152265425479802">
867				
868                    
869
870					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<span class="anon-comment-author">Anonymous</span></span>
871					
872 						<span class="mono">//</span> <a href="#comment-124152265425479802">6/03/2009</a>
873											
874
875	
876					<div>
877						<p>The 2nd exmaple has layout problems with Chrome 2.0 <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/124152265425479802" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
878					</div>
879				</li>
880		
881   
882					
883				<li type="i" id="comment-8704599941136108588">
884				
885                    
886
887					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/16277820774810688474" rel="nofollow">Andrea Giammarchi</a></span>
888					
889 						<span class="mono">//</span> <a href="#comment-8704599941136108588">6/03/2009</a>
890											
891
892	
893					<div>
894						<p>nice one, I would have used main.div {...} though, just to speed up download time and to have exception with dp75 or dp25 where necessary. <span class="item-control blog-admin pid-1218353786"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/8704599941136108588" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
895					</div>
896				</li>
897		
898   
899					
900				<li type="i" id="comment-5942685328115119426">
901				
902                    
903
904					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<span class="anon-comment-author">Anonymous</span></span>
905					
906 						<span class="mono">//</span> <a href="#comment-5942685328115119426">6/03/2009</a>
907											
908
909	
910					<div>
911						<p>It would be nice if it wouldn&#39;t be build mostly of CSS hacks.<br />Float property were never meant to build columns - you should use &#39;inline-block&#39; instead.<br />Other thing, you say to browser to display block elements as inline - this may lead to very unpredictable behavior in many browsers (of course in IE it will work &quot;right&quot; ;-) <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/5942685328115119426" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
912					</div>
913				</li>
914		
915   
916					
917				<li type="i" id="comment-8865273414385565189">
918				
919                    
920
921					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/12528375698090050555" rel="nofollow">Ramon Leon</a></span>
922					
923 						<span class="mono">//</span> <a href="#comment-8865273414385565189">6/03/2009</a>
924											
925
926	
927					<div>
928						<p>That is not a framework, it&#39;s a technique, please stop abusing the term framework before it ends up meaning nothing. <span class="item-control blog-admin pid-428596001"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/8865273414385565189" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
929					</div>
930				</li>
931		
932   
933					
934				<li type="i" id="comment-7163854070566055455">
935				
936                    
937
938					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/04801854386297420021" rel="nofollow">Vladimir</a></span>
939					
940 						<span class="mono">//</span> <a href="#comment-7163854070566055455">6/03/2009</a>
941											
942
943	
944					<div>
945						<p>@Ramon: Don&#39;t kill the messenger! I didn&#39;t invent the name. I prefer calling it CSS Library. But the naming standard now is CSS Framework.<br /><br /><br />The word CSS Framework was invented by  Jeff Croft and I wrote my opinion on <a href="http://jeffcroft.com/links/2008/sep/28/natalie-downe-css-systems-for-writing-maintainable-css/#c147848" rel="nofollow">Jeff&#39;s blog </a><br /><br /><b>In my opinion CSS Framework(Library) is making high level reusable CSS code.</b><br /><br /> CSS is Not programing language so any association with other programing Frameworks is wrong.<br /><br />One true thing about word Frame-work and CSS you are always &quot;inside the&quot;frame&quot; and if you want something specific you <a href="http://www.vcarrer.com/2008/08/when-to-use-css-framework.html" rel="nofollow">must write your CSS code</a>. <span class="item-control blog-admin pid-62779914"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/7163854070566055455" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
946					</div>
947				</li>
948		
949   
950					
951				<li type="i" id="comment-5653934449549652345">
952				
953                    
954
955					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<span class="anon-comment-author">Anonymous</span></span>
956					
957 						<span class="mono">//</span> <a href="#comment-5653934449549652345">6/03/2009</a>
958											
959
960	
961					<div>
962						<p>&quot;And paragraphs for text,images and everything else&quot;?  Seriously?  Yecch!<br /><br />I admit this is cool, and proves you can tackle difficult layouts with a minimal amount of CSS, but why not use paragraph tags for paragraps, image tags for images (see where I&#39;m going with this?), etc?  God gave us those tags, let&#39;s use &#39;em!<br /><br />Still, neat trick :) <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/5653934449549652345" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
963					</div>
964				</li>
965		
966   
967					
968				<li type="i" id="comment-8749415284300204722">
969				
970                    
971
972					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/04801854386297420021" rel="nofollow">Vladimir</a></span>
973					
974 						<span class="mono">//</span> <a href="#comment-8749415284300204722">6/03/2009</a>
975											
976
977	
978					<div>
979						<p>@Anonymous: I&#39;m not sure what is your point? Are you suggesting one column web site with only use of paragraphs and images? No tables, no divs, no flash,no videos. Maybe I did Not understand your point.<br /><br />If I did you definitely going to like this: One div and many paragraphs :)<br /><br /><a href="http://code.google.com/p/better-web-readability-project/" rel="nofollow">Better Web Readability Project </a> <span class="item-control blog-admin pid-62779914"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/8749415284300204722" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
980					</div>
981				</li>
982		
983   
984					
985				<li type="i" id="comment-2284159655177250552">
986				
987                    
988
989					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/03648307304177325278" rel="nofollow">HoyaBaptiste</a></span>
990					
991 						<span class="mono">//</span> <a href="#comment-2284159655177250552">6/04/2009</a>
992											
993
994	
995					<div>
996						<p>Genius!! <span class="item-control blog-admin pid-397366918"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/2284159655177250552" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
997					</div>
998				</li>
999		
1000   
1001					
1002				<li type="i" id="comment-516067419344415422">
1003				
1004                    
1005
1006					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/00977653049257815122" rel="nofollow">Bung Iwan</a></span>
1007					
1008 						<span class="mono">//</span> <a href="#comment-516067419344415422">6/05/2009</a>
1009											
1010
1011	
1012					<div>
1013						<p>you&#39;re genius! <span class="item-control blog-admin pid-1984996307"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/516067419344415422" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1014					</div>
1015				</li>
1016		
1017   
1018					
1019				<li type="i" id="comment-3273401317596355301">
1020				
1021                    
1022
1023					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://www.welovewp.com" rel="nofollow">
1023Mark Gardner</a></span>
1024					
1025 						<span class="mono">//</span> <a href="#comment-3273401317596355301">6/05/2009</a>
1026											
1027
1028	
1029					<div>
1030						<p>I think this is absolutely brilliant. I love Malo too...I will find a way to implement one them on my next newsflash sites. I&#39;ve been dropping some cool newzy sites all over the place actually I have them rotating on my hosting with using a dynamic IP so it&#39;s pretty random. I dunno I just enjoy using the web in a different way. It&#39;s cool to be able to drop a newzy site with some cool info on it and then have it drop and change to another newzflash after a few clicks. This looks perfect for this. Thanx. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/3273401317596355301" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1031					</div>
1032				</li>
1033		
1034   
1035					
1036				<li type="i" id="comment-3131808047955735940">
1037				
1038                    
1039
1040					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://itechart.com/Pages/Subsections/SharePointDevelopment.aspx" rel="nofollow">SharePoint Guy</a></span>
1041					
1042 						<span class="mono">//</span> <a href="#comment-3131808047955735940">6/07/2009</a>
1043											
1044
1045	
1046					<div>
1047						<p>I don&#39;t know about it. Thanks <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/3131808047955735940" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1048					</div>
1049				</li>
1050		
1051   
1052					
1053				<li type="i" id="comment-6170415969347634910">
1054				
1055                    
1056
1057					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/16873195447040661264" rel="nofollow">Johns Beharry</a></span>
1058					
1059 						<span class="mono">//</span> <a href="#comment-6170415969347634910">6/09/2009</a>
1060											
1061
1062	
1063					<div>
1064						<p>Brilliant work man, very creative <span class="item-control blog-admin pid-1189057886"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/6170415969347634910" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1065					</div>
1066				</li>
1067		
1068   
1069					
1070				<li type="i" id="comment-712833940947122736">
1071				
1072                    
1073
1074					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://www.colorprintingwholesale.com/four_color_printing.html" rel="nofollow">Color Printing</a></span>
1075					
1076 						<span class="mono">//</span> <a href="#comment-712833940947122736">6/20/2009</a>
1077											
1078
1079	
1080					<div>
1081						<p>This is great man! I totally agree with you! I tried it myself and yeah CSS is indeed very easy to use. Thanks! <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/712833940947122736" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1082					</div>
1083				</li>
1084		
1085   
1086					
1087				<li type="i" id="comment-8481630125698811805">
1088				
1089                    
1090
1091					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<span class="anon-comment-author">Anonymous</span></span>
1092					
1093 						<span class="mono">//</span> <a href="#comment-8481630125698811805">7/26/2009</a>
1094											
1095
1096	
1097					<div>
1098						<p>Problem solving + imagination + simplicity = maths !<br />Great example Carrer ;) <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/8481630125698811805" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1099					</div>
1100				</li>
1101		
1102   
1103					
1104				<li type="i" id="comment-1447051529501590455">
1105				
1106                    
1107
1108					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;
1108<a href="http://blog.ekendraonline.com/" rel="nofollow">Eken Et</a></span>
1109					
1110 						<span class="mono">//</span> <a href="#comment-1447051529501590455">10/24/2009</a>
1111											
1112
1113	
1114					<div>
1115						<p>This is a real cool idea.<br />So nice to use your concept, I am working on modifying some codes to suit my purpose. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/1447051529501590455" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1116					</div>
1117				</li>
1118		
1119   
1120					
1121				<li type="i" id="comment-8924559735883198318">
1122				
1123                    
1124
1125					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://www.gnrgy.com/" rel="nofollow">grid</a></span>
1126					
1127 						<span class="mono">//</span> <a href="#comment-8924559735883198318">2/26/2010</a>
1128											
1129
1130	
1131					<div>
1132						<p>I also gotta admit, this is a quite innovative idea, I liked it. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/8924559735883198318" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1133					</div>
1134				</li>
1135		
1136   
1137					
1138				<li type="i" id="comment-2027674096174487078">
1139				
1140                    
1141
1142					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://www.caravan-news.co.uk/" rel="nofollow">Caravan Guy</a></span>
1143					
1144 						<span class="mono">//</span> <a href="#comment-2027674096174487078">6/20/2010</a>
1145											
1146
1147	
1148					<div>
1149						<p>The best ideas are always the simplest. The main argument against other grid systems is bloat, they try to do too much. With Google WMT speed analysis pushing us to reduce all file size if we are to adopt a css grid it needs to be small. The only downside is now I want to go and redo my latest Blueprint based site using one of your small frameworks.<br /><br />Many Thanks! <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/2027674096174487078" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1150					</div>
1151				</li>
1152		
1153   
1154					
1155				<li type="i" id="comment-377074184944992514">
1156				
1157                    
1158
1159					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://www.philippineglobaloutsourcing.com" rel="nofollow">Philippines Outsourcing</a></span>
1160					
1161 						<span class="mono">//</span> <a href="#comment-377074184944992514">7/30/2011</a>
1162											
1163
1164	
1165					<div>
1166						<p>i love the simplicity ... great job on the framework!!! <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/377074184944992514" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1167					</div>
1168				</li>
1169		
1170   
1171					
1172				<li type="i" id="comment-1763038738144249391">
1173				
1174                    
1175
1176					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<span class="anon-comment-author">Anonymous</span></span>
1177					
1178 						<span class="mono">//</span> <a href="#comment-1763038738144249391">12/03/2011</a>
1179											
1180
1181	
1182					<div>
1183						<p>En France, nous disons &quot;ce qui se concoit bien, s&#39;exprime simplement.&quot; Nice job KISS <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/1763038738144249391" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1184					</div>
1185				</li>
1186		
1187   
1188					
1189				<li type="i" id="comment-8423559916862237888">
1190				
1191                    
1192
1193					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon anon-comment-icon"><img src="https://resources.blogblog.com/img/anon16-rounded.gif" alt="Anonymous" style="display:inline;" /></span>&nbsp;<a href="http://www.namakusurya.com" rel="nofollow">Surya Adi Saputra</a></span>
1194					
1195 						<span class="mono">//</span> <a href="#comment-8423559916862237888">12/14/2011</a>
1196											
1197
1198	
1199					<div>
1200						<p>this is crazy, i never mind any body will create this.. you are briliant,.. <span class="item-control blog-admin pid-57796649"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/8423559916862237888" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1201					</div>
1202				</li>
1203		
1204   
1205					
1206				<li type="i" id="comment-4995152173362675332">
1207				
1208                    
1209
1210					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/13190729335643458295" rel="nofollow">Adam Kochanowicz</a></span>
1211					
1212 						<span class="mono">//</span> <a href="#comment-4995152173362675332">3/16/2012</a>
1213											
1214
1215	
1216					<div>
1217						<p>There&#39;s also this, which uses a similar idea but allows for &quot;thirding&quot; and not just &quot;halving&quot;<br /><br />http://adamkochanowicz.com/oneline.html<br /><br />Although maybe I&#39;ll take some tips from this an incorporate it into mine :) <span class="item-control blog-admin pid-1465444588"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/4995152173362675332" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1218					</div>
1219				</li>
1220		
1221   
1222					
1223				<li type="i" id="comment-4221336602643622293">
1224				
1225                    
1226
1227					<span class="mono">//</span> <span class="beer"><span style="line-height:16px" class="comment-icon blogger-comment-icon"><img src="https://resources.blogblog.com/img/b16-rounded.gif" alt="Blogger" style="display:inline;" /></span>&nbsp;<a href="https://www.blogger.com/profile/04801854386297420021" rel="nofollow">Vladimir</a></span>
1228					
1229 						<span class="mono">//</span> <a href="#comment-4221336602643622293">3/16/2012</a>
1230											
1231
1232	
1233					<div>
1234						<p>@Adam: Nice one! <span class="item-control blog-admin pid-62779914"><a style="border:none;" href="https://www.blogger.com/comment/delete/20880701/4221336602643622293" title="Delete Comment" ><span class="delete-comment-icon">&nbsp;</span></a></span></p>
1235					</div>
1236				</li>
1237		
1238   
1239
1240   
1241		</ol>
1242		
1243   <a class="comment-link" href="https://www.blogger.com/comment/fullpage/post/20880701/5390047367608710321">Post a Comment</a>
1244
1245
1246<br />
1247<br />
1248<a href="http://www.vcarrer.com/">&lt;&lt;
1248 Home</a>
1249
1250
1251
1252</div>
1253<div class="dl30">
1254<div class="dl25 pl3">
1255<p style="top:12px;margin-left:150px; display:block; position:absolute;">  <a href="http://feeds.feedburner.com/CarrerBlog"><img src="http://www.handdrawnicons.com/images/RSS.png" class="right" alt="RSS Icon" /></a><a href="http://twitter.com/vladocar"><img src="http://www.handdrawnicons.com/images/Twitter.png" alt="Twitter icon" class="right" /></a>
1256<a href="http://dribbble.com/vladocar"><img src="http://www.handdrawnicons.com/images/Dribbble.png" alt="Twitter icon" class="right" /></a>
1257<a href="https://github.com/vladocar"><img src="http://www.handdrawnicons.com/images/GitHub1.png" alt="Twitter icon" class="right" /></a>
1258</p>
1259	<h3 class="tr bline1 oldbook">  About Me<span class="mono small"> <<< </span></h3>
1260   <p> Name: Vladimir Carrer <br />
1261vladocar [at] gmail.com <br />
1262    Location: Verona, Italy <br />
1263
1264I'm a web designer, developer, teacher, speaker, generally web addicted  <a href="http://www.blogger.com/profile/04801854386297420021">...</a>
1265</p>
1266	
1267
1268	
1269	
1270		<h3 class="tr bline1 oldbook">My projects<span class="mono small"> <<< </span></h3>
1271    <ul class="gridlines">
1272<li><a href="https://www.aipromptsdirectory.com/">AI Prompt Directory</a></li>
1273<li><a href="http://www.handdrawnicons.com/">Hand Drawn Icons</a></li>
1274    	<li><a href="https://www.designinspiration.info">Font Design Inspiration</a></li>
1275      <li><a href="http://fontpairings.com">Font Pairings</a></li>
1276      <li><a href="https://www.joysvg.com">Free SVG Cut File</a></li>
1277      <li><a href="https://www.upcomingnfts.info">Upcoming NFT projects</a></li>
1278      <li><a href="https://www.distuts.com">Discord Tutorials</a></li>
1279      <li><a href="https://www.freesublimationdesign.com">Free Sublimation Designs</a></li>
1280    	
1281<li><a href="https://www.techfeed.info/">Tech Feed</a></li>
1282<li><a href="http://code.google.com/p/mysql-lite-administrator/">MySQL Lite Administrator</a></li>
1283<li><a href="http://code.google.com/p/quark-php/">Quark Mini PHP CMS</a></li>
1284<li><a href="http://code.google.com/p/formy-css-framework/">Formy - CSS Form Framework</a></li>
1285<li><a href="http://code.google.com/p/emastic">Emastic - CSS Framework</a></li>
1286<li><a href="http://code.google.com/p/malo">Malo - CSS Library</a></li>
1287<li><a href="http://code.google.com/p/the-golden-grid/">The Golden Grid</a></li>
1288<li><a href="http://www.vcarrer.com/2009/06/1-line-css-grid-framework.html">1 line CSS Grid Framework</a></li>
1289<li><a href="https://github.com/vladocar/Two-Lines-CSS-Framework">Two Lines CSS Framework</a></li>
1290<li><a href="http://code.google.com/p/child-selector-css-system/">Child Selector System - CSS Framework</a></li>
1291<li><a href="http://code.google.com/p/better-web-readability-project/">Better Web Readability Project</a></li>
1292<li><a href="http://code.google.com/p/azbuka/">Azbuka - CSS Typographical Base Rendering Library</a></li>
1293<li><a href="http://code.google.com/p/clipr/">ClipR - bookmarklet for better reading</a></li>
1294<li><a href="http://code.google.com/p/css3-action-framework/">CSS3 Action Framework </a></li>
1295<li><a href="http://github.com/vladocar/CSS-Mini-Reset">CSS Mini Reset</a></li>
1296<li><a href="http://github.com/vladocar/HTML5-Mini-Template">HTML5 Mini Template</a></li>
1297<li><a href="https://github.com/vladocar/CSS-Mobile-Reset">CSS Mobile Reset</a></li>
1298<li><a href="https://github.com/vladocar/picoCSS">picoCSS - JavaScript Framework</a></li>
1299<li><a href="https://github.com/vladocar/HTML-Lorem-Ipsum-Crash-Test">HTML Lorem Ipsum Crash Test</a></li>
1300<li><a href="https://github.com/vladocar/AutoObjectDocumentation">Object Auto Documentation - JavaScript</a></li>
1301<li><a href="https://github.com/vladocar/o---JS-Library-for-Object-Manipulation">o - JS Library for Object Manipulation</a></li>
1302<li><a href="https://github.com/vladocar/Foxy-CSS-Framework">Foxy - CSS Framework</a></li>
1303<li><a href="http://www.tumblr.com/theme/17806">Tumblr Free Theme - Better Readability Project</a></li>
1304<li><a href="https://github.com/vladocar/Box-CSS-Framework">Box - CSS Framework</a></li>
1305<li><a href="https://vladocar.github.io/SMART-CSS-GRID/">SMART CSS GRID</a></li>
1306<li><a href="https://vladocar.github.io/nanoJS/">nanoJS - Minimal JS DOM Library</a></li>
1307<li><a href="https://vladocar.github.io/flexy/">Flexy CSS Framework</a></li>
1308<li><a href="https://vladocar.github.io/Katana/">Katana is CSS Layout System made with Flexbox</a></li>
1309<li><a href="https://github.com/vladocar/CSS-Micro-Reset">Micro CSS Reset</a></li>
1310<li><a href="https://vladocar.github.io/60gs/">60 Grid System</a></li>
1311<li><a href="https://vladocar.github.io/Simple-Button/">Simple CSS Button</a></li>
1312<li><a href="https://github.com/vladocar/ramd.js">ramd.js JavaScript library for making web applications.</a></li>
1313<li><a href="https://github.com/vladocar/Minimal-Notes">Minimal Notes web app build with Vue.js</a></li>
1314<li><a href="https://github.com/vladocar/Scribble-Font">Scribble Font for Prototyping & Wireframing</a></li>
1315<li><a href="https://vladocar.github.io/Flex-One/">Flex One - 1 CSS Class System</a></li>
1316<li><a href="https://vladocar.github.io/floaty/">Floaty - CSS Float Based Layout System</a></li>
1317<li><a href="https://vladocar.github.io/infinity-css-grid/">Infinity CSS Grid</a></li>
1318
1319<li><a href="https://github.com/vladocar/PDFSave">CLI Convert websites into readable PDFs</a></li>
1320<li><a href="https://github.com/vladocar/keywordsextract">keywords-extract - CLI tool, extract keywords from any web page.</a></li>
1321<li><a href="https://github.com/vladocar/screenshoteer">screenshoteer - Make website screenshots and mobile emulations from the command line.</a></li>
1322<li><a href="https://github.com/vladocar/Basic.css">Basic.css -  Classless CSS Starter File</a></li>
1323  </ul>
1324
1325  <h3 class="tr bline1 oldbook"><span class="medium">§§</span>Previous Posts<span class="mono small"> <<< </span></h3>
1326    <ul class="gridlines">
1327    
1328        <li>
1328<a href="http://www.vcarrer.com/2009/05/o-rule-golden-proportion-for.html">O rule + golden proportion for calculating the gut...</a></li>
1329     
1330        <li><a href="http://www.vcarrer.com/2009/05/how-we-read-on-web-and-how-can-we.html">How we read on web and how can we improve that</a></li>
1331     
1332        <li><a href="http://www.vcarrer.com/2009/05/geo-twitter-ll.html">Geo Twitter (#ll)</a></li>
1333     
1334        <li><a href="http://www.vcarrer.com/2009/04/handcrafted-css-html-grid-calendar-2009.html">Handcrafted CSS + HTML Grid Calendar 2009</a></li>
1335     
1336        <li><a href="http://www.vcarrer.com/2009/04/is-it-time-to-move-beyond-960-not-yet.html">Is it time to move beyond 960? Not yet</a></li>
1337     
1338        <li><a href="http://www.vcarrer.com/2009/04/twitter-compressor.html">Twitter Compressor</a></li>
1339     
1340        <li><a href="http://www.vcarrer.com/2009/03/twitter-is-not-about-you-it-is-about.html">The Twitter is not about you, it is about the comm...</a></li>
1341     
1342        <li><a href="http://www.vcarrer.com/2009/03/google-redesign-google-in-grid.html">Google redesign (Google in a grid)</a></li>
1343     
1344        <li><a href="http://www.vcarrer.com/2009/03/f-pattern-or-just-simple-triangle.html">F pattern or just simple triangle</a></li>
1345     
1346        <li><a href="http://www.vcarrer.com/2009/02/golden-grid.html">The Golden Grid</a></li>
1347     
1348  </ul>
1349<div class="dl25">
1350<a href="http://www.handdrawnicons.com"><img src="http://www.handdrawnicons.com/images/banner-hand-drawn-icons.png" style="border:1px solid #ccc; margin-bottom:10px" alt="Hand Drawn Icons"/></a>
1351</div>
1352
1353
1354<div class="dl25">
1355<a href="https://www.amazon.com/dp/B01H27TZXG" target="_blank"><img width="300px" border="0" src="https://images-na.ssl-images-amazon.com/images/I/71cWiN%2BH3VL._UX466_.jpg" ></a>
1356</div>
1357<div class="dl25">
1358<a href="https://www.amazon.com/dp/B01J61E7DO" target="_blank"><img width="300px" border="0" src="https://images-na.ssl-images-amazon.com/images/I/812edvZ3UeL._UL1500_.jpg" ></a>
1359</div>
1360
1361<div class="clear">&nbsp;</div>
1362	
1363
1364	
1365	
1366
1367		<h3 class="tr bline1 oldbook">Other Profiles <span class="mono small"><<< </span></h3>
1368    <ul class="gridlines">
1369    	<li><a href="http://twitter.com/vladocar">Twitter</a></li>
1370<li><a href="https://github.com/vladocar">GitHub</a></li>
1371<li><a href="http://dribbble.com/vladocar">Dribbble</a></li>
1372<li><a href="http://dzone.com/users/vladocar">Dzone</a></li>
1373<li><a href="https://plus.google.com/100906093071985825940/posts">Google + </a></li>
1374<li><a href="http://www.flickr.com/photos/vladocar/">Flickr</a></li>
1375
1376
1377  </ul>
1378
1379<a href="http://www.linkedin.com/in/vladocar?goback=%2Esrp_1_1206380747789_in" ><img src="http://www.linkedin.com/img/webpromo/btn_myprofile_160x33.gif" width="160" height="33" border="0" alt="View Vladimir Carrer's profile on LinkedIn"></a>
1380 
1381<br />
1382
1383	<p><a href="http://www.dzone.com/aboutmvb"><img src="http://www.dzone.com/sites/all/files/big-mvbbutton.png" /></a></p>
1384
1385
1386<script type="text/javascript"><!--
1387google_ad_client = "ca-pub-0316081000391490";
1388google_ad_host = "pub-1556223355139109";
1389/* vcarrer */
1390google_ad_slot = "0929188486";
1391google_ad_width = 234;
1392google_ad_height = 60;
1393//-->
1394</script>
vendor: 1 bytes, line 1394
1394
1395<script type="text/javascript"
1396src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
1397</script>
1397
1398	</div>
1399	
1400</div>
1401	
1402	
1403
1404
1405<div class="hp "><p class="pepper-lite tc">Content is licensed under a Creative Commons Public Domain License  </p></div>
1406</div>
1407
1408</body>
1409</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.