Revamp Pure Grids

[tilomitra]

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 grids spacing wrong without Arial on pure-g, pure-g-r #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%.

[lkraav]

Wow, very nice. When and how is it decided if this is going to be fully merged?

[AurelioDeRosa]

Hello @tilomitra. First of all, you did a great job! Secondly, is this a typo?

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

should be

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

right?

[tilomitra]

@AurelioDeRosa Thanks, you're right! Updated.

@lkraav I hope to get some feedback from you guys here. You can use this in your project right now if you pull from my new-grids branch. I intend to pull this in to the next release of Pure (0.3.0) provided everyone is cool with it.

[bradleyfalzon]

From a users point of view, this is fantastic. We've come across a few limitations the grids here have (no offsets and no breaks), we added in this functionality ourselves - but would prefer to just use this method. Does anyone have a rough guide as to when this would get added into pure (0.3.0?), we've already began using 0.2.0, and would prefer to rewrite using this new syntax and functionality.

[tilomitra]

@bradleyfalzon Normally, we try to ship a new version of Pure every two weeks. We just shipped a few days ago, so I would guess it'll take another 1.5 - 2 weeks, provided that we don't run into any issues.

If possible, please do pull down my new-grids branch and build Pure locally to see how the grid works for you. Real world feedback is always very helpful for us. I came up with this grid because of similar deficiencies that I found in the current Pure grid system.

[bradleyfalzon]

Yeah will do, we've done a fair bit already across our site, I'm working on a specific page at the moment, once that's done (won't be more than a few days tops), I'll look at trying new-grids. Looking forward to it.

[ghost]

If you now use font-size: 0 hack - do you need all the letter- and word-spacings anymore?

• i fixed a bug in my own "display-block-framework" for ipad/iphone by adding: -webkit-text-size-adjust: 0%; to grid-div(.pure-grid) and -webkit-text-size-adjust: 100%; to the inner-div(.pure-u). Dont know if this is needed if you use font-size: 0; hack...

[xlnt-webdesign]

@tilomitra Congratulation, this is a step in a direction I like.
My suggestion to improving this even further is add a visibility toggle. There could be a unit I'd like to show to desktop users but hide on phones.
I use something like this to replace long text descriptions suitable for the desktop, and replace it to shorter text description on tablets or even hide it on phones.

I know it is a hack - but incredible useful

[michel-tournier]

Mobile-first, declarative and less verbose classnames really is a step in a right direction. Looking forward to version 0.3.0. Keep up the good work guys, will test the new version asap!

[tilomitra]

@xlnt-webdesign We already have this: https://github.com/yui/pure/pull/146/files#L4L55

[msweeney]

@tilomitra Would you mind splitting this into multiple pull requests? I have questions/feedback on the classname changes, offsets, responsive classes, and the IE-specific hacks. It seems like we could split into 3-4 pull requests to keep the discussions focused.

[tilomitra]

@msweeney No problem. Check out the pull requests that are mentioned above this comment. Looking forward to your feedback.

[ericf]

Should this PR be closed then?

[tilomitra]

@ericf Let's leave it open for now. This pull request does a nice job summarizing everything.

[Perturbatio]

Doesn't the font-size hack cause problems when setting your own font sizes?

https://gist.github.com/Perturbatio/6092906

I've tried to implement the font-size changes in that Gist with the current Pure version, the text in the right hand column should be 160px

[michel-tournier]

Any ETA when the new version (0.3.0) would come out with the grid changes (mobile first and new classnames)? Do you guys need any help to speed up the process?

[ericf]

@michel-tournier Currently we've been doing feature-based releases, therefore we don't have a set release schedule. We have however made a decision that the next Pure release will be 0.2.2. And at this point we're hoping to release that ASAP.

[pspeter3]

@ericf So this grid system will not be part of the 0.2.2 release right?

[pspeter3]

@tilomitra I just pulled down 0.3.0-rc2 and this new system was not in there. Can this and the menu get added?

[tilomitra]

@pspeter3 We're working on getting this in for the next major Pure release.

[bradleyfalzon]

@tilomitra any further update on this, in regards to either syntax/functionality changes (other than what's documented in the PR) and if you have any further details on eta? Just came across another use case where this'd work brilliantly.

[tilomitra]

@bradleyfalzon We're working on Pure Menus right now. That's what will be coming in Pure 0.4.0. This will probably land in Pure 0.5.0.

You can still use this directly off the PR. What's your use case? It would be useful for us to keep use-cases in mind as we build these out. 😄

[bradleyfalzon]

Thanks @tilomitra, it's a pretty typical use case, but the inner component has a fixed width <input> and <button>. This scales perfectly well on mobile (switches to 100% width) and looks good on >1024px. But on the portrait tablet, the width isn't wide enough to sit the <input> and <button> on the same line.

<div class="pure-g-r">
    <div class="pure-u-7-12">Product Name</div>
    <div class="pure-u-5-12"><input><button>Add</button></div>
</div>

In the future, we'd look at:

<div class="pure-grid">
    <div class="unit default-1 tablet-1-3 desktop-7-12">Product Name</div>
    <div class="unit default-1 tablet-2-3 desktop-5-12"><input><button>Add</button></div>
</div>

The product name can be quite long, so on desktops, we'd like to keep that field as long as possible (for example, we don't want to reduce the size to .pure-u-1-2. or less) so we only want to go to smaller on where width is somewhere between 768px and 1024px. More testing is required though.

We'll leave it for the moment, it's only the initial unreleased feature, but we will consider merging in this PR ourselves. Our only concern is we'd already made a few changes to base pure (adding offsets ourselves for example), so it's more work than is warranted right now - but we will eventually need to do it - along with a large rewrite of .pure-g-r syntax throughout code base (which we're OK with, the new syntax is probably better if .default-1 isn't actually required, and better if .unit wasn't required too - but that's just in our case).

[DEllingsworth]

Would be nice to add tenths to the grid units. It would only mean adding 4 new classes, but seems like tenths come up a lot when I am converting old table style layouts to Pure Grids.

[mattbaker]

Are things progressing on the grid revamp? We're wondering if we should commit to Pure. Like what I'm seeing, but we're in need of the features that may-or-may-not be upcoming.

[tilomitra]

@mattbaker We'll probably talk more about the Grids Revamp on the YUI Open Roundtable this Thursday at 2pm PST. We'll have it livestream on Youtube. /cc @ericf

[mattbaker]

That would be great, where would I tune-in? Is there a specific YouTube channel to watch?

[tilomitra]

@mattbaker It'll be live-streamed on Google+ and available later on the [YUILibrary Youtube page](p on http://www.youtube.com/yuilibrary/ and if you want,). If you can join the livestream via Google Hangout. Just add YUILibrary to your circles on Google+.

[bradleyfalzon]

Just confirming, the open roundtable talks re purecss were cancelled? https://www.youtube.com/watch?v=P1tc0kS1AIY

[tilomitra]

Yeah, we had to postpone due to some last minute meeting conflicts. We are rescheduling for the upcoming Thursday. That's the 24th of October.

[tilomitra]

@ericf and I discussed Grids at length this week and we have a good idea of what we want to do with responsive Grids in Pure, so you guys should tune in if you are interested!

[AurelioDeRosa]

@tilomitra Thrilled to hear from you the news!

[ericf]

Here's the great discussion we had a couple weeks ago where we talked through some ideas and issues with doing responsive Grids in Pure http://blog.purecss.io/post/65656116532/last-weeks-yui-open-roundtable-featured-an

[michel-tournier]

Hi guys (@tilomitra @ericf), any ETA on revamping Pure Grids? When will the new grid system be finalized?

[ericf]

@michel-tournier no ETA at this time, but we discussed our plans in the link I posted above.

[ericf]

Closing this now that we have #267, see the discussion there.