entrouvert
/
publik-base-theme
15
1
Fork 1
Code Issues Pull Requests 11 Releases Wiki Activity

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:
Frédéric Péters 2016-05-13 22:07:59 +02:00
parent 851161b33a
commit 3109315162
4 changed files with 64 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
help/fr/figures/grid.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.5 KiB

47
help/fr/misc-grid.page Normal file
View File

@ -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
static/includes/_layout.scss
View File

@ -1,5 +1,6 @@
$width: 1000px !default;
$mobile-limit: 800px !default;
$very-small-limit: 480px !default;
$footer-background: #666666 !default;
$footer-color: white !default;
$top-logo-width: 0 !default;

17
static/includes/_wcs.scss
View File

@ -401,7 +401,7 @@ form.quixote div.grid {
clear: none;
}
@for $i from 1 through 8 {
@each $i in 1, 2, 3, 4, 6, 12 {
@for $j from 1 through $i {
div.dataview div.grid-#{$j}-#{$i},
form.quixote div.grid-#{$j}-#{$i} {
@ -415,6 +415,21 @@ form.quixote div.grid {
box-sizing: border-box;
padding-right: 1em;
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 {
clear: both;
}