Today, I’ve been playing around with SASS and absolutely loving it! The amount of things that’s possible with it is incredible and a total time saver, anyhow, I decided to build CSS Wizardry’s fluid grids in SASS for use on a few projects, why? Well, Fluid Grids are awesome, secondly it’s a lot more semantic thana having grid-3 etc in your markup, as you might have seen with semantic.gs.

I thought a few others might benefit from it so here it is on Github along with a little wordpress template, that’s roughly based on the template that I use for my projects.

Please note, this was thrown together very quickly! So I’ve probably done something really stupid, I should manage to get another look at it later this week, but until then here’s how it basically works.

The code behind it is:

$total-columns:12;
$grid-width:60;
$gutter-width:20;

@mixin wrapper ($total-columns, $grid-width, $gutter-width) {
margin:0 auto;
$padding: $gutter-width / 2;
$max-width:(($total-columns*$grid-width)+($total-columns*$gutter-width))-($padding*2)+px;
padding: $padding+px;
max-width: $max-width;
}

@mixin grids ($total-columns, $grid-width, $gutter-width) {
$total: $total-columns * ($grid-width + $gutter-width);
max-width: $total+px;
width:auto;
clear:both;
margin-top:0px;
margin-left:0px;
margin-bottom:0px;
margin-right:-(($gutter-width / $total) * 100%);
list-style:none;
overflow:hidden;
}

@mixin column ($total-columns, $grid-width, $gutter-width, $grid) {
$total: $total-columns * ($grid-width + $gutter-width);
$gutter: (($gutter-width / $total) * 100)*($grid - 1);
width: (((($grid-width / $total)*$grid) * 100%)+$gutter);
float:left;
margin:0 (($gutter-width / $total) * 100%) 0 0;
}

And to use a grid you simply:

#example{
@include column($grid:5);
}

You state that you’d like to use the Column mixin and pass the column number to the grid variable and that’s it. There’s more on the readme on Github.

Note: yes I do know that things like is are probably around, however I’ve used fluid grids from Harry for a while now and think they’re the dogs bollocks and creating a SASS version for myself was logical, if you have any questions then tweet me!

What I’m talking about is this new ‘flash-style’ revolution, of applying effects and transitions to anything and everything. Now we have the new HTML5 specification with things like canvas, allowing us to create shapes and other stuff, we also have CSS3 which often is categorised as being ‘the same’ as HTML5, which is obviously completely wrong. With CSS3 designers and developers now have access to animations, allowing you to create things like fade transitions on button rollovers etc. I have no problem with this, it looks great and is even better that it’s done in CSS and uses no Javascript at all, which is pretty awesome. However the issue I have is when transitions are applied to elements that move on hover or click, or even when a page is loaded for all of the elements to fade in.

I just don’t see the point of it, from a usability point of view it’s annoying waiting for the page to fade-in although it’s not even a second, there’s still that brief pause. Likewise, animating elements to spin or move when hovered over. As I’ve said there is an acceptable amount, there are some animations that I think look pretty neat and just add an extra dimension to the design and user experience.

I’m calling this the ‘HTML-Flash Revolution’, just as the web went through the flash phase of animating anything and everything, and I’ll admit I’ve been there, creating a website where each element comes in from all directions.

What will kill it off is a number of things; firstly developers and designers alike will simply get bored of it. Secondly, you’ll need to have a rather flexible client to be able to implement some of things I have seen, one I’m referring to I found on Forrst, which I won’t link to for obvious reasons. Clients will however like some of the features of Flash/CSS3 animations, like the fade-in/fade-out transitions which just give a slick appearance to the site. Although saying that, it did all start with Flash, Javascript, and then became more widely used as jQuery became more widely used and it’s now beginning to look a little dated.

The third and final reason why I believe they will be killed off can be summed up in one word. Mobile. With mobile we obviously lose a huge amount of interaction with websites and applications unlike we do with computers and using a mouse! Therefore unless we apply moveable transitions and effects to things like onclick, we’re not going to use it, thankfully.

So, if you’re like me and thinking why is everyone doing these bloody awful animations, don’t get too stressed, you might as well embrace it, because they won’t be around forever.