Category Archives: HTML, CSS, Less

.columns Less Mixin

Posted on by
Reply

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

Posted on by
Reply

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 <div>.  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;