structure.less

structure.less keeps your markup semantic and your LESS clean.

Since starting my new job a few months back I have put a lot of thought into reusable code.

Generally the sites I build continuously maintained or one off sites that end up being rebuilt after a few years and the old code is no longer relevant.

My main responsibility these days involves working with a small team of developers to create 33 large manufacture branded dealership websites. All of these sites will have unique design.

As most people do while coding you tend to keep a consistent amount of padding or margin where needed. In my case 30, 60 and so on, But I found my self adding margin as a unit to things like headings or to the last paragraph. Even on form buttons. General structural spacing.

This meant that my LESS was doing a bit more than it needed. Titles should be styled as Look, and not physical attributes. I remembered how in the old days I would use a .bump class to bump things around. More of a wedge I guess.

The following is a LESS script that will generate margin and madding classes ranging from 15px to 150px in 15px increments.

Now any heading can be generically styled and simple place a .m-top-30 class on it or toss a .p-30 class on a div to adjust its padding.

Makes for cleaner and more semantic code.

@structure-loops: 150;
@structure: 150px;

.calc-padding-type-structure(@index, @class, @structure) {
  .p-@{class}-@{index} {
    padding-@{class}: @structure !important;
  }
}

.calc-padding-structure(@index, @class, @structure) {
  .p-@{index} {
    padding: @structure !important;
  }
}

.calc-margin-type-structure(@index, @class, @structure) {
  .m-@{class}-@{index} {
    margin-@{class}: @structure !important;
  }
}

.calc-margin-structure(@index, @class, @structure) {
  .m-@{index} {
    margin: @structure !important;
  }
}

.loop-padding-structure(@index, @class, @structure) when (@index >= 0) {
  .calc-padding-type-structure(@index, @class, @structure);
  .calc-padding-structure(@index, @class, @structure);
  .loop-padding-structure((@index - 15), @class, (@structure  - 15));
}

.loop-margin-structure(@index, @class, @structure) when (@index >= 0) {
  .calc-margin-type-structure(@index, @class, @structure);
  .calc-margin-structure(@index, @class, @structure);
  .loop-margin-structure((@index - 15), @class, (@structure  - 15));
}

.make-structure(@class) {
  .loop-padding-structure(@structure-loops, @class, @structure);
  .loop-margin-structure(@structure-loops, @class, @structure);
}

.make-structure(top);
.make-structure(right);
.make-structure(bottom);
.make-structure(left);

Get the Source

Signup for my mailing list

Receive other rambings like this on design, code, and some times food.