Pure: a set of small, responsive CSS modules (opens in new tab)

One thing a lot of these projects miss: have a page or section explaining your unique benefits. Make direct comparisons to Bootstrap, Foundation, or other known frameworks and mention how your philosophy, approach, or feature set is different. I was having a hard time figuring out where to put Pure in the universe of CSS frameworks.

I have a critique, which is your naming convention for classes. This sentence from your site highlights the issue:

'Consider pure-g to be a row or "grid", and pure-u-- to be columns, or "units"'

First, I'm not a fan of the "pure-" prefix. If I were to use your system I'd use it exclusively. An option to either specify or ditch the prefixes would be lovely.

Second, in that sentence you say "consider pure-g to be a row". Why not just call it a row? I understand Bootstrap has used that already, but there's no copyright and it's a convention everyone is used to.

For what it's worth, I really think this is great. Some questions:

By appearances this is part of YUI. What's the relationship between this project and YUI3? Will this be taking the place of YUI's css grid system? What's Yahoo's involvement in the project (stupid question, maybe, but I'm not so familiar with YUI and am curious about at what level the project is controlled by Yahoo, and to what extent its progress is community-driven)?

I've just spent the last week building a simple bookmark app (front-end and back-end) with both Foundation and Bootstrap, with the goal of getting very familiar with both of them.

In that context, Pure looks great, congratulations.

IMO the goal of these frameworks should be to enable the use of most common design patterns, while normalizing across browsers and enabling responsive design.

We used to write our own JS for these patterns (tabs, navigation etc) and then JQuery made that easier. Now these frameworks are going one step further and giving us these patterns ready-to-go. My only suggestion would be to ensure that the most common design patterns are handled by your framework.

(Based on my experience, a suggestion that would be nice to have. For reference, its the design pattern behind the menu system that Wordpress uses: a nice "menu" list as a sidebar, like on your site, that allows flyouts or accordion style behavior.)

This looks awesome and I love that it's 100% css. You're also helping Yahoo! look cool from a dev side.

Fantastic work with this, really. Tiny file size, yet still has all the features I need. Completely unopinionated which gives an awesome blank slate to build off of, yet at the same time looks beautiful on its own with no additional styles. I love it.

It feels like a CSS toolkit to build "flat designs", where Bootstrap forces a ton of gradients, shadows, and bevels in a lot of its base styles. Of course, you could build something of your own with less-flat design using this toolkit, which is what makes it so nice.

Ok, on a second visit, I realized the homepage scrolls and there are a few points below the top part. I guess the big idea is that it's a lot lighter?

Does it make sense to think bout this as a "library" (you pull in what you need)? Contrary to the Bootstrap framework (fill in the missing pieces)?

I it's pure and minimal, then why do you still, in 2013, when half of your targets are finger friendly, consider hover effects pure and minimal?

Everything looks good so far but one thing. The tables. Unless I'm missing something here, they don't seem to be responsive. At least, in a practical sense, when dealing with larger sets of data resulting in larger tables. This is one thing I have struggled with myself, so I was wondering if you guys had any plans for that? Thanks

Hi, what's the difference between Pure and Bootstrap? Should I even consider Pure if I'm using Bootstrap (or something similar) already?

You really came up to this without using any CSS preprocessors? I was expecting you guys to have used SASS or something.

Button styles on the example page seem to work badly on touch devices (tried on iPhone and iPad).

looks nice & clean, might give it a try for my next project. please add some info about browser compatibility to the website tho.

It's not about them having "not caught up with the times", it's using placeholder to replace label being a violation of the intent of the attribute.

http://www.w3.org/TR/html5/forms.html#the-placeholder-attrib...

"The placeholder attribute should not be used as an alternative to a label."

It also results in ugly rendering issues with browsers that save previously submitted form data, overlaying it on top of the placeholder text or replacing it even if it's the wrong data for that field type.

also, for internet explorers, placeholder support is pretty bad - IE10 only: http://caniuse.com/input-placeholder

Also, just as a general user experience thing, not having labels can be detrimental if the field's purpose is forgotten or unknown. Having a placeholder is fine if there is no value in the field, but if I submit a long form after filling it out, only to be shown an error, what if I don't remember what that particular field was for?

Has anyone done any studies on what % of web users use/need screensreaders? Supporting such technologies can be quite cumbersome. Also, is screenreader support mandated or addressed under the Americans With Disabilities Act?

i never even thought of that angle. thanks!

Works fine with chrome/Android, the problem is with your HN reader. I had seen it bork few sites rendering in the past.

Thanks dude. Looks like some stylesheet failed to get pulled down. The menu is not styled black, as it should be.

That may be what's causing the issue. In any case, @juandopazo filed an issue here: https://github.com/yui/pure-site/issues/73

I'll open an issue. Can you tell me which browser and Android version is that?

Borked here on my Android/Dolphin, too.

Oddly enough, it didn't seem to be there until I rotated the screen to landscape, then back to portrait, but I might just not have noticed it.

Agreed. Too many hyphens, too much thinking.

Compare "span4" vs "pure-u-1-3"

Speaking of class-naming, has anybody come up with a good naming-scheme for classes used to add padding (or margins) to elements?

Sometimes I've create things like this: .pad_10_5_20_10 to avoid having to declare each one separately, but I'm sure there's a more-elegant way to do it. Of course, I can always define that padding directly in a more-generic class-name like .sidebar .... but there are cases where a pad class is more-desirable.

What irks you about it?

I tried to do something different with Pure. The main motivation for me was to have a small CSS framework that isn't cookie-cutter. Most sites that use Bootstrap pull in 100kb+ of CSS (minified). Pure is less than 5kb.

I love Bootstrap but it's a pain to build on top of it, because it's so opinionated in its design.

Not sure that 100k vs 5k is that important. Look at any major site out there. You'll find 10-17 bolt on JS widgets being loaded (i.e. Fb or G+ buttons) and tons of other JS dependencies.

yahoo.com: 58 requests, 336k. wsj.com: 123 requests, 1410k

I'm a fan of making things smaller and use GWT to compile and compress versions of sites for each browser and format to achieve the bare minimum, but starting out at the CSS lib might be premature optimization give that it's not where most of the fat is. Plus, next to no site is going to use just that lib and their CSS will surely grow well in excess of that 5k.

How is that a bad thing?

Please expand, how would you see fit a framework that isn't like the rest? I'd love to know. Personally I don't see a lot of room for innovation in design. The early 2000s had its table-based designs, and micro designs with small bitmap fonts.. that only appealed to a niche audience. Websites then were much less accessible and had horrible UX. In today's modern design, you're either flat (Foundation, etc.) or you're Bootstrap. If Yahoo didn't mimic the aesthetics of the most popular frameworks, people would complain about it being too different, and it would not gain wide-spread adoption.

It may need a bit of adjustment, but the homepage looks clear enough. It's a lightweight framework on top of which to build your own style. Bootstrap is for quick prototyping with an opinionated design. Pure is a lot more like Foundation, but much much lighter.

And as someone else mentioned, it's a very young framework (literally a couple of days old) that can still take any direction.

Because the 'skin' of the base components is not the problem most of these frameworks are trying to solve.

This framework seems to have very little to do with the look and feel you are after. Hence it's light filesize, and it's advocacy for a less opinionated style.

"...provides layout and styling for native HTML elements, plus the most common UI components. It's what you need, without the cruft."

"...minimal styles and encourages you to write your application styles on top of it. It's designed to get out of your way and makes it easy to override styles."

Bootstrap on the other hand, has a fairly opinionated design. That is to say, it does a lot of the 'look and feel' for you, and overriding those styles to create your own skin takes a fair amount of work. Pure seems to aim at making a uniform base of elements, without designing a lot of the skin... encouraging you to extend base classes more than trying to override them. And I applaud these types of frameworks.

Lastly, IMHO the solution for grid systems is different in many of these frameworks, and a lot of it comes down to personal preference and your project's requirements. This is a pretty big differentiation point for some people. Many frameworks have opinionated grid systems -- box-sizing: border-box, fluid vs. adaptive, first/last class names required on columns within a row, etc.

I'll fix this in the next release. Thanks for the feedback.

We didn't want to have a pure CSS menu just because Pure supports IE7+ and I wanted to keep it that way.

Buttons styling will be fixed in the next release. :)

Thanks!

Oh snap. Good point... but it really isn't that hard to just create a .less sheet, copy the styles into it and then compile that with your overrides and new classes. I have built a responsive template boilerplate with LESS on top of the html5 boilerplate using this method. Really not an issue to just add the CSS compiler or pre-processor of your choice. I do think it could be would be a viable core option for the Pure solution to offer a CSS interpreter option.

Thanks! I'll add an issue for that.

Btw, the site is open-source too: http://github.com/yui/pure-site/

I'll look into this. I don't want to add 'px' rules and don't really want to hack on the core, so let me see what I can do. thanks for bringing it up. Could you file an issue?

github.com/yui/pure/

You're right - this is something that I've been meaning to look in to as well, just to remove the need for more DOM elements. I also want to add offsets in.

Thanks for that. I hadn't considered that.

Confused me - that was the only reason I clicked on this.

I figured that it's useful on mobile.

What other frameworks?