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 “1 line CSS Grid Framework” </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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>
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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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"> </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> <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't be build mostly of CSS hacks.<br />Float property were never meant to build columns - you should use 'inline-block' 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 "right" ;-) <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"> </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> <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'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"> </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> <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't kill the messenger! I didn'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'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 "inside the"frame" 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"> </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> <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>"And paragraphs for text,images and everything else"? 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'm going with this?), etc? God gave us those tags, let's use '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"> </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> <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'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"> </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> <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"> </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> <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'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"> </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> <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'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's pretty random. I dunno I just enjoy using the web in a different way. It'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"> </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> <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'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"> </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> <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"> </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> <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"> </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> <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"> </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>
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"> </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> <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"> </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> <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"> </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> <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"> </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> <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 "ce qui se concoit bien, s'exprime simplement." 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"> </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> <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"> </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> <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's also this, which uses a similar idea but allows for "thirding" and not just "halving"<br /><br />http://adamkochanowicz.com/oneline.html<br /><br />Although maybe I'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"> </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> <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"> </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/"><<
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"> </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.