This was reported on yui3 grids and still exists (http://yuilibrary.com/projects/yui3/ticket/2533215.) The summary is that the letter spacing = -0.31em hack placed on the pure-g[-r] class to make the grid units work well only works (well) if the font family is Arial. It may appear to work for other font families (pure sets the font family for the html tag to sans-serif), but the spacing is not perfect, and it breaks down in certain browsers (atm it fails on FF/Linux for me.) The general solution is ensure that the pure-g and pure-g-r divs get Arial, and that your own content within the pure-u-x-x divs get whatever font you want (so I guess that means resetting back to sans-serif for pure compatibility.) My interrim solution is to add css like this

.pure-g, .pure-g-r {
    font-family: Arial;
}

in my own css file loaded after pure, and also either resetting the font for all the pure-u-x-x

.pure-u-1, .pure-u-1-2, ...
    font-family: sans-serif;
}

or using a container (which I always do anyway) inside the pure-u-x-x which sets the font (and does other as well.)

I think the best solution is to handle the pure-g, and pure-u stuff inside of pure.

I'm just curious about the current state and the maintenance of this project as the oldest issue is from 3rd of july 2013 with actually 85 open issues and 20 open pull requests - where the oldest ist from 23rd july 2013. is this project still relevant or did you guys give up against bootstrap?

It seems clear that the project could benefit from using a CSS preprocessor in order to minimize redundant code and sync issues, and to give developers a clean way to customize and extend.

The big question is which to choose?

Short list of candidates:

• Sass (http://sass-lang.com/)
• LESS (http://lesscss.org/)
• Rework/Styli (https://github.com/visionmedia/rework)

Any others we should consider?

This commit makes Pure Menu smaller, more responsive, and easier to customize. This change does break back-compatibility, as I have removed some classnames and some functionality.

What's in this PR

• Remove the close relationship with YUI's Y.Menu. This helps to get rid of a lot of CSS which wasn't needed 80% of the time.
• Remove .pure-menu-open: This also helps to get rid of adjoining class selectors, which makes it easier to customize menus.
• Add .pure-menu-responsive and .pure-menu-responsive-toggle to make responsive horizontal menus: Yay!
• CSS-only dropdown support: This only supports one level of nesting but I think that should be fine for most use cases.
• Make pure menus really easy to customize: More on this below

Responsive Horizontal Menu

This is something that I've been wanting for a while. You can now make responsive menus that can show and hide their links on small screens. Doing this is really easy, and the site will have JS snippets that you can copy/paste in to achieve the necessary behavior.

This is done by adding two new classnames, .pure-menu-responsive and .pure-menu-responsive-toggle. Since you may not want every horizontal menu to be responsive, you have to add the .pure-menu-responsive class name. Responsive menus also need an <a> element with the .pure-menu-responsive-toggle class name so that it can show/hide menu items on small screens.

HTML

Here's the HTML for a responsive menu:

    <div class="pure-menu pure-menu-horizontal pure-menu-responsive">
        <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
        <a href="#" class="pure-menu-responsive-toggle">Toggle</a>
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Blog</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
        </ul>
    </div>

That'll give you something that looks like this on small screens:

Open State:

Dropdown Menu

Here's the HTML for a dropdown menu:

    <div class="pure-menu pure-menu-horizontal pure-menu-responsive">
        <a href="#" class="pure-menu-link pure-menu-heading">Title</a>
        <a href="#" class="pure-menu-responsive-toggle">Toggle</a>
        <ul class="pure-menu-list">
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Home</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">About</a></li>
            <li class="pure-menu-item pure-menu-has-children">
                <a href="#" class="pure-menu-link">Blog</a>
                <ul class="pure-menu-children">
                    <li class="pure-menu-item"><a class="pure-menu-link" href="/handlebars">Handlebars Helpers</a></li>
                    <li class="pure-menu-item"><a class="pure-menu-link" href="/dust">Dust Helpers</a></li>
                    <li class="pure-menu-item"><a class="pure-menu-link" href="/react">React Mixins</a></li>
                    <li class="pure-menu-item"><a class="pure-menu-link" href="/javascript">Intl Message Format</a></li>
                </ul>
            </li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Contact</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">GitHub</a></li>
            <li class="pure-menu-item"><a href="#" class="pure-menu-link">Twitter</a></li>
        </ul>
    </div>

Here's what it looks like:

Customizing the menu

The menu now has various child classes that you can hook into. Here they are:

1. .pure-menu: Hook into this to style the menu's bounding box.
2. .pure-menu-list: All <ul> tags within a menu should have this class.
3. .pure-menu-item: All <li> tags within a menu should have this class.
4. .pure-menu-link: All <a> tags within a menu should have this class.
5. .pure-menu-has-children: A <li.pure-menu-item> tag that has a nested menu should have this class.
6. .pure-menu-children: A <ul.pure-menu-list> tag that is a child of an <li.pure-menu-item> tag (nested menu) has this class.
7. .pure-menu-heading: A <a> tag that is outside the <ul.pure-menu-list> and is the heading for the menu has this class.
8. .pure-menu-responsive-toggle: A <a> tag in a responsive menu that sits outside the <ul.pure-menu-list> and is responsible for showing/hiding the toggle button has this class.
9. .pure-menu-is-active: In a responsive menu, this class signifies when a menu is "open" (ie: showing its submenus).

Menus were probably the hardest part of the library to customize. You would have to write a ton of messy CSS to do it. Not anymore! This is how you customize a menu now:

HTML

Here's the HTML for a responsive horizontal menu. I've added some classes with the -custom suffix to base my styles off of. I recommend doing the same when customizing any Pure component.

    <div class="menu-custom pure-menu pure-menu-horizontal pure-menu-responsive">
        <a href="#" class="heading-custom pure-menu-link pure-menu-heading">Title</a>
        <a href="#" class="toggle-custom pure-menu-responsive-toggle">Toggle</a>
        <ul class="list-custom pure-menu-list">
            <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">Home</a></li>
            <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">About</a></li>
            <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">Blog</a></li>
            <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">Contact</a></li>
            <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">GitHub</a></li>
            <li class="item-custom pure-menu-item"><a href="#" class="link-custom pure-menu-link">Twitter</a></li>
        </ul>
    </div>

CSS

Here's what the CSS would look like. Notice how I've added my own class to the menu above to make it easier to style. However, I don't have to use any descendent selectors anymore.

        /* Update background on menu. */        
        .menu-custom {
            background: #111;
            padding: 0.8em;
            border-radius: 5px;
        }

        /* Make the heading white */
        .heading-custom {
            color: white;
        }

        /* Make links light-gray with a transition */
        .link-custom {
            color: #ddd;
            transition: color 0.5s;
        }

        /* Color links blue on hover and focus */
        .link-custom:hover,
        .link-custom:focus {
            color: #40a4ff;
        }

        /* Update the positioning of the toggle button 
        because we are modifying the menu's padding, and change its color. */
        .toggle-custom {
            margin-top: 6px;
            margin-right: 15px;
            color: white;
        }

Looks like this:

Responsive Behavior and overriding Media Queries

To add the responsive behavior to menus, we obviously need to have a media query. I recommend doing the same thing that we did with Grids. Have pure-menu-responsive.min.css available on the CDN, with a sane media query default (I recommend 48em), but allow people to override this by not getting that file from the CDN, and instead adding the following CSS inside their app.css:

@media (min-width: 48em) {
    /*At 48em and higher, the list becomes display:inline-block (from display:none)*/
    .pure-menu-responsive .pure-menu-list {
        display: inline-block;
    }
    /*At 48em and higher, we hide the toggle, because we just showed the .pure-menu-list*/
    .pure-menu-responsive-toggle {
        display: none;
    }
}

Responsive Behavior and JavaScript

You need to have some JS on the page to toggle the responsive menu. This would be something that users can copy/paste from the Pure site.

Example using YUI:

        YUI().use('node', function (Y) {
            //When you click on a .pure-menu-responsive-toggle, toggle the associated menu
            Y.one('document').delegate('click', function (e) {
                e.preventDefault();
                e.target.get('parentNode').toggleClass('pure-menu-is-active');
            }, '.pure-menu-responsive-toggle');
        });

Tests

I've tested this on Latest Chrome/FF/Safari, and iOS 7. Haven't tested this on Android or IE yet, so I'll do that and report back here (help would be appreciated :smile: ). The manual test page has been updated with the new menu.

Next Steps

• [ ] Verify tests in IE
• [ ] Verify tests in Android 4.x

Looks like the helper classes pure-hidden-phone, pure-hidden-tablet and pure-hidden-dekstop appear to be removed - which should be mentioned in the release notes ... I guess :) Or is it a bug in the RC1?

James Alley – Welcome to Pure!

Pure Roadmap 2015

During the latter part of 2014, Pure has cruised along. Pull requests have come in, people have filed issues, and in some cases we've taken the time to integrate the changes or comment. Meanwhile, we have focused on some exciting new efforts, quite separate from Pure, which will bear fruit in the coming year. But it's time to dive back into Pure, and to share with everyone our roadmap for Pure in 2015.

The Scope and Vision for Pure

We still intend to keep Pure small, focused, and useful to any web project. We intend to refine and maintain Pure, rather than radically expand its scope. Pointedly, Pure will not expand to become a library of drop-in UI components. Rather, it will remain a foundation with a "ridiculously tiny" footprint that developers use as a starting point for writing their own CSS.

There has been some discussion on whether Pure should expand to become a component library, replete with segmented controls, drop-downs, tab-views, etc. We perhaps contributed to this perception by including a paginator component. Why do so, if Pure is more about smoothing the foundation than creating components?

For inclusion in Pure, a construct must meet the following criteria:

• Common (useful to the vast majority of websites, ~80%+)
• Non-trivial

In other words, we're looking for stuff that everyone needs and yet finds difficult to implement with the proper semantics, accessibility (including keyboard access), and browser support. In fact, for these reasons, in the upcoming 0.6 release, we're removing the Paginator component. Pagination is not common enough, many sites use infinite scrolling, and it's trivial to implement yourself using inlined button-styled anchors. But this can be a gray area. We don't scientifically evaluate the 80% rule; difficulty and triviality are obviously subjective. So we welcome suggestions and the discussions they will spark.

About Those Pull Requests...

Incidentally, we cannot merge some very good PRs due to a lack of a CLA (license) on file for the contributor. Please don't let this discourage you! To take care of the CLA, simply follow the link to sign electronically. (https://yahoocla.herokuapp.com)

The Road to 1.0

The community has battle-tested Pure and provided feedback. In addition to incorporating bug fixes into Pure, we wish to focus on five areas of refinement before we declare Pure ready for a 1.0 stamp, whereby we begin to guarantee backwards compatibility through all subsequent 1.x releases.

1. New Pure Menus. The 0.6 release will include a new Menus component developed by Pure contributor Tilo Mitra to be more responsive and more easily customizable.
2. Removal of Paginator. Paginator doesn't meet the 80% bar, and is trivial to implement as inlined button-styled anchors. Removed in 0.6.
3. Revamped Forms which leverage Grids. Currently, Forms has some utility classes to aid with layout, but we plan to remove them in favor of letting users leverage Grids instead.
4. Refinements to Grids. At the very least, we want to bring more browsers onboard to Grids' flexbox-based implementation. Some users have noted the font-family: sans-serif dependency as an annoyance, so that is worth re-examining. There may be takeaways from other grid constructs that we can apply.
5. Removal of vendor-prefixing from source. While this does not affect end users of Pure, we plan to remove vendor-prefixing from the source code in favor of inserting them via post-processing in the build. You'll still see them in the finished CSS on the CDN.

Of course, our backlog of issues and PRs may also surface important changes we'll want to incorporate into Pure as well. As the outline below illustrates, even without an ambitious expansion of Pure, plenty of tasks lay ahead 2015. Without further ado, then, here's our plan, organized into three-month quarters.

Q1. Pure 0.6

1. Merge new-pure-menu PR
2. Refactor pure-site accordingly
3. Release Pure 0.6 and pure-site
4. Address open PRs and issues

Q2. Servicing feature requests

1. Complete the review and absorption of all outstanding pull requests
2. Clean up pure-form to remove functionality duplicated by pure-grid
3. Update Pure-site accordingly
4. Release 0.7
5. Revise Pure so that vendor prefixing can be accomplished with configurable post processing.
6. Investigate supporting a CSS-driven approach (and possible Sass integration) for using Pure along with the current HTML-driven approach (annotating HTML with class names).

Q3. Pure 1.0 Release, and Components

1. Fix bugs surfaced by the 0.7 release.
2. Release 1.0.

Q4. Post 1.0

Per semantic versioning, 1.0 will be our signal to the world that backwards compatibility will be assured in future 1.x versions. Should the need arise to break backwards compatibility with 1.0, we will increment to 2.x releases.

And that's it! We hope you have found Pure to be useful and unobtrusive, and that you look forward to Pure's continued improvement. To provide feedback, please comment on this GitHub issue, or file a new issue to have it tracked as a separate thread.

– James Alley and the Yahoo Presentation Technologies team

This PR introduces is a pretty big change to how Grids work in Pure.

Features

• Mobile-first
• Declarative, allowing you to specify how your grid behaves on phones, tablets, and desktops
• Less verbose classnames: changes the grid classnames (pure-g => pure-grid, pure-u => unit, no need for .pure-g-r)
• Fixes #41 with a font-size: 0 hack.
• More responsive! Instead of just collapsing to 100% on small screens, you can specify separate behavior for tablets, phones, and desktops.

The rules

The rules for using the new grid is similar to the old one, with some minor differences:

• Everything must be nested in a pure-grid (used to be either a pure-g or a pure-g-r)
• All elements within a pure-grid need to atleast have the classname of unit (Same as the old pure-u).
• There are 3 types of classnames that you can use: (a) default-* which is the default width of an element, tablet-* which is the width when viewed on 480px and higher, and desktop-* which is the width when viewed at 768px and higher. See below for more info on how these work.

How it works

The new grid syntax is more simplified and less verbose. Here's how you define the simplest grid. The grid below is a non-responsive grid with two 50% units.

<div class="pure-grid">
        <div class="unit default-1-2">
            ....
       </div>
        <div class="unit default-1-2">
            ....
       </div>
</div>

Responsive Behavior

One of the problems with the current grid system is that it's not really smart when it comes to responsive design. On phones, everything just collapses to 100% width, or stays the same as the desktop version. This new grid helps with that. Suppose you want something that is 25% on desktops, 50% on tablets, and 100% on phones:

<div class="pure-grid">
        <div class="unit default-1 tablet-1-2 desktop-1-4">
            ....
       </div>
        <div class="unit default-1 tablet-1-2 desktop-1-4">
            ....
       </div>
        <div class="unit default-1 tablet-1-2 desktop-1-4">
            ....
       </div>
        <div class="unit default-1 tablet-1-2 desktop-1-4">
            ....
       </div>
</div>

The cool thing here is that you don't have to specify all 3 classnames. You only have to specify a classname when you want something to change. Suppose you have an element that you want to be 50% on phones and tablets, and only 20% on desktops:

<div class="unit default-1-2 desktop-1-5">

Unlike the old grids, you don't need a pure-g for non-responsive elements and a pure-g-r for responsive ones. Just use a pure-grid for everything.

Offsets

I also took this time to introduce offsets to grids. You can add offsets through the offset-* classname:

<div class="unit default-3-5">
    <div class="l-box">
        default-3-5
    </div>
</div>
<div class="unit default-1-5 offset-1-5">
    <div class="l-box">
        offset-1-5
    </div>
</div>

Tested

This has been tested on IE7+, Latest Chrome, Safari, FF, iOS6, Android 4.0.x. The new grids has separate *widths and *margin-left defined so that it works on old IEs. I had to fool around with a lot of values to get to ones that worked well.

*width = width - 0.031%.

Creating a flexible space using inline-blocks seems impossible and the justify trick seems not to work.

I played around with the following code but it increases slightly the height of my fixed horizontal menu bar:

.pure-menu-custom-pull-right {
  text-align: justify;
}

.pure-menu-custom-pull-right:after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 0;
  font-size:0;
  line-height:0;
  margin: 0;
  padding: 0;
}

Is there a way to add a pull-right for the menus, I think it could be a useful addition to the standard base?

Description

This is a catch all ticket for potential infrastructure changes to improve Pure.

Items

1. [x] (#787) Migrate website - Zeit v1 is EOL, current Node.js site doesn't support v2.
2. [x] Upgrade Normalize - Version currently used is very old. We should upgrade to the latest version.
3. [x] Remove old browser support - There are many browser hacks for old IE, Opera and Safari browsers. These are most likely unnecessary and just add bloat to the project.
4. [x] Remove Bower - NPM has taken over as the FE package manager and bower use has declined over the years. Deprecating the https://github.com/pure-css/pure-release repository would be the first step.
5. [x] Audit all existing styles to ensure latest CSS spec is met.

This pull request is primarily for discussion purposes around the new responsive units. The entire pull request for the new grid system that I'm proposing is here: https://github.com/yui/pure/pull/146

Given the announcement that development of YUI is ending, I was wondering what this means for Pure.

Is this a good thing, meaning that focus will be spent on Pure? Or is this bad, meaning that Pure is also going away?

Bumps qs from 6.9.3 to 6.11.0.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Is your feature request related to a problem? Please describe. No problem here, just missing info from documentation.

The docs give CDN links to the base and grid css, but I can't find the forms one, and the releases also don't include the built files, so if I want to download the minified files I have to find the CDN link and download from there.

Describe the solution you'd like I suggest putting all available CDN links in one place, so it's easier for people that just want to include and start using them. Also include the minified files in the releases in case someone wants to download and serve the files them selves.

Describe alternatives you've considered N/A

Additional context N/A

Bulma has is-narrow CSS class to fit a column to its content, and then the other columns autosize.

It would be great if Pure could have this too. Because Bulma breaks too many other things sadly.