Pure.CSS - Configuration de l'environnement

Il y a deux façons d'utiliser Pure -

  • Local Installation - Vous pouvez télécharger le fichier pure.css sur votre machine locale et l'inclure dans votre code HTML.

  • CDN Based Version - Vous pouvez inclure le fichier pure.css dans votre code HTML directement à partir du Content Delivery Network (CDN).

Installation locale

  • Aller à https://purecss.io/start/ pour télécharger la dernière version disponible.

  • Placez le fichier téléchargé pure-min.css dans un répertoire de votre site Web, par exemple / css.

Exemple

Vous pouvez inclure le css fichier dans votre fichier HTML comme suit -

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel="stylesheet" href="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>

Il produira le résultat suivant -

Version basée sur CDN

Vous pouvez inclure le fichier pure.css dans votre code HTML directement à partir du réseau de diffusion de contenu (CDN). yui.yahooapis.com fournit du contenu pour la dernière version.

Nous utilisons la version CDN yui.yahooapis.com de la bibliothèque tout au long de ce didacticiel.

Exemple

Réécrivons maintenant l'exemple ci-dessus en utilisant pure.css du CDN PureCSS.io.

<html>
   <head>
      <title>The PURE.CSS Example</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" href = "https://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>

Il produira le résultat suivant -