Pure 0.5.0 : des grilles CSS réactives pour mobiles

Le , par vermine, Responsable JavaScript & AJAX
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


Vous avez aimé cette actualité ? Alors partagez-la avec vos amis en cliquant sur les boutons ci-dessous :
Offres d'emploi IT
Développeur web fort trafic h/f
EASY PARTNER - Ile de France - Paris (75000)
Développeur web
Neteven - Ile de France - Paris (75000)
Développeur web
RELATIA - Ile de France - Paris (75002)

Voir plus d'offres Voir la carte des offres IT
Responsable bénévole de la rubrique Développement Web : Xavier Lecomte -