"The placeholder attribute should not be used as an alternative to a label."
The issue is that the placeholder text disappears once you start typing into it. The usability assumption is that once you start typing in a value you no longer need the placeholder, but that is a bad assumption, particularly if a mistake is made as the gp is alluding to.
I'll think about how to expose this more. Right now, it's buried within Customize and Extend.
Bootstrap is a large framework for application development, but perhaps you want to hand-roll most of the visual components. Bootstrap isn't very well suited to this, as it is so extensive that building from the ground up (instead of "extending") is a bit difficult to do. Sure, you can modify some of its parts and pieces fairly easily using the variables, etc, but in general, Bootstrap is Bootstrap. Pure, as it mentions on the page, builds on Normalize and gives you some much more basic pieces to work with. I would imagine this would be used by a lot of people who are doing less "app"-like experiences, and are instead leaning more towards layout-driven, brand-heavy "website"-like experiences.
'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.
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.
I don't think Pure is big enough to warrant this, but Bootstrap sure could use it.
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)?
- 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."
A discussion list and model for Pure is being setup.
This particular project looks a lot like a fork of the CSS components of YUI. We'll have to see what direction it takes.
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.)
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.
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).
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.
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/
According to these stats , 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.
I am using SG-S3 for what its worth.
Most likely the whole css wasn't loaded completely. Could you retry couple of times to see if it happens again?
That may be what's causing the issue. In any case, @juandopazo filed an issue here: https://github.com/yui/pure-site/issues/73
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.
Personally if I'm looking for an alternative to Bootstrap, these are the things I'll be looking at.
And as someone else mentioned, it's a very young framework (literally a couple of days old) that can still take any direction.
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 would pay a bit more if I could have gmail.com look like that.
Not a huge fan of "pure-u-1-3"
Compare "span4" vs "pure-u-1-3"
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.
/* 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)
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.
 : http://yuilibrary.com/yui/docs/cssgrids/#unit-sizes
Why not use something like "2-cols/2-columns/pure-2"?
I love Bootstrap but it's a pain to build on top of it, because it's so opinionated in its design.
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.
As of 1500 GMT 28/05/13 it has 686,260 users on Chrome.
Btw, the site is open-source too: http://github.com/yui/pure-site/
Also, when doing demonstration websites, it's not a good idea to put a 'password' box there.
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?
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.
- 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.
Buttons styling will be fixed in the next release. :)
Will be using this in next project tho!
Overall, the design looks very incongruous. The elements look like step-brothers.