Forum | Derniers tutoriels de développement web
 

Pure.CSS Tutorial


Pure est une feuille de style en cascade (CSS) développé par YAHOO . Il contribue à créer des sites Web plus rapide, belles et sensibles. Il est avisé de l'espace même et est très petite taille comparable à 4 Ko.


Public

Ce tutoriel est destiné aux professionnels qui souhaitent apprendre les bases de Pure et comment l'utiliser pour créer des sites Web plus rapides, belles et sensibles. Ce tutoriel explique tous les concepts fondamentaux de Pure.


Conditions préalables

Avant de procéder à ce tutoriel, vous devriez avoir une compréhension de base de HTML, CSS, JavaScript, Modèle de document de l'objet (DOM), et un éditeur de texte. En outre, il vous aidera si vous savez comment les applications basées sur le Web fonctionnent.


Exécuter pure en ligne

Pour la plupart des exemples donnés dans ce tutoriel, vous trouverez une option Try-it. Utilisez cette option pour exécuter vos programmes purs sur place et profiter de votre apprentissage.

Essayez l'exemple suivant en utilisant le Try-il option disponible dans le coin supérieur droit de la boîte de code exemple suivant -

<html>
   <head>
      <title>The PURE.CSS Example</title>
	  <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
	  
	  <style>
		.grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;
            border-top: 1px solid #ddd;
            border-bottom: 1px solid #ddd;			
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;					
		 }
	  </style>
	  
  </head>
  
  
  <body>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><p>First Column</p></div>
            <div class="pure-u-1-3"><p>Second Column</p></div>
            <div class="pure-u-1-3"><p>Third Column</p></div>
         </div>
      </div>
   </body>
</html>