Projet

Général

Profil

0001-scss-add-responsiveness-to-grid-system-10928.patch

Frédéric Péters, 14 mai 2016 09:14

Télécharger (13,7 ko)

Voir les différences: 

Subject: [PATCH 1/2] 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.

 help/fr/figures/grid.png     | Bin 0 -> 8729 bytes
 help/fr/misc-grid.page       |  47 +++++++++++++++++++++++++++++++++++++++++++
 static/includes/_layout.scss |   1 +
 static/includes/_wcs.scss    |  17 +++++++++++++++-
 4 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 help/fr/figures/grid.png
 create mode 100644 help/fr/misc-grid.page
help/fr/misc-grid.page
1 
<page xmlns="http://projectmallard.org/1.0/"
2 
      type="topic" id="misc-grid" xml:lang="fr">
3 

  		




  
  4
  
    
<info>

  		




  
  5
  
    
  <revision docversion="0.1" date="2016-05-14" status="draft"/>

  		




  
  6
  
    
  <credit type="author">

  		




  
  7
  
    
    <name>Frédéric Péters</name>

  		




  
  8
  
    
    <email>fpeters@entrouvert.com</email>

  		




  
  9
  
    
  </credit>

  		




  
  10
  
    

  		




  
  11
  
    
</info>

  		




  
  12
  
    

  		




  
  13
  
    
<title>Système de grille CSS</title>

  		




  
  14
  
    

  		




  
  15
  
    
<p>

  		




  
  16
  
    
Un système de grille adaptive sur douze colonnes est proposé pour le

  		




  
  17
  
    
formatage des formulaires.

  		




  
  18
  
    
</p>

  		




  
  19
  
    

  		




  
  20
  
    
<figure>

  		




  
  21
  
    
  <title>Système de grille</title>

  		




  
  22
  
    
  <media type="image" mime="image/png" src="figures/grid.png"/>

  		




  
  23
  
    
</figure>

  		




  
  24
  
    

  		




  
  25
  
    
<p>

  		




  
  26
  
    
Chaque classe CSS pour un élément de la grille est décrit numériquement

  		




  
  27
  
    
par sa largeur.  Par exemple, <code>grid-1-2</code> pour un élément

  		




  
  28
  
    
faisant la moitié de la largeur, <code>grid-2-3</code> pour un élément

  		




  
  29
  
    
en faisant les deux-tiers.  Les dénominateurs possibles sont 2, 3, 4, 6

  		




  
  30
  
    
et 12.

  		




  
  31
  
    
</p>

  		




  
  32
  
    

  		




  
  33
  
    
<note><p>

  		




  
  34
  
    
Sur les petits écrans, les éléments de grille sont affichés sur toute la

  		




  
  35
  
    
largeur.

  		




  
  36
  
    
</p>

  		




  
  37
  
    

  		




  
  38
  
    
</note>

  		




  
  39
  
    

  		




  
  40
  
    
<p>

  		




  
  41
  
    
Pour forcer un retour en début de ligne, ou pour assurer un rendu correct

  		




  
  42
  
    
quand les éléments d'une ligne n'ont pas tous la même hauteur, une classe

  		




  
  43
  
    
supplémentaire, <code>newline</code> peut être posée sur le premier

  		




  
  44
  
    
élément de la nouvelle ligne.

  		




  
  45
  
    
</p>

  		




  
  46
  
    

  		




  
  47
  
    
</page>

  		












  

    
      static/includes/_layout.scss
    
  





  1
  1
  
    
$width: 1000px !default;

  		




  2
  2
  
    
$mobile-limit: 800px !default;

  		




  
  3
  
    
$very-small-limit: 480px !default;

  		




  3
  4
  
    
$footer-background: #666666 !default;

  		




  4
  5
  
    
$footer-color: white !default;

  		




  5
  6
  
    
$top-logo-width: 0 !default;

  		












  

    
      static/includes/_wcs.scss
    
  





  401
  401
  
    
	clear: none;

  		




  402
  402
  
    
}

  		




  403
  403
  
    

  		




  404
  
  
    
@for $i from 1 through 8 {

  		




  
  404
  
    
@each $i in 1, 2, 3, 4, 6, 12 {

  		




  405
  405
  
    
	@for $j from 1 through $i {

  		




  406
  406
  
    
		div.dataview div.grid-#{$j}-#{$i},

  		




  407
  407
  
    
		form.quixote div.grid-#{$j}-#{$i} {

  		




  ......




  415
  415
  
    
			box-sizing: border-box;

  		




  416
  416
  
    
			padding-right: 1em;

  		




  417
  417
  
    
			width: (100*$j/$i+0%);

  		




  
  418
  
    
			@media screen and (max-width: $mobile-limit) {

  		




  
  419
  
    
				@if $i == 4 and $j <= 2 { width: 50%; }

  		




  
  420
  
    
				@else if $i == 4 and $j >  2 { width: 100%; }

  		




  
  421
  
    
				@else if $i == 6 and $j <= 2 { width: (100/3+0%); }

  		




  
  422
  
    
				@else if $i == 6 and $j == 3 { width: 50%; }

  		




  
  423
  
    
				@else if $i == 6 and $j <= 5 { width: (200/3+0%); }

  		




  
  424
  
    
				@else if $i == 6 and $j == 6 { width: 100%; }

  		




  
  425
  
    
				@else if $i == 12 and $j <= 4 { width: (100/3+0%); }

  		




  
  426
  
    
				@else if $i == 12 and $j <= 7 { width: 50%; }

  		




  
  427
  
    
				@else if $i == 12 and $j <= 11 { width: (200/3+0%); }

  		




  
  428
  
    
				@else if $i == 12 and $j == 12 { width: 100%; }

  		




  
  429
  
    
			}

  		




  
  430
  
    
			@media screen and (max-width: $very-small-limit) {

  		




  
  431
  
    
				width: 100%;

  		




  
  432
  
    
			}

  		




  418
  433
  
    
			& + div {

  		




  419
  434
  
    
				clear: both;

  		




  420
  435
  
    
			}

  		




  421
  
  
    
-