Accentsconagua

Pure.css offre une alternative intéressante au bootstrap

Code
Share
Ce que vous allez créer

Qu'est-ce que Pure.css??

Bien que Bootstrap s’occupe d’une grande partie du Web, il peut en résulter un fardeau de performances sur les sites qui pourraient ne pas être nécessaires pour votre prochain projet. Pure.css est le framework responsive de Yahoo; il offre une alternative minimaliste, bien documentée et flexible. 

Dans ce tutoriel, je vais vous présenter Pure, "un ensemble de petits modules CSS réactifs que vous pouvez utiliser dans tous les projets Web". Nous allons passer en revue l'ensemble des fonctionnalités et les avantages de l'utilisation de Pure, puis passer en revue quelques exemples d'utilisation élémentaires..

Si vous avez des demandes de futurs tutoriels ou des questions et commentaires sur ceux d'aujourd'hui, veuillez les poster ci-dessous. Vous pouvez aussi me joindre sur Twitter @reifman directement.

Sélection d'une plate-forme

Pure offre toutes les fonctionnalités communes dont vous avez besoin dans un cadre de conception Web standard. Donc, si vous construisez un thème pour WordPress ou un site Web personnalisé, cela pourrait être une bonne option.

Pour les chefs de projet, il est généralement essentiel que les projets clients soient construits avec des outils standard faciles à comprendre et à gérer, mais surtout qu’il soit facile de recruter des talents qui apportent de l’expérience sur votre plate-forme. Bootstrap est parfait pour cela. Pure me semble assez simple pour que ce soit aussi un bon point de départ.

The Pure Feature Résumé

Voici un résumé des avantages et des fonctionnalités de Pure. Il offre:

Cependant, le plus impressionnant, Pure.css est super petit, juste 4,5KB minifiée + gzippée. Voici l'espace occupé par les différents composants de Pure dans votre environnement de production:

Pure est également bien testé et fonctionne sous IE 8+, Firefox, Chrome, Safari, iOS 6-8 et Android 4.x.

Et, vous pouvez toujours l'utiliser avec des éléments de Bootstrap, en les ajoutant là où vous en avez besoin. Je vais montrer un exemple ci-dessous.

Pure est construit sur Normalize.css, qui normalise les performances du framework sur les navigateurs. Normalize fournit une réinitialisation CSS par défaut qui:

  • préserve les valeurs utiles par défaut
  • normalise les styles pour une large gamme d'éléments
  • corrige les bugs et les incohérences courantes du navigateur
  • améliore la convivialité avec des améliorations subtiles
  • explique ce que fait le code en utilisant des commentaires détaillés

Commencer avec Pure

Le site Web de Pure est construit avec son cadre, de sorte que son code minimaliste et bien développé mène à un guide facile à naviguer et à utiliser. Voici un exemple du menu de gauche de Pure en action:

Vous pouvez ajouter Pure à votre page via le CDN gratuit de Yahoo. Il suffit d'ajouter ce qui suit élément dans votre page , avant les feuilles de style de votre projet:

Pour initialiser la largeur de réponse de votre site Web, définissez une balise méta pour la fenêtre d'affichage sur la largeur de votre appareil:

Layouts

Sur sa page Layouts, Pure propose un échantillon de téléchargements pour différents exemples de pages pour les besoins d'applications courantes:

Vous pouvez parcourir et télécharger ceux que vous souhaitez expérimenter ou ajouter à votre application. Ceux-ci inclus:

  • Blog
  • Email
  • galerie de photos
  • Page de destination
  • Galerie de prix
  • Menu latéral réactif
  • Menu horizontal à vertical réactif
  • Menu réactif horizontal à défilement

La base pure

La page Base fournit un bref aperçu de la fondation sous le cadre Pure, principalement Normalize.css:

Normalize.css est un petit fichier CSS qui offre une meilleure cohérence entre les navigateurs dans le style par défaut des éléments HTML. C'est une alternative moderne, compatible HTML5, à la réinitialisation CSS traditionnelle.

Vous pouvez également charger Normaliser séparément à l'aide du CDN de Yahoo pour une utilisation indépendante:

Et il existe d'autres petites fonctionnalités de base, telles que les classes à indiquer à Pure pour charger les images de manière réactive par fenêtre d'affichage:

Mais maintenant, jetons un coup d'oeil à certains des exemples de mises en page que Pure fournit.

Des grilles

Les grilles sont un aspect essentiel de la mise en page de sites Web, ce que Pure simplifie assez. Voici un exemple rapide d'une grille pure à quatre colonnes sur un écran de bureau:

Et voici comment cela se réduit en deux sur une fenêtre d'affichage de la taille d'une tablette:

Et enfin, une seule colonne sur un smartphone:

Les grilles pures consistent en deux types de classes: les grilles et les unités. Les éléments enfants des div de la grille doivent être des divs d'unités. Votre contenu va à l'intérieur des unités divs. Les classes d'unités sont nommées pour représenter leurs largeurs. Par exemple, pure-u-1-4 a une largeur de 25%.

Voici le code pour le quatrième sensible ci-dessus:

 
 
 
 
Lorem Ipsum
 
 Lorem ipsum dolor sit amet, consectetur elit adipisicing, promis de faire une incarnation temporelle, et dolore magna aliqua. Ut enim ad minim veniam. 
 
 
 
 
 
Dolor Sit Amet
 
 Quis nostrud exercite ullamco laboris nisi ut aliquip ex ea commodo conséquat. Duis aute irure dolor in reprrehenderit in voluptate velit esse. 
 
 
 
 
 
Proident laborum
 
 Dans culpa qui officia deserunt mollit anim id est laborum. incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco. 
 
 
 
 
 
Praesent consectetur
 
 Integer vitae lectus accumsan, egestas dui eget, urne ullamcorper. En feugiat tortor à turpis rhoncus tincidunt. Déjà écouté, par la lecture.

Comme vous pouvez le voir ci-dessus,  

représente la classe de grille externe. ensuite, 
 demande au navigateur d'afficher une seule colonne pour les fenêtres minimales, les demi-colonnes pour les colonnes moyennes et les quarts pour la grande largeur.

Vous pouvez en apprendre plus sur Pure Grids ici.

Formes

Pure prend en charge l'alignement des champs de saisie dans les formulaires et le style des champs spécialisés, tels que:

  • Formulaires en ligne
  • Formes empilées
  • Formulaires à deux colonnes
  • Formulaires multi-colonnes (montré ci-dessus)
  • Entrées groupées
  • Entrées requises
  • Entrées désactivées
  • Lecture seule des entrées
  • Entrées arrondies
  • Cases à cocher et radios

Vous pouvez voir tout cela décrit ici. Explorons un formulaire à deux colonnes, que Pure désigne comme un formulaire aligné:

En utilisant le pur-forme-aligné classe avec groupe (s) de contrôle pur, Pure garantit que chaque ensemble de champs est correctement positionné comme indiqué ci-dessus.

forme>

C'est un moyen assez simple de créer un formulaire hautement utilisable et bien présenté.

les tables

Pure facilite également la construction et la mise en forme des tableaux. Voici un exemple de tableau à rayures horizontales:

Vous pouvez voir le tableau ci-dessus codé en ajoutant simplement pure-table-impair classe rangées en alternance dans votre code pour changer le striping:

  
 # Faire Modèle Année 
   
 1 Honda Accord 2009 
 
 2 Toyota Camry 2012 
 
 3 Hyundai Elantra 2010 
 
 4 Gué Concentrer 2008 
 
 5 Nissan Sentra 2011 
 
 6 BMW M3 2009 
 
 7 Honda Civique 2010 
 
 8 Kia Âme 2010

Il y a un certain nombre d'autres exemples de tableaux présentés ici..

Les menus

Les menus de Pure sont également faciles à utiliser, notamment:

  • Menu vertical
  • Menu horizontal
  • Éléments sélectionnés et désactivés
  • Dropdowns
  • Menu vertical avec sous-menus
  • Menu horizontal à défilement
  • Menu vertical à défilement
  • Menu vertical réactif
  • Menu à défilement horizontal réactif
  • Menu horizontal à vertical réactif

Voir tous les menus illustrés ici. Voici comment coder un menu déroulant:

Fondamentalement, c'est juste un pur-menu-horizontalde pure-menu-liste et pur-menu-item pur-menu-a-enfants pur-menu-permettre-survol puis une liste d'éléments de menu enfants:

 
     
  • Accueil
    •  
  •  Contact 
       
    • Email
      •  
    • Gazouillement
      •  
    • Blog Tumblr
      •  
     
    •

Pure fournit un exemple de code JavaScript pour implémenter des fonctionnalités d'accessibilité supplémentaires dans vos menus..

Aller plus loin

Le site Web de Pure fournit d'excellents guides pour construire sur le cadre:

  • Utiliser des outils avec Pure tels que Bower et Grunt
  • Personnalisation de Pure et utilisation de tranches de la base de code
  • Extension des fonctionnalités et des classes Pure

Et vous pouvez explorer la combinaison de morceaux de Pure avec Bootstrap et JavaScript. Si vous souhaitez commencer par le faible encombrement et le style minimaliste de Pure, vous pouvez toujours exploiter diverses fonctionnalités de Bootstrap, en ne chargeant que ce dont vous avez besoin.. 

Voici un exemple de boîte de dialogue modale Bootstrap au-dessus de Pure, que vous pouvez voir sur la page d'extension de Pure:

En clôture

Bootstrap devient l'IBM des frameworks Web. C'est réactif, c'est un standard, et vous ne pouvez pas vous faire virer pour l'avoir choisi (sur un contrat récent, nous avons en fait dû renvoyer un développeur de thèmes pour ne pas avoir correctement implémenté Bootstrap). Mais si vous voulez quelque chose de plus petit, plus rapide et plus simple, consultez Pure.css..

Si vous essayez, merci de me faire connaître votre expérience dans les commentaires ci-dessous. Vous pouvez également me joindre directement sur Twitter @reifman. Et, vous pouvez également parcourir ma page d’instructeur Envato Tuts + pour lire mes autres tutoriels..

Liens connexes

  • Le pur blog
  • Pure sur GitHub
  • Pure: quoi, pourquoi et comment? (Envato Tuts +) 
  • Comparer à Bootstrap
Code
×