* Crédito para David Varvel por me ajudar a entender como usar a ordem aleatória de colunas GroundworkCSS quando eu estava aprendendo nessa plataforma. *
Recentemente, comecei a colocar meu mais novo projeto na estrutura de front-end Pure CSS . Eu estava vindo do Groundwork CSS , que adorei, mas meu cérebro ficava me dizendo para tentar Pure CSS já que, como o nome diz, é PURE CSS … o que é bom.
A transição dos dois foi bastante rápida, já que se trata apenas de um primeiro sistema de grade móvel. No entanto, fiquei preso a um recurso do Groundwork CSS que adorei e que, infelizmente, o Pure CSS não tinha a oferecer. E esse recurso seria o embaralhamento de colunas . A manipulação de grade me permitiu organizar minhas classes HTML e CSS para que eu pudesse mostrar uma coluna à direita da página, mas ainda retraí-la no topo (acima do elemento à sua esquerda). E esse recurso é bastante importante no meu projeto atual, já que devo ter o conteúdo principal (que está à direita da página) recolhido acima da barra lateral (que está à esquerda da página) quando o tamanho da tela ficar pequeno.
O conserto
Bem, esse cabeçalho é um pouco errado … Não há “conserto”. Então, em vez de insistir, criei uma correção e queria abrir o código da correção para que vocês possam ter acesso fácil a ela e talvez adicioná-la ao código-fonte Pure CSS para permitir que a massa se beneficie desse recurso.
Tudo que você precisa é um pouco de MENOS (para tornar o código escrito à mão menos volumoso, usando loops de iteração de MENOS) e um pouco de magia (compilador) e BLAM!
.baseOffset(@colTotal, @colNum, @count: 1) when (@count < @colTotal){
.checkVal() when ((@count + @colNum) =< @colTotal){
.pure-u-@{colNum}-@{colTotal}.left-@{count},
.pure-u-sm-@{colNum}-@{colTotal}.left-@{count},
.pure-u-md-@{colNum}-@{colTotal}.left-@{count},
.pure-u-lg-@{colNum}-@{colTotal}.left-@{count},
.pure-u-xl-@{colNum}-@{colTotal}.left-@{count} {
@p: round(@count / @colTotal * 100, 4);
left: ~"@{p}%";
}
.pure-u-@{colNum}-@{colTotal}.right-@{count},
.pure-u-sm-@{colNum}-@{colTotal}.right-@{count},
.pure-u-md-@{colNum}-@{colTotal}.right-@{count},
.pure-u-lg-@{colNum}-@{colTotal}.right-@{count},
.pure-u-xl-@{colNum}-@{colTotal}.right-@{count} {
@p: round(@count / @colTotal * 100, 4);
right: ~"@{p}%";
}
}
.checkVal();
.baseOffset(@colTotal, @colNum, @count + 1);
}
.smOffset(@colTotal, @colNum, @count: 1) when (@count < @colTotal){
.checkVal() when ((@count + @colNum) =< @colTotal){
.pure-u-sm-@{colNum}-@{colTotal}.left-sm-@{count},
.pure-u-sm-@{colNum}-@{colTotal}.left-@{count} {
@p: round(@count / @colTotal * 100, 4);
left: ~"@{p}%";
}
.pure-u-sm-@{colNum}-@{colTotal}.right-sm-@{count},
.pure-u-sm-@{colNum}-@{colTotal}.right-@{count} {
@p: round(@count / @colTotal * 100, 4);
right: ~"@{p}%";
}
}
.checkVal();
.smOffset(@colTotal, @colNum, @count + 1);
}
.mdOffset(@colTotal, @colNum, @count: 1) when (@count < @colTotal){
.checkVal() when ((@count + @colNum) =< @colTotal){
.pure-u-md-@{colNum}-@{colTotal}.left-md-@{count},
.pure-u-md-@{colNum}-@{colTotal}.left-@{count} {
@p: round(@count / @colTotal * 100, 4);
left: ~"@{p}%";
}
.pure-u-md-@{colNum}-@{colTotal}.right-md-@{count},
.pure-u-md-@{colNum}-@{colTotal}.right-@{count} {
@p: round(@count / @colTotal * 100, 4);
right: ~"@{p}%";
}
}
.checkVal();
.mdOffset(@colTotal, @colNum, @count + 1);
}
.lgOffset(@colTotal, @colNum, @count: 1) when (@count < @colTotal){
.checkVal() when ((@count + @colNum) =< @colTotal){
.pure-u-lg-@{colNum}-@{colTotal}.left-lg-@{count},
.pure-u-lg-@{colNum}-@{colTotal}.left-@{count} {
@p: round(@count / @colTotal * 100, 4);
left: ~"@{p}%";
}
.pure-u-lg-@{colNum}-@{colTotal}.right-lg-@{count},
.pure-u-lg-@{colNum}-@{colTotal}.right-@{count} {
@p: round(@count / @colTotal * 100, 4);
right: ~"@{p}%";
}
}
.checkVal();
.lgOffset(@colTotal, @colNum, @count + 1);
}
.xlOffset(@colTotal, @colNum, @count: 1) when (@count < @colTotal){
.checkVal() when ((@count + @colNum) =< @colTotal){
.pure-u-xl-@{colNum}-@{colTotal}.left-xl-@{count},
.pure-u-xl-@{colNum}-@{colTotal}.left-@{count} {
@p: round(@count / @colTotal * 100, 4);
left: ~"@{p}%";
}
.pure-u-xl-@{colNum}-@{colTotal}.right-xl-@{count},
.pure-u-xl-@{colNum}-@{colTotal}.right-@{count} {
@p: round(@count / @colTotal * 100, 4);
right: ~"@{p}%";
}
}
.checkVal();
.xlOffset(@colTotal, @colNum, @count + 1);
}
.regOffsets(@n, @i: 1) when (@i < @n){
.baseOffset(@n, @i); // Default Grid
.regOffsets(@n, @i + 1);
}
.smMediaOffsets(@n, @i: 1) when (@i < @n){
.smOffset(@n, @i); // Sm Grid
.smMediaOffsets(@n, @i + 1);
}
.mdMediaOffsets(@n, @i: 1) when (@i < @n){
.mdOffset(@n, @i); // Sm Grid
.mdMediaOffsets(@n, @i + 1);
}
.lgMediaOffsets(@n, @i: 1) when (@i < @n){
.lgOffset(@n, @i); // Sm Grid
.lgMediaOffsets(@n, @i + 1);
}
.xlMediaOffsets(@n, @i: 1) when (@i < @n){
.xlOffset(@n, @i); // Sm Grid
.xlMediaOffsets(@n, @i + 1);
}
.regOffsets(2);
.regOffsets(3);
.regOffsets(4);
.regOffsets(5);
.regOffsets(6);
.regOffsets(8);
.regOffsets(12);
.regOffsets(24);
@media screen and (min-width: 35.5em){
.smMediaOffsets(2);
.smMediaOffsets(3);
.smMediaOffsets(4);
.smMediaOffsets(5);
.smMediaOffsets(6);
.smMediaOffsets(8);
.smMediaOffsets(12);
.smMediaOffsets(24);
}
@media screen and (min-width: 48em){
.mdMediaOffsets(2);
.mdMediaOffsets(3);
.mdMediaOffsets(4);
.mdMediaOffsets(5);
.mdMediaOffsets(6);
.mdMediaOffsets(8);
.mdMediaOffsets(12);
.mdMediaOffsets(24);
}
@media screen and (min-width: 64em){
.lgMediaOffsets(2);
.lgMediaOffsets(3);
.lgMediaOffsets(4);
.lgMediaOffsets(5);
.lgMediaOffsets(6);
.lgMediaOffsets(8);
.lgMediaOffsets(12);
.lgMediaOffsets(24);
}
@media screen and (min-width: 80em){
.xlMediaOffsets(2);
.xlMediaOffsets(3);
.xlMediaOffsets(4);
.xlMediaOffsets(5);
.xlMediaOffsets(6);
.xlMediaOffsets(8);
.xlMediaOffsets(12);
.xlMediaOffsets(24);
}(Todo esse código está em meu repositório CoderWall no Git, como sempre.)
Se você baixar e consultar seu documento HTML para o pureCSS_columnShuffling.cssarquivo, você pode usar suas classes misturadas com classes de grade responsivas Pure CSS e embaralhar as colunas como quiser!
Exemplos
Tentei nomear as classes da mesma forma que o GroundworkCSS nomeia suas classes de Column Shuffling, mas manteve a sensação de Pure CSS.
Para embaralhamento padrão (sem consultas de mídia), basta usar ou e substituir o por quantas colunas deseja “embaralhar”..left-*right-**
Eu tentei pensar no futuro e fazer com que você não pudesse embaralhar mais colunas do que você tem disponível (ou seja, se o seu elemento for 3/4 da grade, você só pode fazer ou . Ou, se for 1/5, você pode movê-lo tantos quanto ou . Exemplo não responsivo:left-1right-1left-4right-4
<div class='pure-g'>
<p class='pure-u-3-4 left-1'>right</p>
<p class='pure-u-1-4 right-3'>left</p>
</div>Também adicionei a capacidade de usar este código com grades responsivas, e ele usa a mesma sintaxe do sistema de grade responsiva. Sem entrar em muitos detalhes, ele funciona exatamente como as classes de grade responsiva, primeiro móvel e se você usar, digamos, apenas -sm-, ele se aplicará a qualquer tamanho de janela de visualização 35.5eme acima.
<div class='pure-g'>
<p class='pure-u-3-4 pure-u-sm-2-5 pure-u-md-1-2 left-1 left-sm-3 left-md-1'>right</p>
<p class='pure-u-1-4 pure-u-sm-3-5 pure-u-md-1-2 right-3 right-sm-2 right-md-1'>left</p>
</div>Se você tiver alguma dúvida sobre este ou problemas, me avise! Você pode baixar o arquivo CSS e LESS, aqui .
Felicidades!
Zach