Taking Semantic.gs for a testspin

Posted on by KrooKedUK

Semantic Grid system

I thought I’d follow up from one of my previous posts CSS Grids & Responsive Frameworks by having a play around with Semantic.gs; this will give me a little exposure to LESS and it will be interesting to see how this grid system stacks up!

This post isn’t intended as an in depth look at how to use Semantic.gs, it’s main purpose is to show you the minimal amount of code you need to write in order to create a fairly complex layout.

I experimented with a fixed and a responsive fluid layout, the reason being that the documentation makes it seem very simple to switch between using pixels and percentages and I wanted to give it a go. To start using percentages I just had to add the following to my LESS file:

@total-width: 100%;

This overrides the variable, which by default is set to:

@total-width: @_gridsystem-width;

I’m not going to delve into any more detail about the default values, as the purpose of this post is not to explain the inner workings of the Grid system.

A look at the layouts

The HTML layouts will give you a better idea of what I’m talking about, you should have a look around in the source of the fixed pixel layout, if you are that way inclined, as I will not be covering it in this post; Like I mentioned earlier this was my own experiment to see how easy it would be to change the layout to use percentages instead of pixels.

Let me show you how simple it is

I didn’t need to change the default grid settings, so they just stay like so:

@column-width: 60;
@gutter-width: 20;
@columns: 12;

To make the grid system work with percentages we override the total-width variable like so:

@total-width: 100%;

Then you simply define the amount columns you wish an element to use in the .column() mixin.


#top{
  .column(12);
}

.larger-block {
  .column(4);
}

.block {
  .column(3);
}

.smaller-block {
  .column(2);
}

At this stage, we now have a fully fluid grid and this has all been achieved by writing a minimal amount of code. Ok, the next step is to make it responsive, so let’s break out the media queries. I’m just going to show you the media queries for mobile devices, as you only need one example to understand what’s going on.

@media screen and (max-width: 480px) {

	#wrap{
	  width: 100%;
	}

	.larger-block {
	  .column(12);
	}

	.block {
	  .column(12);
	}

	.smaller-block {
	  .column(12);
	}

}

You’ve probably guessed what I’m doing in the above code. If you haven’t, I’ll explain: To create a 1 column layout I want the elements to use all of the horizontal space available to them i.e the 12 columns. This means the elements will stack on top of each other creating a simple layout optimised for mobile devices.

I don’t think I’ve come across any other framework which allows you to create a fairly complex layout as quickly and effortlessly as Semantic.gs does. I will definitely be making use of this grid system in the future and recommending it to others.

This entry was posted in Design. Bookmark the permalink.