scss: add responsiveness to grid system (#10928)
This also changes the denomitors from 1 to 8 to a 1, 2, 3, 4, 6, 12, for richer and more useful values.
This commit is contained in:
parent
851161b33a
commit
3109315162
Binary file not shown.
After Width: | Height: | Size: 8.5 KiB |
|
@ -0,0 +1,47 @@
|
||||||
|
<page xmlns="http://projectmallard.org/1.0/"
|
||||||
|
type="topic" id="misc-grid" xml:lang="fr">
|
||||||
|
|
||||||
|
<info>
|
||||||
|
<revision docversion="0.1" date="2016-05-14" status="draft"/>
|
||||||
|
<credit type="author">
|
||||||
|
<name>Frédéric Péters</name>
|
||||||
|
<email>fpeters@entrouvert.com</email>
|
||||||
|
</credit>
|
||||||
|
|
||||||
|
</info>
|
||||||
|
|
||||||
|
<title>Système de grille CSS</title>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Un système de grille adaptive sur douze colonnes est proposé pour le
|
||||||
|
formatage des formulaires.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<figure>
|
||||||
|
<title>Système de grille</title>
|
||||||
|
<media type="image" mime="image/png" src="figures/grid.png"/>
|
||||||
|
</figure>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Chaque classe CSS pour un élément de la grille est décrit numériquement
|
||||||
|
par sa largeur. Par exemple, <code>grid-1-2</code> pour un élément
|
||||||
|
faisant la moitié de la largeur, <code>grid-2-3</code> pour un élément
|
||||||
|
en faisant les deux-tiers. Les dénominateurs possibles sont 2, 3, 4, 6
|
||||||
|
et 12.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<note><p>
|
||||||
|
Sur les petits écrans, les éléments de grille sont affichés sur toute la
|
||||||
|
largeur.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</note>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
Pour forcer un retour en début de ligne, ou pour assurer un rendu correct
|
||||||
|
quand les éléments d'une ligne n'ont pas tous la même hauteur, une classe
|
||||||
|
supplémentaire, <code>newline</code> peut être posée sur le premier
|
||||||
|
élément de la nouvelle ligne.
|
||||||
|
</p>
|
||||||
|
|
||||||
|
</page>
|
|
@ -1,5 +1,6 @@
|
||||||
$width: 1000px !default;
|
$width: 1000px !default;
|
||||||
$mobile-limit: 800px !default;
|
$mobile-limit: 800px !default;
|
||||||
|
$very-small-limit: 480px !default;
|
||||||
$footer-background: #666666 !default;
|
$footer-background: #666666 !default;
|
||||||
$footer-color: white !default;
|
$footer-color: white !default;
|
||||||
$top-logo-width: 0 !default;
|
$top-logo-width: 0 !default;
|
||||||
|
|
|
@ -401,7 +401,7 @@ form.quixote div.grid {
|
||||||
clear: none;
|
clear: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
@for $i from 1 through 8 {
|
@each $i in 1, 2, 3, 4, 6, 12 {
|
||||||
@for $j from 1 through $i {
|
@for $j from 1 through $i {
|
||||||
div.dataview div.grid-#{$j}-#{$i},
|
div.dataview div.grid-#{$j}-#{$i},
|
||||||
form.quixote div.grid-#{$j}-#{$i} {
|
form.quixote div.grid-#{$j}-#{$i} {
|
||||||
|
@ -415,6 +415,21 @@ form.quixote div.grid {
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding-right: 1em;
|
padding-right: 1em;
|
||||||
width: (100*$j/$i+0%);
|
width: (100*$j/$i+0%);
|
||||||
|
@media screen and (max-width: $mobile-limit) {
|
||||||
|
@if $i == 4 and $j <= 2 { width: 50%; }
|
||||||
|
@else if $i == 4 and $j > 2 { width: 100%; }
|
||||||
|
@else if $i == 6 and $j <= 2 { width: (100/3+0%); }
|
||||||
|
@else if $i == 6 and $j == 3 { width: 50%; }
|
||||||
|
@else if $i == 6 and $j <= 5 { width: (200/3+0%); }
|
||||||
|
@else if $i == 6 and $j == 6 { width: 100%; }
|
||||||
|
@else if $i == 12 and $j <= 4 { width: (100/3+0%); }
|
||||||
|
@else if $i == 12 and $j <= 7 { width: 50%; }
|
||||||
|
@else if $i == 12 and $j <= 11 { width: (200/3+0%); }
|
||||||
|
@else if $i == 12 and $j == 12 { width: 100%; }
|
||||||
|
}
|
||||||
|
@media screen and (max-width: $very-small-limit) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
& + div {
|
& + div {
|
||||||
clear: both;
|
clear: both;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue