Saturday, March 11, 2017

Pure.CSS Responsive Design

PURE.CSS has several special classes to create a responsive design.
S.N.Class Name & Description
1.pure-u-*
Sets the container to occupy required space on any device.
2.pure-u-sm-*
Sets the container to occupy required space on a devices with width ≥ 568px.
3.pure-u-md-*
Sets the container to occupy required space on a devices with width ≥ 768px.
4.pure-u-lg-*
Sets the container to occupy required space on a devices with width ≥ 1024px.
5.pure-u-xl-*
Sets the container to occupy required space on a devices with width ≥ 1280px.
In below example, we're going to create a responsive grid with a row with four columns. The columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens.
This is done by adding the .pure-u-1 class for small screens, .pure-u-md-1-2 for medium-sized screens, and .pure-u-lg-1-4 for large screens. Resize the page to see the grid respond to the screen size.

Example

purecss_responsive_design.htm
<html>
   <head>
      <title>The PURE.CSS Containers</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">
      <link rel="stylesheet" href="https://yui.yahooapis.com/pure/0.6.0/grids-responsive-min.css">

      <style>
         .grids-example {
            background: rgb(250, 250, 250);
            margin: 2em auto;            
            font-family: Consolas, 'Liberation Mono', Courier, monospace;
            text-align: center;     
         } 

         .graybox {
            background: rgb(240, 240, 240);
            border: 1px solid #ddd;   
         }  
      </style>
   </head>
   <body>         
      <div class="grids-example">          
         <div class="pure-g">
      <div class="pure-u-1-1"><div class="graybox"><p>These four columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens.</p></div></div>
            <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>First Column</p></div></div>
            <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>Second Column</p></div></div>
            <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>Third Column</p></div></div>
            <div class="pure-u-1 pure-u-md-1-2 pure-u-lg-1-4"><div class="graybox"><p>Fourth Column</p></div></div>
         </div>
      </div>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1"><div class="graybox"><p>This column is to occupy the complete space of a row.</p></div></div>
         </div>
      </div>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-2-5"><div class="graybox"><p>This column is to occupy the two-fifth of the space of a row.</p></div></div>
         </div>
      </div>
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-3-5"><div class="graybox"><p>This column is to occupy the three-fifth of the space of a row.</p></div></div>
         </div>
      </div>   
      <div class="grids-example">
         <div class="pure-g">
            <div class="pure-u-1-3"><div class="graybox"><p>Column 1: This column is to occupy the one-third of the space of a row on all devices.</p></div></div>
            <div class="pure-u-1-3"><div class="graybox"><p>Column 2: This column is to occupy the one-third of the space of a row on all devices.</p></div></div>
            <div class="pure-u-1-3"><div class="graybox"><p>Column 3: This column is to occupy the one-third of the space of a row on all devices.</p></div></div>
         </div>
         </div> 
   </body>
</html>

Result

Verify the result.
These four columns should stack on small screens, should take up width: 50% on medium-sized screens, and should take up width: 25% on large screens.
First Column
Second Column
Third Column
Fourth Column
This column is to occupy the complete space of a row.
This column is to occupy the two-fifth of the space of a row.
This column is to occupy the three-fifth of the space of a row.
Column 1: This column is to occupy the one-third of the space of a row on all devices.
Column 2: This column is to occupy the one-third of the space of a row on all devices.
Column 3: This column is to occupy the one-third of the space of a row on all devices.

Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)