Pure, the Lightweight and Mobile Friendly Solution

Jake Bernstein - June 24, 2015

You want to make the best possible project, but you keep on adding framework after framework until your project is so big and bulky that no one wants to use it, let alone have it waste space on their device. But how can you build a lightweight and attention-grabbing RhoMobile App?

One answer might be Pure.css, a lightweight CSS framework that provides appealing layouts and stylings for native HTML elements. Pure includes some of the most common UI components, but none of the excess baggage. The entire set of modules in Pure clocks in at 4.0KB minified and gzipped.

Pure is responsive out of the box and was designed with mobile in mind. Elements look great on any screen, automatically adjusting to fit whatever device or monitor is in use.

You can include Pure in your projects with the following line:

http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

The Grid System

The grid system in Pure differs from that of other frameworks such as Bootstrap and it is powerful and easy to work with once you get past the basics. There are a few things to keep in mind when starting:

Pure Grids consist of two types of classes: the grid class (pure-g) and unit classes (pure-u or pure-u-*)

Units have various class names that represent their widths. For example, pure-u-1-2 has a width of 50 percent, whereas pure-u-1-5 would have a width of 20 percent. Your columns can get as small as pure-u-1-24, so you have plenty of options for customization.

Child elements contained within an element with a pure-g class name must be a grid unit with a pure-u or pure-u-* class name

All content which is visible to people needs to be contained inside a grid unit. This ensures that the content will be rendered properly.

Here’s an example of a pure grid with four columns that are each one-fourth width.

div class="pure-g">
     div class="pure-u-1-4">p>Fourthsp>div>
     div class="pure-u-1-4">p>Fourthsp>div>
     div class="pure-u-1-4">p>Fourthsp>div>    
    div class="pure-u-1-4">p>Fourthsp>div>
div>

Pure Grids are useful when you want to present pictures, text boxes, or any other form of information in a structured manner. You could create a picture gallery, a contacts page, or anything else that comes to mind.

Pure Responsive Grid

Pure has a mobile-first responsive grid system that can be used declaratively through CSS class names. It's a robust and flexible grid that builds on top of the default grid. You can include this responsive grid system in your projects by including the following
tag in your page:



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

Pure Responsive Grid allows you to include additional class names like pure-u-md-2-5 to control the width of different elements at specific breakpoints. Take a look at the following HTML:

One

Two

Three

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

An example of a responsive Grid:

Screen Shot 2015-06-23 at 4.40.08 PM.png

Responsive Images

When using Responsive Grids, you'll want your images to be fluid as well so they grow and shrink with the content while maintaining the correct ratio. To do this, just add the .pure-img class on them.

Screen Shot 2015-06-23 at 4.43.20 PM.png

For more details about the grid system, you can check out Pure’s documentation.

Menus Galore

Pure offers a variety of different menu types ranging from drop-down menus to vertical menus with submenus. Minimal styling and use of low specificity selectors make it a lot easier to customize the menus.

Vertical Menus

The default menu type. Here is the code to create a vertical menu:

You can easily change this vertical menu to a horizontal menu or scrollable menu by adding the class name pure-menu-horizontal and pure-menu-scrollable respectively to the pure-menu

. You can also mark a menu item as selected, disabled using the class names pure-menu-selected, and pure-menu-disabled.

Drop Down Menus

Creating a dropdown menu 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 help clear things up:

Example of Dropdown menu:

Screen Shot 2015-06-23 at 4.47.04 PM.png

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.

Vertical Menu with Submenus

The same construct used to create dropdowns works in vertical menus as well. You may nest submenus, but keep in mind that complex menus can present usability challenges on small screens.
For more details about the menus, check out Pure’s documentation.

Purest of Forms

Pure’s form options include plain forms, forms within grids, grouped inputs, and more.

Default Forms

To create a form with Pure you need to add the class name pure-form to the

element, as shown below:

Pure Login Form

Which would create:

Screen Shot 2015-06-23 at 11.52.36 AM.png

To create a stacked form with input elements below the labels, add the pure-form-stacked class name to a

element alongside pure-form.

Screen Shot 2015-06-23 at 11.55.51 AM.png

Grouped Inputs

To group sets of text-based input elements, wrap them in a

element with a pure-group classname. Grouped inputs work well for sign-up forms and look natural on mobile devices. Below is the code for a Grouped Input Form:

form class="pure-form">
    fieldset class="pure-group">
        input type="text" class="pure-input-1-2" placeholder="Username">
        input type="text" class="pure-input-1-2" placeholder="Password">
        input type="email" class="pure-input-1-2" placeholder="Email">
    fieldset>

    fieldset class="pure-group">
        input type="text" class="pure-input-1-2" placeholder="A title">
        textarea class="pure-input-1-2" placeholder="Textareas work too">textarea>
    fieldset>

    button type="submit" class="pure-button pure-input-1-2 pure-button-primary">Sign inbutton>
form>

Screen Shot 2015-06-23 at 12.00.30 PM.png

Input Sizing

Input elements have fluid width sizes in a syntax that is similar to Pure Grids. You can apply a pure-input-* class to these elements.
You can control input sizing even further by wrapping them in grid containers. In the example below, the
elements have a pure- class, but are wrapped in a

with a specific grid class.

Screen Shot 2015-06-23 at 4.37.31 PM.png

This is only the tip of the iceberg for forms, check out all the other features offered.

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:

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.

Pure Plays Well with Others

Pure has no issues with simultaneous use of other frameworks like Bootstrap and jQuery. 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:

class="pure-button" data-toggle="modal"> Launch The Modal

As a developer, you can pull in Pure as a foundational CSS framework, and then include specific Bootstrap or jQuery modules that your application may require. There are several benefits to doing this:

Your website or webapp's CSS will be a lot smaller — up to 5X smaller in some cases!
You get Pure's minimalist look that's easy to build on top of. No need to overwrite styles!
You can take advantage of Bootstrap's ecosystem without pulling in a monolithic Bootstrap CSS file.

regardless of its small size, Pure can meet most of your UI design needs. Give it a try and see how it fares. Follow the development of Pure and see what's new.

Jake Bernstein

Please Register or Login to post a reply

Pure, the Lightweight and Mobile Friendly Solution

Replies

Related Articles

Embrace Your Inner Visionary: Learning Aurora Vision Studio™

Developer Portal Outages