Actually, let’s do a fair comparison… take their simple demo page which consists of the following files:
The Semantic Grid System | Fixed-width Example = 883 bytes
http://semantic.gs/examples/fixed/fixed.less = 603 bytes
http://semantic.gs/css/reset.less = 1062 bytes
http://semantic.gs/css/grid.less = 861 bytes
http://semantic.gs/css/demo.less = 438 bytes
http://semantic.gs/js/less-1.1.3.min.js = 33.9k
So that’s six files in 37.7k – about 2k of which is what the coder had to write… let’s redo it using a RECOMMENDATION doctype, PROPER separation of presentation from content, and normal CSS. Just to make it as fair as possible I’ll use XHTML 1.0 with ALL the extra stuff that HTML 5 supposedly “saves you time not having to do” since I’m going to be axing a few elements. I’ll also toss in some closing comments:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
lang="en"
xml:lang="en"
><head>
<meta
http-equiv="Content-Type"
content="text/html; charset=utf-8"
/>
<meta
http-equiv="Content-Language"
content="en"
/>
<link
type="text/css"
rel="stylesheet"
href="screen.css"
media="screen,projection,tv"
/>
</head><body>
<div id="pageWrapper">
<h1>
<a href="http://semantic.gs/">
The Semantic Grid System
</a>
</h1>
<div id="content">
<h2>Main</h2>
<!-- #content --></div>
<div id="sidebar">
<h2>Sidebar</h2>
<!-- #sideBar --></div>
<!-- #pageWrapper --></div>
</body></html>
751 bytes, so our markup is certainly smaller… Their demo being a PERFECT example of why I think elements like HEADER are pointless wasteful bloat and HTML 5 so far as markup is concerned is nothing more than “because we could” instead of “because it’s better”.
Then identical functioning CSS as a single file. Again to try and give their approach as much advantage as possible, I’ll code in some IE5 support… and bother with things they skipped like say… fallback font-families?
/* null margins and padding to give good cross-browser baseline */
html,body,address,blockquote,div,
form,fieldset,caption,
h1,h2,h3,h4,h5,h6,
hr,ul,li,ol,ul,
table,tr,td,th,p,img {
margin:0;
padding:0;
}
img,fieldset {
border:none;
}
body {
text-align:center; /* center #pageWrapper IE 5.x */
}
#pageWrapper {
overflow:hidden; /* wrap floats */
width:960px; /* also trips haslayout, so IE is float wrapping */
margin:0 auto;
}
h1 {
padding:1em;
margin:0 10px 20px;
text-align:left;
font:normal 200%/120% georgia,times,serif;
color:#FFF;
background:#000;
}
h1 a {
text-decoration:none;
color:#FFF;
}
h2 {
font:normal 150%/120% georgia,times,serif;
padding:5.25em 0;
}
#content,
#sidebar {
float:left;
display:inline; /* prevent IE margin bugs */
width:220px;
color:#666;
background:#CCC;
}
#content {
width:700px;
margin:0 20px 0 10px;
}
Which comes out to 924 bytes. Where’s the big savings in effort or code from using that nonsense again? Especially since their example breaks javascript off, their example doesn’t work in IE7 or lower due to faulty CSS, etc, etc… When mine works just fine all the way back to IE 5.01
… and of course i can SHOCK easily make it a fluid layout, something NONE of these idiotic grid systems can even attempt to do… I can send print an entirely different layout since I’m targeting things by what they ARE, NOT what they look like.
Notice that even if we omit the javascript AND the grid framework AND their reset – I’m still using less code overall… 1,924 bytes for their html, demo.css and fixed.css combined vs. 1,729 for mine… with mine not needing the additional 34+k of framework bloat. It’s honestly why I think the people who come up with these types of systems to make things “easier” have failed to grasp how HTML and CSS even work in the first place! This is why whenever I see things like <div class=“center”> I feel like screaming at them “At that point just go back to coding HTML 3.2 as apparently that’s all you’re good at!”
Someone needs to explain to the nimrods who come up with these types of garbage exactly what semantic markup IS. It takes giant bronzed monkey cojones to call that grid system of theirs “semantic” – as if that’s what they think it means, they need to do the world a favor, back the devil away from the keyboard, and go take up something a bit simpler like bocce or horseshoes.