Pure <3 YUI

By YUI TeamMay 30th, 2013

pure-banner

Yesterday at CSSConf, we launched Pure – a new CSS library. Phew! Here are the slides from the presentation:

Although it looks pretty minimalist, we’ve been working on Pure for several months. After many iterations, we have released Pure as a set of small, responsive, CSS modules that you can use in every web project.

You can learn more about Pure on its homepage, or through the GitHub repo.

Pure is 100% CSS, but as front-end engineers, we don’t only deal with CSS. Much of our time is spent writing JavaScript as well. One of the advantages of Pure is that it doesn’t force you to use a particular JavaScript library. However, we have thought quite a bit about how Pure and YUI can work together now and in the future. Let’s dig into that.

How It Started

To really understand why we made Pure, let’s talk a bit about how the project was conceived. Looking at YUI, we felt that there was a lot of really useful CSS in our library, but it was tightly coupled with our JavaScript. YUI has historically had CSS modules such as Grids, Fonts, and Reset, but they aren’t exposed well enough to non-YUI users, making them hard to find unless you explore all of YUI’s components. In addition, we had some really useful CSS for styling widgets such as table CSS for DataTable, and menu CSS for node-menunav (and now SmugMug’s Y.Menu). It didn’t make sense to keep this tight coupling between CSS and JavaScript, so we decided to break the CSS components out into their own YUI modules. In fact, we had already set a precedent for this with CSSButton.

Once we started upon this path, we realized that instead of just creating new CSS modules, it would be better to split out the CSS entirely into a new project, independent of YUI. There’s no reason why someone couldn’t use that CSS with jQuery, vanilla JavaScript, Bootstrap, or some other library. That’s how Pure came about.

Fitting In With YUI

Not only is Pure compatible with jQuery or Bootstrap, but you can also use it with YUI. In the near future, YUI will be depending on Pure. To make this easy to understand, let’s take an example such as DataTable:

Currently, DataTable has its CSS stored in its assets/ directory. This includes base DataTable styles, along with styles for DataTable plugins. In the future, the core DataTable styles will be pulled in from Pure (Pure Tables, to be specific). We envision doing this in the following way:

  1. Creating a CSSTable module that pulls in Pure Table CSS via Bower.
  2. Renaming of prefixes (.pure-table changes to .yui3-table)
  3. Letting DataTable depend on CSSTable

You could imagine this working for all current YUI widgets that have a CSS dependency in Pure.

Benefits

There are a few benefits in having YUI depend on Pure in this way. First, it allows Pure to stay independent of YUI. We believe it’s important for Pure to have its own identity, and we are accomplishing this by letting Pure have its own release schedule and not be bound by a dependency on YUI.

In contrast, it gives YUI the flexibility to pull in specific parts of Pure that are useful for the library and then tweak them as necessary. By creating YUI CSS modules we’re able to loosen the coupling between a JavaScript widget, and the CSS required to render it. This also makes a great progressive enhancement story: You could imagine having a regular <table> element styled through Pure, until JavaScript is loaded. From a style perspective, the way the table looks will not change since the same CSS rules are being leveraged by YUI.

Thoughts

We’re really excited to see what happens with Pure over the coming weeks and months. As it matures, we’re looking forward to building it out through a thriving open-source community. Although Pure is independent of YUI, our improvements to it will be fed back into YUI through the steps mentioned above. We think this is the best way forward when it comes to YUI and CSS.

We want to continue this discussion with you on the YUI Contrib mailing list to figure out the best way to integrate Pure into YUI. Let us know what you think!

18 Comments

  1. This looks great and I’m looking forward to updating my sites with Pure instead of YUI CSS legacy styles. YUI has historically been the most accessible of the CSS and JavaScript libraries due to an attention to progressive enhancement and user testing with screen reader users.

    I’d like to point out some accessibility issues in the Pure library.

    Your form examples are depending on the placeholder attributes instead of form labels.
    http://purecss.io/forms/
    This is an accessibility issue. You cannot depend on placeholder text.

    Please integrate hidden form labels instead of depending on the placeholder. Does the pure library include a visually-hidden class as defined by Thierry Koblentz’s article?
    http://developer.yahoo.com/blogs/ydn/clip-hidden-content-better-accessibility-53456.html

    The Tables page should have scope=”col”. I realize you are simplifying your code for display, but it’s also important to give good examples to developers.
    http://purecss.io/tables/

    The pure menu CSS is dependent on :hover and does not work with keyboard tabbing.
    .pure-menu .pure-menu-can-have-children > li:hover:after {
    color: #FFFFFF;
    }
    .pure-menu li a:hover {
    background: none repeat scroll 0 0 #EEEEEE;
    }
    .pure-menu li.pure-menu-disabled a:hover {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #BFBFBF;
    }
    There are no :active or :focus styles.

    Thank you for putting together this library, it looks fantastic.

  2. Wonderfully packaged libraries. Love the size of things. I dream of one day, Pure would have a SASS declinaison (semantic HTML) so I could switch from “Zurb Foundation”.
    Thx, and keep up the good work. Kudo’s from Senegal ;)

  3. James Alley said:
    May 30, 2013 at 10:25 am

    “First, it allows Pure to stay independent of YUI. We believe it’s important for Pure to have its own identity, and we are accomplishing this by letting Pure have its own release schedule and not be bound by a dependency on YUI.”

    That makes it all the more strange to me that we would use yui3- prefixes on all class names. Why not leave the prefix as pure- or simply yui- or even just y- or p-.

    I personally would vote for yui-, e.g., “yui-table”. While this indicates that Pure and YUI are not truly independent– there are tie ups like Datatable after all– it at least leaves version numbers out of the equation. And compared to super-abbreviated prefixes like “y-“, it’s more readable and understandable to the uninitiated.

  4. Light, bright, fast ! Wonderful work Tilo & YUI Team !

  5. wrote it on github, will add here, the font is miniscule!
    Base font of 12px? What is this? 1999?
    c’mon guys!

  6. Carrie Morrison said:
    May 31, 2013 at 1:10 pm

    “In the near future, YUI will be depending on Pure. ”

    I agree with James’ comment, since you state it should be independent, why would YUI eventually depend on it?

  7. Where can i DL the sourse code for http://purecss.io/layouts/marketing/ ? i don't see it avail? are the layouts avail as DL? Best, Adam

  8. @Adam, the source for the website is available here: https://github.com/yui/pure-site

  9. @Ted: Thanks for the feedback Ted. A bunch of folks have pointed out those accessibility issues and we are working on it.

    You can check out the GitHub repo for the Pure Site for all the issues that we’re tackling. Feel free to add an issue there.

    github.com/yui/pure-site/

  10. I second Ted Drake’s comments on accessibility lacking. I’d also like to point out problems with the buttons example:

    http://purecss.io/buttons/
    None of the element buttons are focusable (keyboard accessible) because the href attribute is left out. A Pure Button screen readers skip right over these elements, add href=# to make them focusable.

    The disabled button is visually disabled looking but not actually disabled, apply the disabled attribute to make them disabled for screen readers also.

    Of the colored buttons, only the red one has sufficient contrast to meet WCAG 2.0 AA. The gray on gray text also fails contrast.

    Thanks!

  11. Andrew Wooldridge said:
    June 4, 2013 at 10:25 am

    @Paul, be sure to add these as Issues on the Pure repo so we can track them. https://github.com/yui/pure/issues

  12. YUI that supports XP SP2?
    Because Yahoo! News execution YUI crashes.
    In XP SP2 + IE8

  13. Andrew Wooldridge said:
    June 6, 2013 at 2:57 pm

    @eden please file issues as you see them, and we can start figuring out what’s up.

  14. [...] Small CSS: The Yahoo UI folks have a project called Pure, which sets out to give you small (4.3K compressed and minified), 100% CSS modules of useful [...]

  15. Dave Wallace said:
    August 22, 2013 at 2:58 am

    Looks really promising, also great to see accessibility peeps throwing up red flags, I love that this will all come tucked into one utility belt.

  16. you lost me at “YUI will depend on pure”. Not to flame, but why oh why would you do this?

    What other JS framework out there puts dependencies on external styling? Stop trying to be everything to everyone, you constrain people too much by forcing them to use your CSS framework alongside your JS framework.

    I am saddened by this…

  17. Here is a challenge for everyone. When was Pure css.io created?