Article : Introducing Pure.css

[SitePoint_Articles]

Extract from SitePoint Article “Introducing Pure.css – A Lightweight Responsive Framework” by Monty Shokeen

Frameworks make it easy to design websites. You may already have been using popular frameworks like Bootstrap in your projects. Today I will introduce you to Pure.css (simply referred to as “Pure”), a small framework made up of CSS modules. All its modules put together weigh less than 4.0KB if served minified and gzip’d. You can save even more bytes if you decide to use only one or two of the modules.

Pure’s minimal styling ensures that you can customize the look of elements to suit your needs without much effort. You can include Pure in your projects using the following line:

<link rel="stylesheet"  href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

Introducing the Grid System

The grid system in Pure differs considerably from that of Bootstrap and it is powerful and easy to work with once you get past the basics. There are a few things that you need to keep in mind before proceeding:

• Pure has a wrapper grid class called pure-g and unit classes named
  pure-u-* . Make sure all your content is inside the grid units for
  proper rendering.
• Widths are calculated based on fractions. The fractions themselves
  are decided by class names. For example, pure-u-2-5 has a width of
  40%.
• All child elements within a pure-g element must have the class name
  pure-u or pure-u-* .

By using additional class names like pure-u-md-2-3 you can control the width of different elements at specific breakpoints. Take a look at the following HTML:

<div class="pure-g">
  <div class="pure-u-1 pure-u-md-1-5"> One </div>
  <div class="pure-u-1 pure-u-md-2-5"> Two </div>
  <div class="pure-u-1 pure-u-md-2-5"> Three </div>
</div>

The above code does the following: When the screen size is smaller than 568px, all divs will be 100% wide. When the screen size is above the medium screen category (768px) the first div is set to a width of 20% while others are 40% wide each.

The grids are based on a 5th and 24th fraction system. For example, in the class name pure-u-x-24, x can be anything between 1 and 24 inclusive. Furthermore, pure-u-1-12 and pure-u-2-24 are the same. For a more detailed discussion of the grid system, refer to the official documentation.

Navigation Menus in Pure

Pure provides vertical menus by default. Minimal styling and use of low-specificity selectors make it a lot easier to customize the menus. Here is the code to create a vertical menu:

<div class="pure-menu">
  <span class="pure-menu-heading">Brand Name</span>
 
  <ul class="pure-menu-list">
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Home</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Products</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Contant</a>
    </li>
    <li class="pure-menu-item">
      <a href="#" class="pure-menu-link">Blog</a>
    </li>
  </ul>
</div>

To change the above menu to horizontal, add the class name pure-menu-horizontal. Additionally, you can mark a menu item as selected or disabled using the class names pure-menu-selected and pure-menu-disabled, respectively.

Creating Dropdown Navigation

Creating dropdown navigation requires small changes in the markup. You need to add the class name pure-menu-has-children to the appropriate menu item. To display the submenu on hover, include the class name pure-menu-allow-hover. The code snippet below should clear things up:

Continue Reading article on SitePoint …