Pure 0.5.0 : des grids réactives pour mobiles

Pure est un ensemble de petits modules CSS (responsive) que vous pouvez utiliser dans chaque projet Web. Il offre des grids, des forms, des tables, des boutons, des menus, des layouts, etc. Bien entendu, les styles sont minimalistes, ce qui vous encourage à écrire vos propres styles au-dessus de ceux de Pure.


L'objectif principal de la version 0.5.0 est d'améliorer les grids. Le système est maintenant orienté mobile avant tout et vous permet de créer des mises en page très réactives de façon déclarative.

Par exemple, vous pouvez créer une mise en page qui utilise une seule colonne sur de petits écrans, 2 colonnes sur les écrans de taille moyenne et 4 colonnes sur les grands écrans :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>
<div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4">...</div>

Les CSS Media Queries ne font plus toujours partie du noyau de Pure. Elles peuvent être ajoutées avec la balise <link> suivante sur votre page :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.5.0/grids-responsive-min.css">


Cette version comporte également :

  • la modification concernant les grids a pour conséquence la suppression de la classe .pure-g-r. Il est cependant facile d'adapter votre code existant :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <!-- Avant -->
<div class="pure-g-r">
  <div class="pure-u-1-2">...</div>
  <div class="pure-u-1-2">...</div>
</div>
 
<!-- Maintenant -->
<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-2">...</div>
  <div class="pure-u-1 pure-u-md-1-2">...</div>
</div>
  • une nouvelle classe .pure-img pour que les images gardent les bonnes proportions ;
  • un changement d'unité dans le padding des cellules d'une table (de px à em).


Vous obtiendrez plus de renseignements sur cette page.


Site officiel