Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Pure CSS Grid By Yahoo

DZone's Guide to

Pure CSS Grid By Yahoo

· Web Dev Zone
Free Resource

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

  • Pure CSS is a lightweight styles collection by Yahoo.
  • It is responsive in nature.
  • This framework is created on Small mobile devices screen in mind.
  • It is easy to extend to create your own custom styles.
  • This CSS library can be downloaded or included from CDN.
  • The link is below :-)

  • <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
  • In this Demo, "We will explore the Grids Layout provided by the pure css".
  • Pure Grids, pure-g/pure-g-r is the parent class of every grid.The child classes can be pure-u-1-2,pure-u-1-3,pure-u-1-4...
  • Below code shows pure-g example.It provides only grid Layout feature.But Its is not responsive in nature.Texts overlaps each other after certain width.
       Use pure-g class ( pure-g-not-responsive.html),
<html>
 <head>
  <title>Yahoo's Pure Css Use : g-r Responsive</title>
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
  <style>
   .my-style{
    border: 1px solid green;
     border-right: 1px solid green;
        border-top: 1px solid green;
        border-bottom: 1px solid green;
   }
  </style>
 </head>
 <body>
   
  <div class="pure-g-r">
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
   
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
   
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
  </div>
   
 </body>
</html>
  • Output in Browser

  • If we will reduce the width of Browser window, then the text will start overlapping others,
 Use of pure-g-r class( pure-g-r-responsive.html),
<html>
 <head>
  <title>Yahoo's Pure Css Use : g-r Responsive</title>
  <link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.1.0/pure-min.css">
  <style>
   .my-style{
    border: 1px solid green;
     border-right: 1px solid green;
        border-top: 1px solid green;
        border-bottom: 1px solid green;
   }
  </style>
 </head>
 <body>
   
  <div class="pure-g-r">
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
   
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
   
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
      <div class="pure-u-1-4">
       <p class='my-style'>pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4 pure-g-r with pure-u-1-4</p>
      </div>
  </div>
   
 </body>
</html>
  • Output in Browser,
  •  pure-g-r class is pure responsive in nature. If we will reduce the width of the browser window, you can see it is not overlapping any grid or text unlike pure-g.




Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:

Published at DZone with permission of Sandeep Patel, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}