

Pay no attention to the style, please: my only goal in this tutorial is to introduce you to a new approach, an alternative way to write code, allowing developers who have no knowledge of this opportunity to start from the very beginning and learn from the basics. Please note that I’ll report, to avoid confusion, only the HTML code and you’ll find all the specifications regarding the style in a unique downloadable file. Once done, we can go on with the three different tasks we’ve scheduled at the very beginning of this article.

Other awesome features of Pure include styles for vertical and horizontal menus, forms, buttons, various common table styles and it’s also Responsive by default (with a non-responsive option).Īt this point, the first thing needed to start discovering the interesting world of Pure, is to include the Pure CSS file in our project by fetching it from Yahoo’s CDN:
Purebasic pad number skin#
Pure provides an extremely minimalist look that is super-easy to customize in several aspects.įor example, you can use the Skin Builder to create your own color schemes and modify other features like the border-radius and vertical padding, and the Grid Builder to make your own grid system with custom media query breakpoints and column sizes. In fact, it is a light and complete library whose weight is only 4.4KB minified and gzipped and composed of six basic modules, that are:Īmong its most important characteristics, it should be mentioned that the library is based on the famous Normalize.css, a customizable CSS file that makes browsers render all elements more consistently and in line with modern standards, and which helps to fix cross-browser compatibility issues (which are always many!). It works in IE 7+, Firefox, Chrome, Safari, iOS 6.x and Android 4.x.

Pure is a framework that helps you to manage all the elements of a website so that they’ll look great on all screen sizes, regardless of the device you have chosen to use.
