.columns Less Mixin

Simon Stevens — Thu, 26 Apr 2012 09:42:59 +0000

Like most frontend developers, I work with columns on an hourly basis. I don’t really buy in to using frameworks, I don’t have time to learn their intricacies and limitations and frankly, I like knowing how my own code works.

So I wrote my own very simple Less Mixin:

.columns(@cols, @hspace, @padding, @fitinto){
  margin-left: @hspace * -1;
  width: @fitinto + @hspace;
  float: left;
  div.column{
    width: floor(((@fitinto - (@hspace * (@cols - 1))) / @cols)) - (@padding*2);
    padding-left: @padding;
    padding-right: @padding;
    margin-left: @hspace;
    float: left;
  }
}

Usage example:

#page{
  .columns(3, 20px, 10px, 500px);
}

CSS Rounded Corners

Simon Stevens — Sun, 14 Jun 2009 16:26:10 +0000

My first post on my shiny new blog is being written whilst I’m actually coding the template.

The CSS3 spec gives us access to rounded corners without the need for images and loads of xhtml. Just add the following to the appropriate

. I’ve absolutely no idea whether this works in IE7+ but I suspect it doesn’t and as it’s for my personal blog, I don’t care. Internet Explorer users deserve to look at shitty looking pages tbh :p

-moz-border-radius: 5px; -webkit-border-radius: 5px;

mouse pi-lot » HTML, CSS, Less

.columns Less Mixin

CSS Rounded Corners