Introducing Pure.css – A Lightweight Responsive Framework

Share this article

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.

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:

<div class="pure-menu pure-menu-horizontal">
  <ul class="pure-menu-list">
    <li class="pure-menu-item pure-menu-selected">
      <a href="#" class="pure-menu-link">About</a>
    </li>
    <li class="pure-menu-item pure-menu-has-children pure-menu-allow-hover">
        <a href="#" class="pure-menu-link">Services</a>
        <ul class="pure-menu-children">
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Designing</a>
          </li>
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">Marketing</a>
          </li>
          <li class="pure-menu-item">
            <a href="#" class="pure-menu-link">SEO</a>
          </li>
        </ul>
    </li>
  </ul>
</div>

You can also include this example script written in vanilla JavaScript to make the menu more accessible. It provides ARIA support, submenu arrow key navigation, and menu dismissal based on outside events.

Below is a demo of Pure’s navigation menu with a dropdown.

See the Pen Navigation Menu with Dropdown using Pure.css by SitePoint (@SitePoint) on CodePen.

Creating Forms Using Pure

To create a form with Pure you need to add the class name pure-form to the <form> element, as shown below:

<form class="pure-form">
  <fieldset>
    <legend>Pure Login Form</legend>

    <input type="email" placeholder="Email">
    <input type="password" placeholder="Password">

    <button type="submit" class="pure-button">Sign in</button>
  </fieldset>
</form>

Here’s a demo of Pure’s login form:

See the Pen Login Form with Pure.css by SitePoint (@SitePoint) on CodePen.

To create a stacked form, you can include the class name pure-form-stacked along with pure-form. You have the option to create an aligned form as well by adding the class name pure-form-aligned to your original form. The labels in an aligned form would be right aligned against the input controls. On smaller screens, however, the aligned form changes to a stacked form.

Creating Multi-Column Forms

You can use the form module along with the grid system to create multi-column forms. To do this, you need to wrap the controls in a pure grid and then specify the width of each of them using pure unit classes. The sample code below should help you understand the concept:

<form class="pure-form pure-form-stacked">
  <fieldset>
    <legend>Registration Form</legend>

    <div class="pure-g">
      <div class="pure-u-1 pure-u-md-2-5">
        <label for="name">Name</label>
        <input id="name" type="text">
      </div>

      <div class="pure-u-1 pure-u-md-1-5">
        <label for="country">Country</label>
        <input id="country" type="text">
      </div>

      <div class="pure-u-1 pure-u-md-2-5">
        <label for="email">E-Mail</label>
        <input id="email" type="email">
      </div>
    </div>

    <button type="submit" class="pure-button">Register</button>
  </fieldset>
</form>

To group many input controls together you have to wrap them in a <fieldset> element and add the class name pure-group. You can also set the size of input controls using the class pure-input-*. For example, pure-input-1-2 sets the width of the form to 50%.

Here’s a demo of a multi-column, grid-based form:

See the Pen Multi-column Grid-based Form with Pure.css by SitePoint (@SitePoint) on CodePen.

Extending and Customizing Pure

If you are not satisfied with the grid system that Pure provides you are free to create your own. You can use the starter kit tool on the official website to create your grid system. You may define your own breakpoints and grid units and you can specify the class names to use.

Like any framework, you can add additional styling on top of minimal styling that Pure provides. For example, you can define the styling of a “success” button:

.success-button {
  background: rgb(28, 184, 65);
  color: white;
  border-radius: 0px;
}

Then all you have to do is add the .success-button class from that rule set to a button element, to go along with Pure’s existing styles:

<button class="pure-button success-button">Success</button>

If you’re familiar with CSS, then this is nothing new, but beginners can see how this and other frameworks allow you to customize the base look of existing components with new styles.

Using Pure with Other Frameworks

Pure has no issues with simultaneous use of other frameworks like Bootstrap. For example, you can use Bootstrap’s modal.css and modal.js with Pure. This provides a lightweight way to create a modal. Here is the sample code:

<button data-target="#myModal" 
        class="pure-button" data-toggle="modal">
  Launch The Modal
</button>

<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h1 id="myModalLabel">A Functional Bootstrap + Pure Modal</h1>
      </div>

      <div class="modal-body">
        <p>To create the modal you just need to include the <code>modal.css</code> and <code>modal.js</code> file from Bootstrap. Pure will take care of all low level styling. The result is a fully-functional Modal using just a fraction of the CSS.</p>
     </div>

      <div class="modal-footer">
        <button type="button" class="pure-button"
                id="success-button" data-dismiss="modal">
          Close
        </button>
      </div>
    </div>
  </div>
</div>

Below is a demo of this modal:

See the Pen Custom Button with Pure.css and Bootstrap Modal by SitePoint (@SitePoint) on CodePen.

Conclusion

Irrespective of its small size, Pure can meet most of your UI design needs. I suggest you give it a try and see how it fares. To follow the development of the framework visit Pure on GitHub.

Frequently Asked Questions about Pure CSS Framework

What makes Pure CSS a lightweight framework?

Pure CSS is considered a lightweight framework because it is small in size, with the entire set of modules clocking in at 3.8KB minified and gzipped. This makes it incredibly fast to load, which is a significant advantage for web development. It doesn’t come with unnecessary features or bloated code, which means it won’t slow down your website’s performance. This is particularly important in today’s digital age where speed is a crucial factor in user experience and SEO ranking.

How does Pure CSS ensure responsiveness in web design?

Pure CSS is built on Normalize.css which provides an optimal starting point for web development. It ensures that all elements have consistent styles across different browsers. Moreover, it uses a responsive grid system that scales beautifully on all device sizes. This means that websites built with Pure CSS will look great and function well on desktops, tablets, and mobile devices.

How can I customize Pure CSS for my specific needs?

Pure CSS is designed to be easily customizable. It provides a minimalistic style that you can build upon according to your project’s needs. You can override the styles, add your own, or even use it with other CSS libraries. It also works well with CSS pre-processors like LESS or SASS, allowing you to create more complex styles with less code.

What are the main components of Pure CSS?

Pure CSS comes with a set of small, responsive CSS modules that you can use in every web project. These modules include grids, forms, buttons, tables, menus, and more. Each module is independent, which means you can use one, some, or all of them depending on your needs.

How does Pure CSS compare to other CSS frameworks?

Pure CSS stands out for its simplicity and lightweight nature. While other frameworks like Bootstrap or Foundation come with a lot of features and components, they can also be quite heavy and complex. Pure CSS, on the other hand, provides just the essentials, making it a great choice for projects where speed and performance are a priority.

Is Pure CSS suitable for beginners?

Yes, Pure CSS is beginner-friendly. Its simplicity and minimalistic approach make it a great starting point for those new to web development. The documentation is clear and easy to understand, and there are plenty of examples and tutorials available online to help you get started.

Can I use Pure CSS with JavaScript?

Absolutely. While Pure CSS is a CSS framework, it can certainly be used in conjunction with JavaScript for more dynamic and interactive web applications. It doesn’t include any JavaScript itself, giving you the freedom to use whatever JavaScript library or framework you prefer.

Is Pure CSS actively maintained and updated?

Yes, Pure CSS is an open-source project hosted on GitHub, where it is actively maintained and updated by a community of contributors. This means that it continues to improve and evolve, and any bugs or issues are usually addressed promptly.

Can I contribute to the Pure CSS project?

Yes, as an open-source project, Pure CSS welcomes contributions from the community. Whether you want to fix a bug, add a new feature, or improve the documentation, your contributions are appreciated. You can get started by checking out the project on GitHub.

Is Pure CSS free to use?

Yes, Pure CSS is completely free to use. As an open-source project, it is released under the BSD License, which means you can use it for any kind of project, whether personal or commercial, without any cost.

Monty ShokeenMonty Shokeen
View Author

Monty is a front-end developer who loves to learn about new JavaScript libraries and frameworks. He has been doing front-end development for three years now and likes to write about interesting libraries and tools that he comes across in his research.

AdvancedCSSbootstrap modalBootstrap-resourcescss frameworkLouisLPure frameworkPure.cssYahoo pure
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form