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 179 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.


WIA Profile: Lupe Martinez

Each month, industry news media organization XBIZ spotlights the career accomplishments and outstanding contributions of Women in Adult. WIA profiles offer an intimate look at the professional lives of... More »

Jose Sanz Weaves a Profitable Tapestry at FreeWebCams

Navigating the complexities of customer service in the camming industry is a varied and oftentimes chaotic task, pulling even the most seasoned professionals in a multitude of directions. Fortunately for... More »

Spanish Pleasure Products Brand Adrien Lastic Puts Unique Twist on Luxury Toys

What’s really in a brand name? Pleasure products manufacturer Adrien Lastic thinks it’s the perfect chance to make a big impression, especially if you’re new on the scene. “I admit... 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 World magazine, the industry's leading e-commerce trade publication, delivering in-depth coverage of the online, mobile and ancillary digital markets.


Latin America Adult Business Expo

Jul 10 - Jul 12
Cartagena, Colombia

ANME Founders Show

Jul 16 - Jul 18
Los Angeles Marriott Burbank Airport


Aug 03 - Aug 06
Montreal, Quebec

XBIZ Berlin 2017

Sep 11 - Sep 14
Berlin, Germany
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!