The Splendiferously Responsive Grid System.
After building a responsive ecommerce site for Lovehoney, I decided to build my own responsive CSS framework from the ground up. Surprisingly I managed it in about 2 hours and thanks to the power of Less CSS it is pretty neat too. Perhaps I should call it the 2 hour grid system. Clearly naming things isn't my strong point.
As this is a personal project, please don't expect it to work in antique browsers like IE6, 7, 8 or well it probably works in IE9 and 10.
Feel free to use this code, it would be nice to know if anyone makes use of it on a live site.
- You can set the Desktop, tablet and mobile sizes independently of each other with class names on the parent elements.
- Each Parent element can have an infinite number of child elements that automatically wrap, making it ideal for ecommerce websites.
- The markup is very lightweight.
- The CSS is built with less so you can customize the CSS very easily.
- The size of the margins decreases to balance out the amount of white space on mobile devices.
- Even the media query breakpoints are built with variables and are customizable.