Categories
CSS Designing Developing

I have been working with a few frameworks recently and I figured I would take the time and develop something that suited the need of a finicky client. Yes, it seems like nearly all the things I do are at the behest of a finicky client. So this Grid layout responsive, and smart enough for changes on the fly. (and I do mean on the fly). I have developed a github repo so that hopefully once I find ways to make this better I will. For now its at 0.5 beta version and can be had from github page: sass smart grid framework

The below code is take from the example grid’s base css file. This is one of the nested grids which shows you both core features of framework. Take a look in smart_grid scss to see all other utility functions and mixins.


.subgrid2{
	background: none !important;
	margin: 0;
	@include container();
	@include clearfix();
	margin-left: $container_margin !important;
	margin-bottom: $container_margin !important;
	padding: 0px;
	.subcol1{
		@include place($total_columns/12);
	}
	.subcol6{
		@include place($total_columns/2);
	}
	@include generate_grid_positions(div, $total_columns/12);

	.subcol6:nth-child(1){
		@include push(0);
	}
	.subcol6:nth-child(2){
		@include push($total_columns/2);
	}
}

notice the pushing and the placing. Also one thing to distinguish from the other grids out there is mine is context based for the moment. Notice how you place in @include generate_grid_positions(div, $total_columns/12); That code means: generate grid css for div elements and each will take up the space 1/12 the total columns. This is more for your readability so that we can forward semantic markup.

Leave a Reply

Your email address will not be published. Required fields are marked *

Rate post *

What others are saying