8 ms·

Purecss.io – A set of small, responsive CSS modules by Yahoo

jchapron 13y ago
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
deleted 13y ago
[deleted]
arkitaip 13y ago
So this is actually part of Yahoo's YUI?
- juandopazo 13y ago
  It's based on parts of YUI and reworked from there. The plan is to have YUI depend on Pure for styling.
aleem 13y ago
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 13y ago
  We have a pull request to fix this: https://github.com/yui/pure/pull/146 https://github.com/yui/pure/pull/146
random42 13y ago
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 13y ago
  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 13y ago
    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)?
    - Ziomislaw 13y ago
      Basically - in bootstrap...etc, if you want to do something "nonstandard" by library view you need to carefully unmake all the defaults. Here for example there are no default paddings forced upon you. It all depends on wether you know what you want, or just need "anything that works - doesn't matter how and what it does".
    - bichiliad 13y ago
      I kind of like the way Pure sets up their grid. Rather than doing bootstrap's row-and-column approach, you give things fractional widths, and what should fit into a row does.
    - SkyMarshal 13y ago
      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/telemetry https://github.com/topcoat/topcoat/tree/master/dev/test/perf...
oakaz 13y ago
I hope it'll help Yahoo to fix the new shitty design of Flickr.
JRFuentes7 13y ago
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 13y ago
  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
ams6110 13y ago
Not to be confused with Pure, the JS templating library http://beebole.com/pure/ http://beebole.com/pure/
- mhd 13y ago
  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.)
shagstrom 13y ago
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.
deleted 13y ago
[deleted]
ikonos_de 13y ago
Funny that Yahoo is using Google Analytics :-)
- loceng 13y ago
  Need to use the best if you're wanting to catch up to the rest..
- mtowle 13y ago
  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!)
kowdermeister 13y ago
I've built a site on it: http://audioterror.com/ http://audioterror.com/
- nixarn 13y ago
  Have you tried it on an iphone? Doesn't work very well unfortunately
  - pandeiro 13y ago
    He didn't use the pure responsive grid functionality for the sidebar. The sidebar examples on the pure site all collapse to corner menus.
Raphmedia 13y ago
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.
Yaggo 13y ago
<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 13y ago
  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 13y ago
    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 13y ago
      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 13y ago
        Please read again what I wrote above. I'm not saying every button should look identical or you shouldn't use classes at all.
- JoshMilo 13y ago
jcutrell 13y ago
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 13y ago
  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-example.html http://yuilibrary.com/yui/docs/cssgrids/cssgrids-units-examp...
itsbits 13y ago
nice..but why should i switch from Bootstrap.. looks light.. skin builder is better than bootstrap's.. any other advantages in using this??
sergiotapia 13y ago
First time I've heard of SMACSS and I LIKE it. I'm going to do some serious reading today.
- rrrx3 13y ago
  buy the book. got it at my deskside. really helpful way of thinking about css.
nickstinemates 13y ago
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 13y ago
  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.
hobonumber1 13y ago
Hey guys, I'm one of the developers who wrote Pure. Feel free to direct any questions towards me.
- peterhunt 13y ago
  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.
- evmar 13y ago
  The link to Normalize.css on the home page is a 404.

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

deleted 13y ago

[deleted]

arkitaip 13y ago

So this is actually part of Yahoo's YUI?

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

aleem 13y ago

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 13y ago
We have a pull request to fix this: https://github.com/yui/pure/pull/146 https://github.com/yui/pure/pull/146

random42 13y ago

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 13y ago
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 13y ago
  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)?
  - Ziomislaw 13y ago
    Basically - in bootstrap...etc, if you want to do something "nonstandard" by library view you need to carefully unmake all the defaults. Here for example there are no default paddings forced upon you. It all depends on wether you know what you want, or just need "anything that works - doesn't matter how and what it does".
  - bichiliad 13y ago
    I kind of like the way Pure sets up their grid. Rather than doing bootstrap's row-and-column approach, you give things fractional widths, and what should fit into a row does.
  - SkyMarshal 13y ago
    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/telemetry https://github.com/topcoat/topcoat/tree/master/dev/test/perf...

oakaz 13y ago

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

JRFuentes7 13y ago

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 13y ago
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

ams6110 13y ago

Not to be confused with Pure, the JS templating library http://beebole.com/pure/ http://beebole.com/pure/

mhd 13y ago
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.)

shagstrom 13y ago

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.

deleted 13y ago

[deleted]

ikonos_de 13y ago

Funny that Yahoo is using Google Analytics :-)

loceng 13y ago
Need to use the best if you're wanting to catch up to the rest..
mtowle 13y ago
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!)

kowdermeister 13y ago

I've built a site on it: http://audioterror.com/ http://audioterror.com/

nixarn 13y ago
Have you tried it on an iphone? Doesn't work very well unfortunately
- pandeiro 13y ago
  He didn't use the pure responsive grid functionality for the sidebar. The sidebar examples on the pure site all collapse to corner menus.

Raphmedia 13y ago

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.

Yaggo 13y ago

<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 13y ago
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 13y ago
  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 13y ago
    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 13y ago
      Please read again what I wrote above. I'm not saying every button should look identical or you shouldn't use classes at all.
JoshMilo 13y ago

jcutrell 13y ago

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 13y ago
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-example.html http://yuilibrary.com/yui/docs/cssgrids/cssgrids-units-examp...

itsbits 13y ago

nice..but why should i switch from Bootstrap.. looks light.. skin builder is better than bootstrap's.. any other advantages in using this??

sergiotapia 13y ago

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

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

nickstinemates 13y ago

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 13y ago
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.

hobonumber1 13y ago

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

peterhunt 13y ago
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.
evmar 13y ago
The link to Normalize.css on the home page is a 404.