Gridiculo.us Css framework

http://gridiculo.us/

Gridiculous starts off at 1200px and works itself down to 320px.

But also has the ability to not be locked into always having to start with 1200px.

You can even space out your columns, create nested columns all the while making sure your images and videos remain fully responsive no matter what screen size.

Start things off with a tag that uses the “grid” class. I’m going to use a div for the example but it could be any tag you want:

<div class="grid">

</div>

Next, add another container with the "row" class. I'll include one of the width classes in the main "grid" container so you can see what it would look like.
<div class="grid w960">
	<div class="row">

	</div>
</div>

Now we can start putting together our grid. I want to create 8 columns for my main content and 4 columns for my sidebar. Adding the "end" class isn't a must though it does create a smooth right alignment edge to the row:
<div class="grid w960">
	<div class="row">
		<div class="c12"></div>
	</div>

	<div class="row">
		<div class="c8"></div>
		<div class="c4 end"></div>
	</div>

	<div class="row">
		<div class="c12"></div>
	</div>
 Some of the main features of Gridiculous:
  • Based on a twelve columns grid
  • Max site widths of 1280px, 960px, 640px, 320px and full width
  • Allows for nested columns
  • Spacer columns available
  • Fully responsive images
  • Responsive typography
  • Works on desktops, tablets and smart phones
  • Optimized for iPads and iPhones
  • Includes Normalize.css by Nicolas Gallagher and Jonathan Neal

Playing around in dreamweave with Gridiculo.us:

Screen shot 2012-12-06 at 11.22.25Screen shot 2012-12-06 at 11.23.28Screen shot 2012-12-06 at 11.23.40

 

Screen shot 2012-12-06 at 12.22.44Screen shot 2012-12-06 at 12.24.22Screen shot 2012-12-06 at 12.25.36

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s