4

A .col-md-1 é calculado assim: 100/12 = 8.3333...3 no Skeleton foi calculado de outra maneira que retornou o seguinte resultado:

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

Qual lógica o desenvolvedor usou? Qual cálculo?

1 Resposta 1

3

Realmente, é um enigma meio complexo de se resolver. Depois de alguns testes e algumas pesquisas, não foi possível obter o resultado de 4.66..67%, porém cheguei em 4,25%.

De acordo com esse problema no github, parece que a base de colunas do skeleton antigamente era 16, ao invés do convencional 12 (usado por muitos atualmente - Bootstrap).

Outro ponto que analisei, foi o método que muitos estavam calculando a grid do skeleton quando convertido para SASS ou LESS, ao invés de diminuir o valor de margem para cada lateral (esquerda e direita), foi removido apenas 1 dos lados.

Veja a fórmula usada nesse exemplo de conversão para LESS/SASS:

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

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

Considerando que o próprio github não é atualizado a 2 anos e que o próprio desenvolvedor falou estar ausente nas atualizações, usando alguns valores do CSS original do Skeleton e algumas fórmulas usadas em LESS e SASS cheguei a esse cálculo:

@larguraTotal = 100;
@colunas = 16;
@margem = 4%;
Fórmula: @larguraTotal / @colunas - (@margem / 2);


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

  • Link para skeleton SASS, aqui.
  • Link para skeleton LESS, aqui.

Lembrando que a fórmula atual usada em LESS e SASS já difere do cálculo que eu elaborei, pois hoje o sistema é baseado em uma grid de 12 colunas, portanto a conta não vai bater. Usei a lógica de cálculo com 16 colunas (com base na grid usada antigamente) para tentar responder o por que de ser obtido o valor de 4,66..67% encontrado no arquivo CSS original do Skeleton.

2
  • Oloco... Eu nunca iria conseguir chegar a 4,25%, obrigado pela sua resposta, vou marca-la como resolvido, já que não se pode obter 4,66...67%, mas cara será que não é outra lógica ? vou pesquisar mais a fundo, mas acho que não vou obter o resultado diferente, o seu é o mais próximo. Commented 23/08/2016 às 1:23
  • 1
    @GuilhermeSpinXO Como já faz muito tempo que isso foi criado e não é atualizado, talvez foi usado algum guia de "boas práticas" que já não se aplica mais hoje. Por exemplo, o grid do primeiro arquivo publicado (2011) usava px ao invés de %, talvez tenha sido algum cálculo para fazer essa conversão. Mas sugiro que abandone a tentativa de chegar nesse resultado, já que temos muitos outros frameworks excelentes e atualizados. O que vale a pena é o resultado final =D Commented 23/08/2016 às 14:37

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .