পৃষ্ঠাসমূহ

.

Search Your Article

Total Pageviews

Saturday, March 11, 2017

Pure.CSS Environment Setup

How to Use PURE.CSS?

There are two ways to use Pure:
  • Local Installation - You can download the pure.css file on your local machine and include it in your HTML code.
  • CDN Based Version - You can include the pure.css file into your HTML code directly from the Content Delivery Network (CDN).

Local Installation

  • Go to http://purecss.io/start/ to download the latest version available.
  • Then, put the downloaded pure-min.css file in a directory of your website, e.g. /css.

Example

Now you can include the css file in your HTML file as follows −
<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>
It will produce the following result −

CDN Based Version

You can include the pure.css file into your HTML code directly from the Content Delivery Network (CDN). yui.yahooapis.com provides content for the latest version.
We are using yui.yahooapis.com CDN version of the library throughout this tutorial.

Example

Now let us rewrite the above example using pure.css from PureCSS.io CDN.
<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>
It will produce the following result −

No comments:

Post a Comment