Here again, I just want to introduce about the css grid system framworks, base on the css3 and html5 with could free-friendly use for the responsive websites. Here, I recommend 6 of them, but honestly, I only used 3 of those, which one is better? well, it depends what kind of your website need, mostly it easy your coding work.A well-built CSS framework or boilerplate can streamline the design process, save huge chunks of development time and ensure your website scales properly on all devices. That’s take a look as follow:
Foundation uses “box-sizing: border-box,” so that borders and padding do not affect the overall width of the columns, making the math dead simple. With the mobile-first approach, the content is automatically stacked by default. There is also access to a separate small grid up to the 768px breakpoint.
that’s view the example of the foundation website:
It’s real grid friendly using as easy as just define the div, well, our vacha-design website is certainly using boostrap.
Of interest is Frameless, also built by Joni Korpi, which uses a fixed-width grid rather than a fluid grid. It is the “spiritual successor” to the Less Framework. It’s a much simpler, more flexible idea that can easily integrate into your workflow.
The example of using lessframwork website:
This could be the most well-know framwork , which could be use for big-data website like Australia Post, Entertainment Weekly, or as small as presentation website. so the founction could be as the same as upper examples. You could read quick usage from githut.
and here is the example website with simply presentation site:
5. Responsive Grid System:
A quiet simple CSS framework for fast, intuitive website development, the Responsive Grid System is built using the mobile first approach, and is less than 1KB compressed. There’s no need to hack in any offsets or marginless final columns. It’s the last time you need to use .last and the end of .end. And this is Content first, Instead of fitting your content to your grid, you can make your grid suit your content.
Here is the example website:
Skeleton is a small collection of CSS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. I had been touch this one by our project : fabbrica website. But this website, we had occurred serious cookies problem and java script conflict problem, so a polyfill like Respond.js would be required.
Here is the example by skeleton: