Feature Suggestion - Handle padding and borders

[blowsie]

Ive just started using semantic.gs for my websites and have found in somecases my code is less semantic. This is because im having to add child divs inside my columns to be able to handle padding and borders.

I very quickly wrote my own solution to this which is quite neat but may be difficult for some beginner users to grasp.

.column(@x,@columns:@columns,@padding:0,@border:0) {
    display: inline;
    float: left;
    width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width) - @padding - @border;
}

This solution does require the user to calculate the total horizontal padding and the total horizontal border, but at least it prevents divitus.

So your less markup might look like this.

.content {
    .columns(12,12,10,2);
   padding:5px;
   border: 1px solid red;
}

As far as i know the only other solution to this is to use box-sizing which isnt supported by older browsers.

I would like to hear your feedback from this solution and consider implementing it the grid system. As as sematic.gs stands in my case semantic.gs is not so semantic after ive added all my extra markup jsut for padding.

[tylertate]

Yes, this is a common pain point in using any grid system. Unfortunately, supporting padding and border isn't especially practical in fluid grids — padding and border would both have to be specified in percentages, which isn't very conducive for borders in particular.

Version 1.3 will, however, provide the option for using either margin OR padding to achieve the gutter, so perhaps that will reduce the aforementioned divitus a bit.