
Purecss.io – A set of small, responsive CSS modules by Yahoo - isla-de-encanta
http://purecss.io/
======
nickstinemates
I really love the default theme. Like a lot. And reading the source it makes a
lot more sense to me than Bootstrap (eventhough, I'm sure, that bootstrap has
a way bigger community/ecosystem in place.)

I'll make a superficial branch for some of my work and see how it ends up :)

~~~
nickstinemates
Welp, after a day I can make some minor conclusions (I'm no CSS expert, so
take with a grain of salt)

Pros \- I like the design of my site more (subjective) \- Was much easier to
grok, I found that working with the grid was very straightforward.

Cons \- Ended up writing a lot more CSS than I would for a bootstrap site. \-
Not having a responsive sticky footer was a pain in the ass. I spent a lot of
the day working through that.

------
aleem
This is a wonderful library but it falls short on one major aspect which
limits its design capabilities. Currently a block spanning N columns on a
desktop must span N columns or 1 column on a mobile device. This means you
can't have a 6x2 grid become a 2 by 6 grid on mobiles. It will have to be 12
blocks stacked on top of one another.

Inuit is another framework that allows for this though it lacks in
documentation and a user friendly website.

~~~
hobonumber1
We have a pull request to fix this:
[https://github.com/yui/pure/pull/146](https://github.com/yui/pure/pull/146)

------
jchapron
[https://news.ycombinator.com/item?id=5779494](https://news.ycombinator.com/item?id=5779494)
Thread from 2 months ago with some insight from the core developers

------
Yaggo
<button class="pure-button pure-button-disabled">A Disabled Button</button>

Oh please. Why not just a <button disabled>? So much redundancy and overly-
verboseness for nothing.

"Namespacing" your CSS classes would make sense if you were actually composing
element's style from multiple frameworks/libraries (vs. programming code), but
that's not usually the case with CSS frameworks.

~~~
sergiotapia
I disagree with you.

Have a .button class for styles of the button, font-family, height, width,
border-radius, etc. You want _all_ .button elements to share this look and
feel.

Then overwrite background colors, border colors etc on a button-primary,
button-delete, etc classes.

It makes sense and it works.

~~~
Yaggo
My point is that <button> already means a button and can be selected for
default styling with 'button' or 'button.delete' selectors (by the framework
and by you for overwriting). Ditto for [disabled], etc. (... also, support for
multi-class selectors .like.this.and.that landed ages ago, no need for
repeating-your repeating-your-class repeating-your-class-names-manually.)

~~~
sergiotapia
Your argument doesn't work in the majority of cases. Many times a button
element can be either a small '.toolbar-button', or a '.widget-button' or a
'.principal-button'. Difference sizes, looks and feel, for the same element
type.

~~~
Yaggo
Please read again what I wrote above. I'm not saying every button should look
identical or you shouldn't use classes at all.

------
random42
I just started with Bootstrap 2 and now looking into Foundation 4 and
Bootstrap 3.

Does PureCSS offer something missing in those 2 CSS frameworks?

~~~
timinman
I have used Bootstrap, Skeleton, and a few others. After a quick read of the
docs, here is what I like about Pure:

1\. It's lightweight.

2\. It is stylistically plain.

3\. The grid system is straightforward.

~~~
random42
Care to shed more light on grid system?

As mentioned, I just started with bootstrap and found grid to work just fine
for my usecases. What problems/annoyances did you face when using other CSS
frameworks (which you feel Pure avoids)?

~~~
SkyMarshal
Pure doesn't seem to support nested grids and column reordering, as both
Bootstrap and Foundation do.

At some point I want to experiment with just how decoupled these big
frameworks' grid systems are from the rest of the package. For example, can
you use the following combinations:

Foundation 4 grid + Bootstrap 3 components

Bootstrap 3 grid + Topcoat components (Topcoat has no grid yet anyway)

Suzy grid + [Foundation 4 | Bootstrap 3 | Topcoat] components

etc.

I also want to performance test them all, using both Chrome dev tools [1] and
Topcoat's Chromium Telemetry tests [2].

[1]:
[http://www.youtube.com/watch?v=Z1IqzeA3XXg](http://www.youtube.com/watch?v=Z1IqzeA3XXg)

[2]:
[https://github.com/topcoat/topcoat/tree/master/dev/test/perf...](https://github.com/topcoat/topcoat/tree/master/dev/test/perf/telemetry)

------
ams6110
Not to be confused with Pure, the JS templating library

[http://beebole.com/pure/](http://beebole.com/pure/)

~~~
mhd
Or Pure, the functional programming language.

[http://purelang.bitbucket.org/](http://purelang.bitbucket.org/)

(Now I feel tempted to write an app that uses all three.)

------
hobonumber1
Hey guys, I'm one of the developers who wrote Pure. Feel free to direct any
questions towards me.

~~~
peterhunt
I think Pure is great. I think you guys should tweak the messaging to
emphasize that it's really easy to skin, much moreso than other CSS frameworks
IMO. People are having a hard time differentiating it from something like
Bootstrap, which tends to lead to "bootstrappy" sites.

------
JRFuentes7
Good find. The pricing plan sample layout
([http://purecss.io/layouts/](http://purecss.io/layouts/)) looks clean, even
if I despise the blurred background with white text overlay. Reminds me of
Windows 8 flat design.

~~~
AndroPollard
I tend to get lost in customizing bootstrap sometimes. This, however, is
amazing.
[http://yui.github.io/skinbuilder/?mode=pure](http://yui.github.io/skinbuilder/?mode=pure)

------
jcutrell
The nice thing about Pure to me is the fact that they encourage you to write
your own top layer. While Bootstrap 3 says that they also encourage this, the
number of components in Bootstrap make it somewhat difficult to learn and
implement.

An hour of looking at Pure, however, is enough to get started with confidence.

The grid classes are a bit strange to me though.

`pure-u-1-2` is "descriptive"? Not so much, unless you know the system.

~~~
JoshMilo
It's a bit strange to me too. I use this as a reference and it helps.
[http://yuilibrary.com/yui/docs/cssgrids/cssgrids-units-
examp...](http://yuilibrary.com/yui/docs/cssgrids/cssgrids-units-example.html)

------
ikonos_de
Funny that Yahoo is using Google Analytics :-)

~~~
mtowle
YMail also lets you sign in with GMail. Obv, we're all aware of the Mayer
connection, but it's still a curious move. What's Yahoo's play here? "Users."
Okay, but _what 's the play?_ Cast aside all notions of vanity, and keep your
eye on what you really want? (To train eyes on their content portal?) (Can it
really be the case that Y.com is last man standing in the portal wars? Huh!)

------
sergiotapia
First time I've heard of SMACSS and I LIKE it. I'm going to do some serious
reading today.

~~~
rrrx3
buy the book. got it at my deskside. really helpful way of thinking about css.

------
shagstrom
The proxima-nova font is quite fuzzy on non-grey buttons
([http://purecss.io/buttons/](http://purecss.io/buttons/)) on my thunderbolt
display. I wouldn't be surprised if some people find it difficult to read.

------
Raphmedia
I am confused as to how this is news. But yes, Pure does a good job. I feel
like it influenced the new version of Bootstrap a bit.

------
kowdermeister
I've built a site on it: [http://audioterror.com/](http://audioterror.com/)

~~~
nixarn
Have you tried it on an iphone? Doesn't work very well unfortunately

~~~
pandeiro
He didn't use the pure responsive grid functionality for the sidebar. The
sidebar examples on the pure site all collapse to corner menus.

------
itsbits
nice..but why should i switch from Bootstrap.. looks light.. skin builder is
better than bootstrap's..

any other advantages in using this??

------
arkitaip
So this is actually part of Yahoo's YUI?

~~~
juandopazo
It's based on parts of YUI and reworked from there. The plan is to have YUI
depend on Pure for styling.

------
oakaz
I hope it'll help Yahoo to fix the new shitty design of Flickr.

