Recreate grid mixins from lost sources

Question

In an old site the mixins to create the grid are lost. I'm not sure if it was using susy, or singularitygs .. but one of those two, I guess, adn older versions, I guess.

From the front end, I've been able to retrieve the rendered values. It seems the logic is simple ... but can anyone recreate the mixins to generate those ?

Here is some of the data I found. It uses a 36 column layout, but I'm not sure what the gutter size is .. and wether the columns include the gutters.

I'm looking for generic simple methods like push(), pull() and span(), and the numerics used in this setup

@mixin push1() {
  margin-left: 2.8125%; 
}
@mixin pull1() {
  margin-left: -2.8125%; 
}
@mixin span36() {
    width: 100%;
  float: left;
    margin-left: 0;
  margin-right: 0;
}

@mixin span34() {
    width: 94.375%;
    float: left;
    margin-right: 1.25%;
}
@mixin span27() {
    width: 74.6875%;
    float: left;
    margin-right: 1.25%;
}
@mixin span26() {
    width: 72%; // this i guessed
    float: left;
    margin-right: 1.25%;
}
@mixin span25() {
    width: 69.0625%;
    float: left;
    margin-right: 1.25%;
}
@mixin span24() {
    width: 66.25%;
    float: left;
    margin-right: 1.25%;
}
@mixin span22() {
    width: 60.625%;
    float: left;
    margin-right: 1.25%;
}
@mixin span18() {
    width: 49.375%;
    float: left;
    margin-right: 1.25%;
}

@mixin span17() {
    width: 46.5625%;
    float: left;
    margin-right: 1.25%;
}
@mixin span15() {
    width: 40.9375%;
    float: left;
    margin-right: 1.25%;
}
@mixin span12() {
    width: 32.5%;
    float: left;
    margin-right: 1.25%;
}

@mixin span11() {
    width: 29.6875%;
    float: left;
    margin-right: 1.25%;
}

@mixin span9() {
    width: 24.0625%;
    float: left;
    margin-right: 1.25%;
}

@mixin span6() {
    width: 15.625%;
    float: left;
    margin-right: 1.25%;
}

commonpike · Answer 1 · 2017-12-17T12:31:29.253

for the span, apparently it has 36 columns and a 1.25 gutter; it divides the gutters evenly over the columns to span except for the last one, and divides the remainder over the columns. so

spanX = (100 - (36/x-1)*1.25)/(36/x)

take span17, thats

span17 = 100 - (36/17-1)*1.25) / (36/17) = 46.5625

i dont know why that even makes sense in a grid - you've got 1.11764705882 gutters there - but thats what the numbers say.

if you push or pull one column, you dont just push the column, but also the margin added to the column. so

pushX = 100/x+1.25/x

Recreate grid mixins from lost sources

1 Answers1