
Pure: a set of small, responsive CSS modules - bmuon
http://purecss.io/
======
flyosity
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.

~~~
ceejayoz
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...](http://www.w3.org/TR/html5/forms.html#the-placeholder-attribute)

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

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

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

~~~
notjustanymike
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.

~~~
reid
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.

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

~~~
websitescenes
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.

------
JangoSteve
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/>

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

~~~
JangoSteve
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...](http://developer.android.com/reference/android/webkit/WebView.html)

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

~~~
JoeKM
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.

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

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

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

~~~
uptown
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.

~~~
slickninja1
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>

~~~
uptown
Pretty good approach. Thanks for the link.

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

~~~
hobonumber1
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.

~~~
niix
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.

------
xSwag
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._

~~~
hobonumber1
Thanks! I'll add an issue for that.

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

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

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

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

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

~~~
hobonumber1
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/

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

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

~~~
hobonumber1
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.

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

~~~
hobonumber1
Thanks for that. I hadn't considered that.

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

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

~~~
hobonumber1
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
What about people on IE7+ who have javascript disabled?

~~~
epochwolf
There are less people running javascript disabled than are on IE6 and anyone
that's turned it off can turn it back on.

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

------
leeoniya
might be confusing, also called "pure" <http://beebole.com/pure/>

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

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

~~~
hobonumber1
I figured that it's useful on mobile.

------
josscrowcroft
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!

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

------
nish1500
Grouped inputs should not have shadows in-between elements.

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

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

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

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

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

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

------
taskstrike
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
What other frameworks?

