Web Designing using Pure.css
In today’s blog I will be introducing Pure.css (simply referred to as “Pure”), it’s use case and advantages over its counterparts. The blog will get you acquainted with the basics of the Pure. I shall discuss the basic idea behind its inception and what are its different components and finally how to integrate and implement it in web projects.
What is Pure.css?
Pure.css a set of responsive CSS modules build by YUI team.It is a small framework made up of CSS modules. All its modules put together weigh less than 3.8KB if served minified and gzip’d. One can save even more space(bytes) if we decide to use only one or two of the modules.
Pure’s minimal styling interference lets one ensure that one can customise the look and feel of web elements to meet the needs without much fuss.
Whose alternative is Pure.css?
Twitter Bootstrap, Zurb Foundation etc.
How is it Better?
There are several popular and widely accepted CSS frameworks available, but they are very heavy for they contain lots of CSS code. Leaving that , one needs to customise the vanilla CSS code with personal styling making it even more stuffed.
The Pure fixes this issue by making only requisite CSS modules required by almost every web projects. Pure allows writing of own style for customisation on top of it.
- Pure is ridiculously tiny. The entire set of modules clocks in at 3.8KB minified and gzipped. That is pretty tiny compared to other CSS frameworks.
- Unlike other popular CSS frameworks like Bootstrap, Pure does not come with any JavaScript Plugin out of the box. In fact, there only a few instance where it uses JavaScript, like drop down menus and fixed top menu.
Using Pure
Add the following code within the head section of your HTML page. That will include all of the modules described above to your web application.
<link rel=”stylesheet” href=”https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity=”sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD” crossorigin=”anonymous”>
Use Case of Pure
Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you’ll save even more bytes.
Components of Pure.css
Almost every web application requires following modules. The following modules are existent in Pure:
- Base: which is for normalization. Setting CSS rules for typography, headings, code elements, link, img etc comes under this.
- Grids: A responsive Grid to set the layout.
- Forms: Style for default, stacked, Aligned and Multi-Column form; Grouped Inputs, Input Sizing and some more related stuff comes under this module.
- Navigation: This module comprises of Horizontal Menu, Menu with Headings, Vertical Menu, Dropdowns, Menus with Disabled Items and Paginations.
- Tables: Style for Default, Bordered, with Horizontal Borders and Striped tables are included in this module.
- Buttons: This module includes styles for Default, Disabled, Active, Primary and several customized buttons.
Now let us discuss some of the components in greater details :
The Grid System
The grid system in Pure is quite different from that of Bootstrap and it is extremely powerful and easy to manipulate after you get the basics. There are a few points one needs to keep in mind like :
- 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-1–2 has a width of 50%.
- 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 details of the grid system, refer to the official documentation here.
Navigation Menus in Pure
Pure has vertical menus by default. Minimal styling makes the customization easy , Checkout the code below :
<div class=”pure-menu”>
<span class=”pure-menu-heading”>Brand Namespan>
<ul class=”pure-menu-list”>
<li class=”pure-menu-item”>
<a href=”#” class=”pure-menu-link”>Homea>
li>
<li class=”pure-menu-item”>
<a href=”#” class=”pure-menu-link”>Productsa>
li>
<li class=”pure-menu-item”>
<a href=”#” class=”pure-menu-link”>Contacta>
li>
<li class=”pure-menu-item”>
<a href=”#” class=”pure-menu-link”>Bloga>
li>
ul>
div>
To change the menu to the horizontal, add the class name pure-menu-horizontal.
Creating Dropdown Navigation
All you need to do is add the class name pure-menu-has-children to the appropriate menu item. To display the sub menu on hover of mouse , include the class name pure-menu-allow-hover. Checkout the code below :
<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”>Abouta>
li>
<li class=”pure-menu-item pure-menu-has-children pure-menu-allow-hover”>
<a href=”#” class=”pure-menu-link”>Servicesa>
<ul class=”pure-menu-children”>
<li class=”pure-menu-item”>
<a href=”#” class=”pure-menu-link”>Designinga>
li>
<li class=”pure-menu-item”>
<a href=”#” class=”pure-menu-link”>Marketinga>
li>
<li class=”pure-menu-item”>
<a href=”#” class=”pure-menu-link”>SEOa>
li>
ul>
li>
ul>
div>
Forms Using Pure
To build a form with Pure all dyou need to do is add the class name pure-form to the element. Checkout the code below :
<form class=”pure-form”>
<fieldset>
<legend>Pure Login Formlegend>
<input type=”email” placeholder=”Email”>
<input type=”password” placeholder=”Password”>
<button type=”submit” class=”pure-button”>Sign inbutton>
fieldset>
form>
The forms can be stacked, aligned ,muti-columned, grouped as well. To checkout the code refer here.
Customizing Pure to meet your Styling
If you seek a the grid system different from that the Pure provides you are free to create your own. One can use the starter kit tool on the official website to create the grid system. Like any other framework, you can add additional styling like below :
.success-button {
background: rgb(28, 184, 65);
color: white;
border-radius: 0px;
}
Then all you have to do is add the .success-button class
<button class=”pure-button success-button”>Successbutton>
Can we plug together Pure.css with its counter parts?
Yes we can use a combination of Pure, a CSS framework, and your own customize CSS. Pure integrates seamlessly with any framework, CSS or JS.
Pure has no issues working with other frameworks like Bootstrap. Checkout the code below, it use Bootstrap Modal with Pure.
<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 Modalh1>
div>
<div class=”modal-body”>
div>
<div class=”modal-footer”>
<button type=”button” class=”pure-button”
id=”success-button” data-dismiss=”modal”>
Close
button>
div>
div>
div>
div>
Up till now we have discussed almost all the basic concepts and components of the Pure. Moving ahead , I have been working on integrating Pure with the Play Framework, which is an extremely popular framework for web development. It is pretty simple and awesome to see how seamlessly easy it is to use Pure with Play.
You can simply begin development with Play Framework and Pure using my seed template, available at the LIGHTBEND ACTIVATOR/TEMPLATES: play-scala-pure-seed . It is a starter template readily available with everything you need to begin working with Pure and Play.
You can also checkout my other template at LIGHTBEND ACTIVATOR/TEMPLATES: play-scala-pure-tutorial. This is a tutorial template and contains various components designed using Pure.
Happy Reading !!
References :
