Responsive Frameworks: rwdgrid & Toast

rwdgrid – Responsive Grid System for your Next Project

It’s just another grid system!

rwdgrid – Responsive Grid System for your Next Project

rwdgrid is just another Grid system based on popular 960grid , which is responsive and ranges from mobile, tablet, laptops and wide screen displays. Naming convention of this grid system is similar to 960 grid system, where underscore is replaced by hyphen (increases readabilty).rwdgrid is having different Grid system made for 1200px+ Displays, 960px+ Displays, 720px+ Displays and Mobile screens. This can be used as a base grid system that will help you to build responsive webdesign with your existing proficency over popular grid systems.?

What makes it special?

  • HTML5 Boilerplate Head
  • Similar to 960grid naming convention
  • Works in all major browser [ IE7+, Firefox, Chrome, Safari ]
  • Maximum width ranges to 1200px
  • Included only CSS reset, No base styles included.
  • 12col & 16col ready, PSDs included
  • Free to download and use or abuse!

Demo Download

Toast- A Simple CSS Framework

A reset. A grid. Type styles. That’s it.

Toast - Responsive Grid System for your Next Project

Toast is a CSS framework as simple as it can be, but no simpler. A twelve column responsive grid makes layouts a breeze, and with box-sizing you can add padding and borders to the grid, without breaking a single thing.

No floats, no clearfix; no worries.

By using display: inline-block, Toast saves the headache of clearing floats, and allows you to use floats what they were originally intended for – not for laying out websites.

Device friendly – from mobile to the big screen.

Toast includes two main states – a single column layout for narrow screen and mobile devices, and a 12 column layout up to 960px. It’s super easy to adjust Toast for your own needs – simply change the min-width in grid.css, or write your own media queries for the screen sizes you want.

IE7 is dead – long live IE8.

Using pain-free CSS properties like box-sizing and display: inline-block hasn’t come without it’s sacrifices; Toast only supports Internet Explorer 8 and up. But that’s OK – you don’t like old IE7 much anyway, do you?

As simple as possible, but not simpler

On top of all this, Toast includes a modified version of Normalize.css, as well as type styles based on a 24-pixel baseline. Every feature in Toast is in it’s own CSS file, so you can pick and choose which parts you like. Simply edit the toast.css file to import the modules you need.

Demo Download on Github