6 ms·

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 ou

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.

toddmorey 13y 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.
- hobonumber1 13y 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.
  - saltcod 13y ago
    Agreed. I've been back here several times today wondering why I'd use Pure over an alternative. A nice explanation of why would be great.
    - jcutrell 13y ago
      I think this sits in a unique place, as earlier alluded to, similar to Skeleton. 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.
  - netghost 13y ago
    The customizing is quite nice. Great work.
- Jare 13y 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.
toddmorey 13y 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?
notjustanymike 13y 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.
- reid 13y ago
  You can build your own prefixes and class names for Pure Grids here: http://yui.github.io/gridbuilder/ 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.
- alternize 13y ago
  i agree, i'd prefer "vendor"-less :) css class names, too, without having to resort to the gridbuilder.
- dualogy 13y 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.)
- lowboy 13y 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 13y 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 13y 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.)
- hobonumber1 13y 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 13y ago
This looks awesome and I love that it's 100% css. You're also helping Yahoo! look cool from a dev side.
- hobonumber1 13y ago
  Thanks!
legutierr 13y 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)?
- juandopazo 13y 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.
- reid 13y 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 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 https://github.com/yui/yui3/wiki/Contributor-Model A discussion list and model for Pure is being setup.
alternize 13y ago
looks nice & clean, might give it a try for my next project. please add some info about browser compatibility to the website tho.
- hobonumber1 13y ago
  Thanks, we already have an issue to add it in. FYI, its tested on IE7+, Latest Chrome/FF/Safari, iOS6, Android4.x+
gizzlon 13y 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)?
- hobonumber1 13y 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.
dirtyaura 13y ago
Button styles on the example page seem to work badly on touch devices (tried on iPhone and iPad).
- hobonumber1 13y ago
  Can you be more specific?
  - dirtyaura 13y ago
    If you click buttons in http://purecss.io/buttons/ http://purecss.io/buttons/ they don't have pressed state. I assume that they are not fully styled, but it's better to demo full experience in the beginning just like Foundation does http://foundation.zurb.com/docs/components/buttons.html# http://foundation.zurb.com/docs/components/buttons.html#
it_learnses 13y ago
Hi, what's the difference between Pure and Bootstrap? Should I even consider Pure if I'm using Bootstrap (or something similar) already?
- hobonumber1 13y 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 13y 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?
- lowboy 13y 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 13y 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 13y 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 13y ago
You really came up to this without using any CSS preprocessors? I was expecting you guys to have used SASS or something.

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.

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

hobonumber1 13y 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.
- saltcod 13y ago
  Agreed. I've been back here several times today wondering why I'd use Pure over an alternative. A nice explanation of why would be great.
  - jcutrell 13y ago
    I think this sits in a unique place, as earlier alluded to, similar to Skeleton. 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.
- netghost 13y ago
  The customizing is quite nice. Great work.
Jare 13y 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.

toddmorey 13y 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?

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

reid 13y ago
You can build your own prefixes and class names for Pure Grids here: http://yui.github.io/gridbuilder/ 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.
alternize 13y ago
i agree, i'd prefer "vendor"-less :) css class names, too, without having to resort to the gridbuilder.
dualogy 13y 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.)
lowboy 13y 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 13y 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 13y 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.)

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

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

hobonumber1 13y ago
Thanks!

legutierr 13y 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)?

juandopazo 13y 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.
reid 13y 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 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 https://github.com/yui/yui3/wiki/Contributor-Model A discussion list and model for Pure is being setup.

alternize 13y ago

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

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

gizzlon 13y 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)?

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

dirtyaura 13y ago

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

hobonumber1 13y ago
Can you be more specific?
- dirtyaura 13y ago
  If you click buttons in http://purecss.io/buttons/ http://purecss.io/buttons/ they don't have pressed state. I assume that they are not fully styled, but it's better to demo full experience in the beginning just like Foundation does http://foundation.zurb.com/docs/components/buttons.html# http://foundation.zurb.com/docs/components/buttons.html#

it_learnses 13y ago

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

hobonumber1 13y 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 13y 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?

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

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