Tired of searching for a simple, really customizable and powerful grid system? Look no further.

Download Now Version 1.1.0
iPhone

What the fuck?!

I know what you are thinking right now... "Why have you developed another fuckin grid system...". The answer is easy. Because each grid system out there have cool features, but none of them includes all. This is why Gridle is all about...

Fully featured

12, 8 or 33 columns, Gridle allows you to generate all the grids you want, with all the features you need (push, pull, prefix, hide-on, etc...)

Insanely responsive

Gridle is built to be excellent in responsive development. It provides a robust and simple system to handle media queries with ease.

Easy to use

Gridle is a set of complete and simple settings, mixins and classes that make the creation and usage of grid systems (even complex ones) really simple.

_settings.scss
// import gridle
@import "gridle/gridle";

// setting up the grid
$gridle-columns-count : 12;
$gridle-gutter-width : 20px;
// and many more options like...
// $gridle-debug => display debug colors
// $gridle-direction => support for ltr, rtl
// etc...

// make the use of media queries really easy
@include gridle_register_state ( 'mobile' , null , 480px );
@include gridle_register_state ( 'tablet' , 481px , 1024px );

// even with full custom queries :
@include gridle_register_state ( 'land', '(orientation : landscape)' );

grid.scss
// import settings :
@import 'settings';

// generate classes :
@include gridle_generate_classes ( );

// manage container width :
.container {
	max-width : 960px;
	margin : 0 auto;
}
index.html
<!-- 
- If want to use mixins, no need to add classes 
-->
<div class="container">
	<div class="grid-12" id="header">
		I'm the header, 12 columns width
	</div>
	<div class="grid-8 grid-mobile-12" id="content">
		I'm the content, 8 columns width, but 12 on mobile
	</div>
	<div class="grid-4 grid-mobile-12" id="sidebar">
		I'm the sidebar, 4 columns width, but 12 on mobile
	</div>
</div>
style.scss
// import settings :
@import 'settings';

#header {
	@include gridle ( 12 );
}
#content {
	@include gridle ( 8 );
	@include gridle ( 12 , 'mobile' );
}
#sidebar {
	// sidebar will make 4 columns width
	@include gridle ( 4 );
	@include gridle ( 12 , 'mobile' );
	background : yellow ;

	// update sidebar look and feel for mobile and tablet
	@include gridle_state (  mobile tablet  ) {
		background : red;
	}
}

Package{.zip}

Download the Gridle package with demo files and all you need to get started right here!

Download ZIP

Ruby Gem

Need a simple way to install and update Gridle, use the Gridle Ruby Gem available by taping :

Bower

Another simple way to install and update Gridle, use the Gridle Bower Component available by taping :

Gridle{.newsletter}

Want to be notified of new versions, new features or whatever I want to tell you? Let's subscribe right here!

Subscribe
Need more control?
Gridle{.js} is here for you
Coming soon
Documentation

An easy & complete documentation

A good framework is a documented framework. That's why Gridle has his own full and easy documentation. No need to be an advanced developper to use it.

Access full documentation

Some
Examples

As a passionate interactive web designer, I'd love to see what you can build with Gridle. Feel free to share your realisations here...

Copyright © 2014 Olivier Bossel This content is released under the MIT License.
Fork me on GitHub