Pure: a set of small, responsive CSS modules

http://purecss.io/

by bmuon • 13 years ago

432 121 13 years ago

purecss.io

niix2• 13 years ago

Pretty clean. I can't help but think that Yahoo! is just trying to roll their own Twitter Bootstrap.

BJanecke2• 13 years ago

How is that a bad thing?

aioprisan• 13 years ago

it doesn't add anything new

hobonumber118• 13 years ago

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.

niix2• 13 years ago

I agree that there is this sort of "cookie-cutter" style website being created all over the Internet because of Bootstrap. While I do love Bootstrap, I'll give this a go due to it's appearance to be an unobtrusive take on an HTML framework.

twistedpair• 13 years ago

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.

mihok• 13 years ago

Looks nice, although as someone who has a dark desktop (inverted colors), people need to remember to set input backgrounds to white if they are styling the border, box-shadow, etc for a white input box. The form input elements look hideous for me.

hobonumber118• 13 years ago

Thanks for that. I hadn't considered that.

jvzr2• 13 years ago

Thin font weights, dark gray text on dark background, light gray text on white background... Are they trying to make it unreadable to sight-impaired readers/developers? I cannot be the single one out there having had a bad sight...

hobonumber118• 13 years ago

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

jvzr2• 13 years ago

Thank you very much! FYI, the font size is already quite legible.

taskstrike• 13 years ago

The only impressive example is the email one, which didn't have a lot of default components, all other examples are things easily done with other frameworks.

Kiro• 13 years ago

What other frameworks?

flyosity2• 13 years ago

Just a small accessibility thing: having inputs with placeholder text is great, but screenreaders have not caught up with the times and you should still use a corresponding <label> tag.

rjzzleep• 13 years ago

i never even thought of that angle. thanks!

alternize3• 13 years ago

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

brokenparser2• 13 years ago

So MSIE supports placeholders. How is that "bad"?

ceejayoz2• 13 years ago

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

flyosity2• 13 years ago

Even worse! Thanks for the clarification.

scott_karana• 13 years ago

Agreed. If people insist on "styling" with placeholders as labels, they should at least include <labels> that are hidden visually but accessible by screenreaders.

psychometry• 13 years ago

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.

ricardobeat2• 13 years ago

placeholder is a native attribute. If you are doing it via javascript for older browsers, your code should handle that case.

Cryode2• 13 years ago

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?

jgalt212• 13 years ago

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?

hobonumber118• 13 years ago

Hey guys - I'm one of the core developers of Pure. Happy to answer your questions. We officially haven't launched yet, but glad that you guys are checking it out.

toddmorey2• 13 years ago

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.

hobonumber118• 13 years ago

I didn't feel like using Pure prevents you from using other Frameworks, but you're right - maybe it's unclear where Pure fits into everything.

I'll think about how to expose this more. Right now, it's buried within Customize and Extend.

Jare• 13 years ago

I would normally agree with you, but not in this case. My first thoughts after arriving at the landing page were "small" (a few Kb) and "web" (no app-like widgets like dialogs). That's really all I needed to know, the rest really is in the details.

toddmorey2• 13 years ago

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?

notjustanymike2• 13 years ago

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.

reid2• 13 years ago

You can build your own prefixes and class names for Pure Grids here: http://yui.github.io/gridbuilder/

The default prefix is there for maintainability. It's a pain to grep for "grid", "row", or "g" when you need to change something. But if you don't like it, you can build your own.

alternize3• 13 years ago

i agree, i'd prefer "vendor"-less :) css class names, too, without having to resort to the gridbuilder.

dualogy• 13 years ago

One good thing about vendor prefixes: easier to "refactor" one's code-base, as in: remove/replace the framework in the future when it is inevitably obsoleted / abandoned, as time marches on and other choices become more agreeable. (Great that all things web evolve so fast, but at the same time somewhat painful to keep on top of things.)

lowboy2• 13 years ago

Another benefit to prefixing everything is that it makes possible an automated module selection/build system. Point it at your markup/codebase and it would select only the modules that your site uses.

I don't think Pure is big enough to warrant this, but Bootstrap sure could use it.

xkcdfanboy• 13 years ago

It won't make a difference if you use the library correctly. You're supposed to use a framework like sass or stylus and @extend from the grid classes. Don't actually give your elements classes from the lib. This is a rookie mistake I see happening with bootstrap, grid 960, etc..

mipapage• 13 years ago

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

hobonumber118• 13 years ago

Thanks for the feedback. Right now, Pure just handles CSS, but I've been thinking about adding some JS to add some interactivity. The fly-out menu is a good example of that. That should be up soon - probably as an example, similar to the dropdown menu.

joeblau• 13 years ago

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

hobonumber118• 13 years ago

Thanks!

legutierr• 13 years ago

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)?

juandopazo4• 13 years ago

It's worth mentioning that YUI has changed a lot with regards to the community involvement. There are non-Yahoo! members of YUI that review a lot of the code that lands in the library. And I'm betting we'll see more community members with commit access very soon. YUI has totally transitioned from a pure Yahoo! project to being very much community driven.

This particular project looks a lot like a fork of the CSS components of YUI. We'll have to see what direction it takes.

reid2• 13 years ago

Hi! I work on the YUI team at Yahoo!.

- Pure is not a part of the YUI Library itself, but works well with it. (See http://yeti.cx for another example of this kind of peer project built by our team.)

- Our main project, YUI Library, has a well-defined Contributor Model that makes it clear that it's a community project, not just an open-sourced chunk of code reserved for Yahoos to work on. While there isn't one adapted to Pure yet, reading YUI Library's Model will give you an idea about what kind of community involvement our team desires:

"[YUI Library] is a meritocratic, consensus-based community project. Anyone with an interest in the project can join the community, contribute to the project design and participate in technical decisions. This document describes how that participation takes place and how to set about earning merit within the project community."

https://github.com/yui/yui3/wiki/Contributor-Model

A discussion list and model for Pure is being setup.

alternize3• 13 years ago

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

hobonumber118• 13 years ago

Thanks, we already have an issue to add it in. FYI, its tested on IE7+, Latest Chrome/FF/Safari, iOS6, Android4.x+

gizzlon• 13 years ago

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)?

hobonumber118• 13 years ago

On the contrary, I think it's small enough that you can pull in everything. I think with larger frameworks like Bootstrap, you have to be more careful and only pick what you need.

dirtyaura2• 13 years ago

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

hobonumber118• 13 years ago

Can you be more specific?

it_learnses• 13 years ago

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

hobonumber118• 13 years ago

Bootstrap lets you pull down 1 CSS file and has a very opinionated design. It's not that easy to over-write its styles. The entire bootstrap.css minified is around 80kb, IIRC.

Pure is less than 15kb minified (< 5kb minified + gzipped). It's meant to be a starting point for your application's styles, taking care of all the hard stuff, like aligning forms, making buttons look consistent, having a common CSS base, etc. From here on, you can write your own application styles to make your app look pretty.

In the end, you end up using a lot less CSS to achieve a similar effect. in the end, they are different products. You can use Bootstrap and Pure together too (see the Extend page for an example).

atirip• 13 years ago

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?

lowboy2• 13 years ago

Because hover effects benefit the other half that have pointing devices. As long as the hover effects aren't compromising the experience for touch users, why not benefit the pointing device users?

UniZero• 13 years ago

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

cmelbye• 13 years ago

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.

apathetic• 13 years ago

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

envex2• 13 years ago

Looks great, one thing that irks me is the grid classes.

Not a huge fan of "pure-u-1-3"

hobonumber118• 13 years ago

What irks you about it?

envex2• 13 years ago

It just seems a tad unnecessary.

Why not use something like "2-cols/2-columns/pure-2"?

devmach• 13 years ago

There is too much options [0] and it's more flexible than it should be. I know , it sounds weird but with bootstrap all you have is 12 columns and when you have less options it's easy to plan.

Maybe the other problem is : Units are not in multiplies of 5 and that forces you unnecessarily to think. If it would be in fixed units like bootstrap or in multiplies of 5 ( pure-u-3-25 etc.) i would be less thinking while deciding the length of some div.

[0] http://yuilibrary.com/yui/docs/cssgrids/#unit-sizes

notjustanymike2• 13 years ago

Agreed. Too many hyphens, too much thinking.

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

defrex• 13 years ago

It seems right to point out that in Bootstrap 3, "span4" will become "col-sm-4".

uptown2• 13 years ago

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.

achalv• 13 years ago

I've adopted the 'BEM' way of naming my css classes and so on. It's pretty convenient, and it grows on you pretty quickly. I hope this helps - http://csswizardry.com/2013/01/mindbemding-getting-your-head...

slickninja1• 13 years ago

Try the OOCSS classes:

/spacing.css/ /* spacing helpers p,m = padding,margin a,t,r,b,l,h,v = all,top,right,bottom,left,horizontal,vertical s,m,l,n = small(5px),medium(10px),large(20px),none(0px) */

https://gist.github.com/cloudchen/5626174

MattBearman• 13 years ago

Why do all CSS frameworks feel like they need to mimic Foundation/bootstrap so much? Things like colour scheme, form elements and typography are all so similar.

Personally if I'm looking for an alternative to Bootstrap, these are the things I'll be looking at.

juandopazo4• 13 years ago

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.

JoeKM• 13 years ago

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.

daveis• 13 years ago

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.

xSwag• 13 years ago

Just a quick heads up: Ghostery blocks Typekit which messes up your entire layout as the backup fonts aren't the same size.

As of 1500 GMT 28/05/13 it has 686,260 users on Chrome.

hobonumber118• 13 years ago

Thanks! I'll add an issue for that.

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

cthor• 13 years ago

Looks really nice, and the HTML appears well formed at a glance. I might consider using it in an upcoming project. A few reservations, though:

- JavaScript dropdown menus. Is it not possible to get a pure CSS (get it?) solution? Without JavaScript the menu collapses into a bullet list. I understand that CSS dropdowns are slightly less responsive, but a graceful fallback would be nice.

- Buttons have no :active styling (really minor, I know). This sort of stood out to me as odd, since most default button styles have one.

hobonumber118• 13 years ago

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!

jordanlev• 13 years ago

What about people on IE7+ who have javascript disabled?

leeoniya• 13 years ago

might be confusing, also called "pure" http://beebole.com/pure/

pessimizer• 13 years ago

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

skore• 13 years ago

IMHO, those grouped inputs are a very bad idea. You can only use them on a handful of items at the same time or it looks completely unusable and if you have only a handful of items, grouping them makes no sense in the first place. So - nice technical solution, not really useful in the real world.

hobonumber118• 13 years ago

I figured that it's useful on mobile.

JangoSteve4• 13 years ago

I opened this link on my phone and was greeted with this (menu items overflowing content): http://i.imgur.com/Gaejb1K.png

Didn't get a good first impression considering it's meant to be responsive.

Otherwise, it looks awesome. It's like a more feature-complete version of Skeleton: http://www.getskeleton.com/

juandopazo4• 13 years ago

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

dkuntz2• 13 years ago

It's an old embedded one inside of an hn app.

JangoSteve4• 13 years ago

It's Android's WebView [1], which is used in all apps that render web pages and also in the Android Browser, still in use on the vast majority of Android phones (see my other comment in this thread).

[1] http://developer.android.com/reference/android/webkit/WebVie...

brokenparser2• 13 years ago

Probably 4.0, it looks just fine here: https://www.manymo.com/emulators/82/connect

pavs2• 13 years ago

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

JangoSteve4• 13 years ago

I'm pretty sure the HN reader uses the Android webview [1] to render all webpages, which is the same thing that is used in the Android Browser. Chrome Mobile is not available for download on devices before Android 4.0, and didn't become the default browser on Android until 4.2.

According to these stats [2], Android Browser has about 55x the usage of Chrome Mobile as of April 2013. This means ~97% of Android devices will likely show up as they do in my screenshot.

In short, the problem is not with my HN reader, the problem is with this CSS library on the most common Android browser.

[1] http://developer.android.com/reference/android/webkit/WebVie...

[2] http://caniuse.com/usage_table.php

hobonumber118• 13 years ago

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

NoodleIncident• 13 years ago

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.

ereckers• 13 years ago

Looks great. More competition and options are always a good thing. It'll be fun to see how long pure can keep it's thin figure. Frameworks as with people inevitably seem to fatten up with age.

websitescenes2• 13 years ago

Love the idea of display modularization. Bootstrap and Foundation are two alternatives but I definitely don't think that they are an end all solution. There is a distinct advantage to developing your own core set of modules that are portable across your selected platforms and projects. I am glad to see more developers going this approach and am sure this will be a great addition to the growing list of responsive solutions. Thanks for sharing.

itry• 13 years ago

"made with mobile in mind" but as soon as i zoom in on my ipad to make the text bigger, the layout breaks apart.

matteodepalo• 13 years ago

Very good job, I love the minimal flat design.

Unfortunately, since it doesn't use any css preprocessor, it is impossible to create a semantic stylesheet. Now-days I would not consider any css framework that doesn't let me separate the presentation layer from the markup.

I realize this is meant to be a very lightweight framework, but in order to be usable it has to have the possibility to be extended easily without spawning classes everywhere.

websitescenes2• 13 years ago

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.

nobodysfool• 13 years ago

Google Chrome - "compact inline form" the fields for email and password are not aligned. Password is about 5 pixels higher than email.

Also, when doing demonstration websites, it's not a good idea to put a 'password' box there.

hobonumber118• 13 years ago

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/

_jmar777• 13 years ago

Looks really nice. Would be nice to see browser support formally stated somewhere, though.

nottombrown• 13 years ago

Great work! I've been looking for something like this to replace my overly complex bootstrap setup.

One thing that I'd like to see is a gutter-based grid system. In your grid examples the inner elements take care of the padding so we end up with weird padding on the left and right.

hobonumber118• 13 years ago

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.

Fauntleroy• 13 years ago

Forgive me if I'm missing something here... but it seems that the typeface used on all the buttons and headings is "Omnes Pro," which is $229 here: https://www.dardenstudio.com/typefaces/omnes_pro?view=buy

I feel it's a little disingenuous to use a commercial typeface in an open source project. Why not switch to something people can use without a Typekit account?

orangethirty• 13 years ago

The naming conventions are a bit strange. I'm used to bootstrap and others that have similar namig conventions. Still a nice framework. Will try it out.

jtreminio• 13 years ago

I would pay money to have an email client with this design: http://purecss.io/layouts/email/

I would pay a bit more if I could have gmail.com look like that.

tn13• 13 years ago

YUI definitely needed a better CSS framework and looks like they are finally working on one.

ccleve• 13 years ago

Could someone compare / contrast Pure with Bootstrap? Why is it better? Or how is it different?

josscrowcroft• 13 years ago

This is beautiful - I strongly recommend increasing the text contrast. I'm on a Macbook Air and I can hardly see the form labels and subheaders, so I despair for anyone on a shitty old screen etc.

Will be using this in next project tho!

nish1500• 13 years ago

Grouped inputs should not have shadows in-between elements.

Overall, the design looks very incongruous. The elements look like step-brothers.

jonhmchan• 13 years ago

Is there a reason that <textarea> isn't supported in the forms?

Pure: a set of small, responsive CSS modules

Related Stories