MyCSS Grid System
July 7th, 2009 in Articles, News by kailoonThis is my first attempt to create my own CSS Grid System – MyCSS Grid System. I notice that there are a few useful CSS Grid System out there but it is a shame while I never use them. I know it is useful and especially when you work for a company. They prefer to have all this thing well documented. It us good for company future development.
Why I Create This While I Can Download Others?
I am so stubborn, I don’t want to follow others! ( just kidding ). I notice that most of the CSS Grid System have lots of extra classes of elements. It is good and handy but is it really useful for your project? So, I try to create a very simple CSS Grid System just for blog or small website. So, this can be a little different from what you see in other popular framework. You can find all popular css grid system from the Grid System Generator.
Introduction
MyCSS Grid System is using the maximum of 960px width. It comes with the most common layout proportion for blogs and creative web sites. It is also using the best divine proportion in web design. This may not that useful compare to those well built css grid system but I think it somehow do the job.
How It Works?
In the download files, there are:
- index.html
- grid.css
- format.css
You can start coding your project by including the grid.css.
Codes Preview
The grid.css, I am using my name as the first and the last div (Easy to remember, every time you use this system, you will remember my name! Hehe.. So, the first div from the left has a class name “kai”, the last div on the right will has a class name “loon”. So, “kailoon to complete the work!”.
* { /* CSS reset, you can replace with your own css reset codes*/ margin: 0; padding: 0; } .b1 { width: 640px; } .b2 { width: 300px; } .b1 .b1 { width: 310px; } .g1 { width: 580px; } .g2 { width: 360px; } .g1 .g1 { width: 280px; } .g2 .g2 { width: 170px; } .col { float: left; margin: 0 10px; display: inline; } .box { margin: 0 auto 20px; width: 960px; } .kai { /* The first left component*/ margin-left: 0; } .loon { /* The last right component*/ margin-right: 0; } .clearfix:after { clear: both; content: ' '; display: block; font-size: 0; line-height: 0; visibility: hidden; width: 0; height: 0; } .clearfix { display: inline-block; } * html .clearfix { height: 1%; } .clearfix { display: block; }
The HTML:
<div class="box clearfix"> <h1>960px - Normal Blog Layout</h1> <p>960px</p> </div> <div class="box clearfix"> <div class="col b1 kai"> <p>640px</p> </div> <div class="col b2 loon"> <p>300px</p> </div> </div> <div class="box clearfix"> <div class="col b1 kai"> <div class="col b1 kai"> <p>310px</p> </div> <div class="col b1 loon"> <p>310px</p> </div> </div> <div class="col b2 loon"> <p>300px</p> </div> </div> <div class="box clearfix"> <h1>960px - Golden Divine Proportion Layout</h1> <p>960px - The Golden Divine</p> </div> <div class="box clearfix"> <div class="col g1 kai"> <p>580px</p> </div> <div class="col g2 loon"> <p>360px</p> </div> </div> <div class="box"> <div class="col g1 kai"> <div class="col g1 kai"> <p>280px</p> </div> <div class="col g1 loon"> <p>280px</p> </div> </div> <div class="col g2 loon"> <div class="col g2 kai"> <p>170px</p> </div> <div class="col g2 loon"> <p>170px</p> </div> </div> </div>
Conclusion and Download
It is simple and easy to use as it is very specific. The CSS file size is extremely small, only 778 bytes!. You can preview the demo here. If you have any questions or you find any bugs or you have any suggestions, please feel free to leave a comment. If you find this useful, let me see how / where you implement it. Thanks!
Thanks for sharing gonna use this one in future projects…
Useful & easy. Thanks.
This is a pretty nice, basic grid system. Not to much over the top, just the essential. I’ll give it a try myself, thanks!
Thanks kailoon, i will give it a try….
Easy to use and well coded. Thanks for this.
sounds gud..im eager to try it.
I’ll try this one, to si if its usefull for my kinda work
Ty kailon… going to save on my fav! this is very help full info. :D
you got also this website about grids, you may check it also : http://960.gs
regards,
José
That’s great :) we can out theme (first) forest (last) xD thanks Kai
Haha … good :)
I meant “we can name our class theme (first) forest (last)” sorry for the typo :P
:x
Great information. It’s really useful. Thanks
I’m curios if I will manage to build a bigger audience for my Windows Vista for Beginners portal.
Hi kailoon,
I really like your website designs and i have a freelance project for you if you’re interested. I tried to use your contact page, but when I click on the send quotation, nothing happens, so I’m not sure if you got my quotation requests. Anyway do drop me an email if you’re interested.
Hope to hear from you soon.
Cheers,
Adrian
Muy buen blog de diseño! great blog! thanks from Argentina.
really helpful. thanks
I might use this also for my next templates. They are simple yet elegant. You gave me a hint to re-structure my free template that should be schedule to launch.
Thanks for this wonderful post. :)
Rather interesting. Has few times re-read for this purpose to remember. Thanks for interesting article. Waiting for trackback
Dude! That’s so cool. You should just named it as Kailoon CSS Grid System. :)
I would be extremely interested if you are creating a whole css framework, which includes the typography and some other stuff as well.
Ah… I want to do that too. Later la :P
That’s just cool mate, thanks for sharing it…although classes could use more friendly names :)
Ya, I know. But you can simply change the class name if you don’t like it :P I am just trying to make it interesting :)
Having my name as classes, kinda cool :P
Nice class names! :-)
When’s ruby coming to join the party…? :-)
Thanks :)
Still learning, kinda hard for me :P