Home > Features > Dev Depot: Pure - Small and Responsive CSS Modules • Bookmark   • Newsletters   • Register Search Options


Dev Depot: Pure - Small and Responsive CSS Modules

Dev Depot: Pure - Small and Responsive CSS Modules

September 27, 2013
Text size: 
View in Digital Mag
Get XBIZ News
XBIZ Research
Will virtual reality boost the paysite market?
Yes, it will soon
Yes, but in a few years
Out of 151 votes. Results based on votes submitted by members of XBIZ.net social network.

" Pure is available on the Yahoo! CDN over HTTP, where individual modules can be accessed or even combined together within a single combo request and receive a single CSS file back. "

Search innovator Yahoo has long held a reputation for technical creativity and now the veteran Internet powerhouse has released a set of streamlined CSS coding modules called Pure (www.purecss.io), which developers can use to enhance any web project.

It all starts with a simple style sheet link and takes off from there: <link rel=?stylesheet? href=?http://yui.yahooapis.com/pure/0.2.1/puremin.css?>

According to Yahoo, Pure “is ridiculously tiny,” and boasts a minimal footprint for the entire set of modules that weighs only 4.3KB when minified and gzipped, “without forgoing responsive styles, design, or ease of use.”

“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,” states a Pure rep. “If you decide to only use a subset of these modules, you’ll save even more bytes.”

These modules include Base, Buttons, responsive and non-responsive Forms, responsive and non-responsive Grids, responsive and non-responsive Menus and Tables.

Building upon Normalize.css, Pure acts as your CSS foundation by providing layout and styling for native HTML elements, plus the most common UI components, all made with cross browser and mobile device compatibility in mind.

Pure creates responsive layouts right out of the box, so elements will look great on all screen sizes, and encourages developers to write their own application styles on top of it, as it is designed to make it easy to override stock styles, while still staying out of the way.

“By using Grids, Menus, and more, it’s easy to create beautiful responsive layouts for all screen sizes [and we have] made it easy for you to get started on your next web project with a rock-solid foundation,” the rep added, explaining that unlike other frameworks, Pure’s design is unopinionated, minimal and flat. “We believe that it’s much easier to add new CSS rules than to overwrite existing rules, [so by] adding a few lines of CSS you can customize Pure’s appearance to work with your web project.”

The publisher notes that Pure comes with a minimalistic style set that allows users to customize it with their own CSS, and suggests Yahoo’s YUI Skin Builder as a great tool for those who need help in developing a theme to use; since with single click simplicity, the Skin Builder is able to generate all of the CSS code necessary to create a Pure theme.

To begin using Pure, simply select the modules that you need using “rollups,” which consist of all of the Pure modules in two flavors; a regular (responsive) one, and a more streamlined non-responsive one; so users can choose the one that’s right for their project.

Pure is available on the Yahoo! CDN over HTTP, where individual modules can be accessed or even combined together within a single combo request and receive a single CSS file back. For example, the following link contains a combo URL that only includes the files for the Base, Grids, and Forms modules (note the hardcoded version ID, 0.2.1): <link rel=?stylesheet? href=?http://yui.yahooapis.com/combo?pure/0.2.1/basemin.css&pure/0.2.1/grids-min.css&pure/0.2.1/forms-min.css?>

Alternatively, Pure is also available on the CloudFlare.com CDN.

The Purecss.io website provides a range of coding examples, including common uses such as responsive product landing pages, a photo gallery, a responsive email layout and a blog page with a list of posts. By studying the source code of these examples you will see the ease (dare we say, “purity”) with which Pure enables users to write cleaner code.

Pure is also highly extensible and its website provides helpful information on making the most of its powerful features — including offering advice to coders on how they can help maintain the standardized naming conventions used by Pure — for consistent results while customizing the CSS for their own needs.

Whether it’s one element, a single page or a whole website, Pure will give you a clean jump start that will help your design look its best and load quickly, regardless of the type of platform it is viewed on. Try it and see for yourself.


International Distributors Discuss Global Sex Toy Market Trends

The adult entertainment industry can bring considerable rewards to businesses that think globally, and that includes the lucrative sex toys/pleasure products market. European, Australian or Japanese companies... More »

Pleasure Product Manufacturers Talk Global Strategies for Success

From branding to shipping, companies with international reach talk to XBIZ about how to appeal to consumers worldwide. At LELO, trade marketing manager Zabrina Law says there is not a lot of variation... More »

E.U. Sex Toy Brands Bolster U.S. Market With Innovation

Europeans are living the American dream. Five weeks of paid vacation, government-funded medicine and education, and a healthier approach to sexual wellness are commonplace for our cousins across the ocean.... More »
Stay informed of the latest industry developments. Get XBIZ newsletters delivered to your inbox. Subscribe today!
Enter email address:

* To manage existing subscriptions click here.

Submit your press release to
multiple news outlets with 1 click.
Subscribe to RSS news feeds or
add free content to your website.
Access XBIZ news and articles
with your mobile device.
Subscribe to XBIZ Premiere magazine, the industry's leading adult retail trade publications, delivering the most timely and comprehensive business news and information to producers and retailers of adult products.



Nov 04 - Nov 06
Edison, New Jersey

2016 Inked Awards

Nov 05 - Nov 05
Edison, New Jersey

XBIZ 2017

Jan 09 - Jan 13
Hollywood, CA

XBIZ Awards 2017

Jan 12 - Jan 12
Los Angeles, CA
Everyday thousands of business professionals browse XBIZ's industry directory for quality products and services. Not listed yet? Your company could be losing potential new business. Submit your company today!
Use XBIZ RSS feeds to stay informed of the latest industry developments or as a content syndication tool for your website!