How to calculate columns equal to Skeleton

Question

To .col-md-1 is calculated thus: 100/12 = 8.3333...3 in the Skeleton was otherwise calculated which returned the following result:

.one.column,
.one.columns {
  width: 4.66666666667%;
}

What logic did the developer use? Which calculation?

Answer 1

Indeed, it is a rather complex puzzle to solve. After some tests and some research, it was not possible to obtain the result of 4.66..67%, but I arrived in 4,25%.

According to this problem in the github, it seems that the base of columns of the skeleton formerly was 16, rather than the conventional 12 (used by many today - Bootstrap).

Another point I analyzed was the method many were calculating the Skeleton grid when converted to SASS or LESS, instead of decreasing the margin value for each side (left and right), only 1 of the sides was removed.

See the formula used in this conversion to LESS/SASS:

.one.columns {
    width: @column-width*1-(@column-margin/2)*1%;
}

//Essa área é a interessante para a análise: (@column-margin/2)

whereas the github is not updated 2 years ago and that the developer himself claimed to be absent from the updates, using some values from CSS original of Skeleton and some formulas used in LESS and SASS I came to that calculation:

@Total width = 100;
@columns = 16;
@margin = 4%;
Formula: @widthTotal / @columns - (@margin / 2);

---

100/16 - (4%/2) = 4,25%

• Link to Skeleton SASS, here.
• Link to Skeleton LESS, here.

---

Remembering that the current formula used in LESS and SASS already differs from the calculation I elaborated, because today the system is based on a grid of 12 colunas, so the account won’t hit. I used calculation logic with 16 colunas (based on the grid used in the past) to try to answer why the value of 4,66..67% found in the archive CSS original of Skeleton.