Vous êtes nouveau sur Developpez.com ? Créez votre compte ou connectez-vous afin de pouvoir participer !

Vous devez avoir un compte Developpez.com et être connecté pour pouvoir participer aux discussions.

Vous n'avez pas encore de compte Developpez.com ? Créez-en un en quelques instants, c'est entièrement gratuit !

Si vous disposez déjà d'un compte et qu'il est bien activé, connectez-vous à l'aide du formulaire ci-dessous.

Identifiez-vous
Identifiant
Mot de passe
Mot de passe oublié ?
Créer un compte

L'inscription est gratuite et ne vous prendra que quelques instants !

Je m'inscris !

Pure 0.5.0 : des grilles CSS réactives pour mobiles

Le , par vermine

22PARTAGES

3  0 
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
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
<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
    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

Une erreur dans cette actualité ? Signalez-le nous !