New Responsive Grids: Better Defaults, and Customizations via Tooling or Web UI

[tilomitra]

This pull request has the following things inside it:

• Removes grids-r.css, which removes all rules associated with .pure-g-r.
• Adds an .img-responsive class to base.css.

I've been using this branch locally to make the Pure-site mobile first, and use the new mobile-first grid system that's in the works.

Removing .pure-g-r

This pull request removes .pure-g-r and it's associated media-query rules from Pure. This is due to the following:

• We want to minimize the number of media queries we have in Pure. Media Queries cannot be overwritten, so we think people should generate their own media queries.
• We have a better mobile-first grid system in the works, powered by rework-pure-grids. Since it's mobile first, we don't need .pure-g-r any more.
• The new grid system will let you customize your media queries in a way similar to what was demonstrated in this pull request.
• We are moving the media queries out of Pure, and making it easier for people to generate their own responsive grid , with their own media queries using the rework-pure-grids. We'll have documentation for this on the Pure site.

Fluid Images

Since we are removing .pure-g-r, we need to have some way for folks to have their images be fluid. Before, this used to be defined in grids-r.css as this:

.pure-g-r img {
    max-width: 100%;
    height: auto;
}

Since that no longer exists, I added an .img-responsive class, which has the same rules. Add this to your images if you want them to be fluid.

Things to do before merging this PR in

• Update grids doc. with details on new mobile-first grid system
• Update grids doc. with details on how to use rework-pure-grids
• Update Pure-site to use mobile-first grid and send PR for that
• Update layouts to use mobile-first grid and send PR for that
• Update HISTORY.md
• Finish work on Get Started page
• Update Base page to talk less about normalize.css and more about our additions.

[doktorbro]

Why is it not prefixed with pure?

[ericf]

Yeah good point, this should be. I also think we could probably drop this style. Anyone who's doing something with images in their grid can easily add these styles.

[tilomitra]

I think it's pretty important to have a fundamental class such as this in Pure. Everyone uses this technique for responsive images, so instead of people duplicating this class in their app codebase, it should be provided by Pure. I agree that it should have a pure prefix though.

[ericf]

How about: pure-img?

[troyswanson]

👍 Yes yes yes!

[ericf]

@tilomitra two other major todos before we merge this are finish the work on pure-site's Get Started page, and update the Base docs to say less about Normalize.css (we can link over to its site) and more stuff we add on top of Normalize.css.

[tilomitra]

Cool, added that stuff to the list above.

[ericf]

Update

We've done a bunch of work on the new Get Started page for the website; it's close to being ready to ship, here's the code branch.

After revamping Pure's website to be mobile-first and fully responsive, and while building out this new Get Started page, @tilomitra and are leaning towards adding a new optional CSS module that contains some common, default breakpoints. This new module — let's call it grids-responsive.css — would not be part of the pure-min.css rollup; instead people can include in through another <link> or combo it with pure-min.css from the Yahoo CDN.

We think this will give the greatest flexibility to Pure while not removing a main feature, responsive Grids, but instead making it much better. Of course the Get Started page will guide people on using both pure-min.css and grids-responsive-min.css.

Default Breakpoints

Here's a proposal for what the default breakpoints should be. The goal is to encourage mobile-first CSS coding, and note that all em values used within CSS Media Query expressions are evaluated as 1em == 16px.

• sm: 568px (screen and (min-width: 35.5em))
• md: 768px (screen and (min-width: 48em))
• lg: 1024px (screen and (min-width: 64em))

Other possible additions to this list:

• xs: 480px (screen and (min-width: 30em))
• xl: 1200px (screen and (min-width: 75em))

And these would be used like this:

<div class="pure-g">
    <div id="main" class="pure-u-1 pure-u-md-3-4 pure-u-lg-2-3">
        <h1>Main Content</h1>
    </div>

    <div id="sidebar" class="pure-u-1 pure-u-md-1-4 pure-u-lg-1-3">
        <h1>Side Content</h1>
    </div>
</div>

Note: In this pure-u-1 applies for screen widths from 0–768px, then the medium breakpoint kicks in, etc.

Feedback, Please

We'd like your feedback on what default breakpoints you think would be most useful, and also the naming scheme used. Thanks!

Also remember that we've built out tons of tooling and we have the Get Started page coming which makes customizing Pure's Grid easy and is very powerful.

[bradleyfalzon]

My personal feedback without trying this yet: I really love the idea that you're having default breakpoints available to be easily included for new projects. This might have always been the intention though.

I love how it appears our existing markup will be compatible, but I'm yet to test exactly if this will be possible (by making the default pure-u-1 etc classes be "desktop first"). Some notes on backwards compatibility would be good?

I'm not a fan of the small = sm, medium = md, large = lg. Personally, I'd have suggested s, m, l. And if you want more or it's ambiguous adding the next letter (not what appears to be a random consonance, lg looks fine but md?). But again, this can just be fixed with the tooling, we'll choose s,m,l and perhaps xl or xs (I guess it's in line with clothing sizes?).

I don't know if that feedback is at all useful though.

[ericf]

I love how it appears our existing markup will be compatible, but I'm yet to test exactly if this will be possible (by making the default pure-u-1 etc classes be "desktop first"). Some notes on backwards compatibility would be good?

Yeah we'll be sure to add those notes. Also, if people want to take a desktop-first approach, they will be able to customize Grids to do that via the tools or Get Started web UI.

I'm not a fan of the small = sm, medium = md, large = lg. Personally, I'd have suggested s, m, l. And if you want more or it's ambiguous adding the next letter (not what appears to be a random consonance, lg looks fine but md?).

Yeah I thought about using the single letter names, but pure-u-l-1-2 looked hard to read. I'm on the fence…

I don't know if that feedback is at all useful though.

Yeah it is! How do you feel about the width values?

[bradleyfalzon]

I completely agree with the fact pure-u-l-1-2 is not ideal. An alternative I don't mind: pure-large-1-2 where you substitute the u for alternative screen size. I'm not in love with it either, but I think it's still easy to read, type and understand (and slightly in line with other frameworks). It obviously breaks your convention of pure-u - but appears to meet the main requirements? But tbh, I'd personally consider dropping pure- too if I can via tooling for future projects. None of these options are semantic, so lets go with the most obvious?

<div class="pure-g">
    <div id="main" class="pure-u-1 pure-medium-3-4 pure-large-2-3">
        <h1>Main Content</h1>
    </div>

    <div id="sidebar" class="pure-u-1 pure-medium-1-4 pure-large-1-3">
        <h1>Side Content</h1>
    </div>
</div>

As for the break points, sm, md and lg make perfect sense, I'd consider xl to be 1280px (just to land on a common boundary). xs is a nice addition, but I personally wouldn't find it useful (although I do have iPhone 4S, I don't think I'd realistically want any breakpoints targeting that device) so I'd be happy as a developer if it was left out.

[tilomitra]

I think we can go with the following breakpoints:

sm: 568px (screen and (min-width: 35.5em))
md: 768px (screen and (min-width: 48em))
lg: 1024px (screen and (min-width: 64em))
xl: 1200px (screen and (min-width: 75em))

We don't need the xs since the default pure-u-* can become that. Since we have tooling to allow people to manipulate all aspects of this grid, I think we should stick to convention and have the .pure-u- prefix for everything that's in Pure (although I am up for changing .pure- to .p- globally).

[tilomitra]

As for the break points, sm, md and lg make perfect sense, I'd consider xl to be 1280px (just to land on a common boundary).

@bradleyfalzon Just curious - does 1280px have a significance over 1200px? Is it a device breakpoint?

[bradleyfalzon]

I only suggested 1280 over 1200 because of a boundary, when I made the comment I incorrectly assumed it was 1920x1280 to target 1080p displays and larger, but I had my measures mixed up (it'd target 1280x800 displays instead). It's just all the other measures seemed to land on a common resolution, 1200 just seemed out, that's all.

http://www.w3counter.com/globalstats.php?year=2014&month=1 (see bottom right table)

Based on those stats, it might not be such a bad idea to go up to 1366 and call that xl. Between 1024 and 1200 is < 200px, which isn't really much space to do anything spectacular anyway.

This was just thinking out loud, the tooling is a great idea, and we'll most likely generate our own breakpoints for simpler prefixes, and adjusting xl to something larger.

[ericf]

@tilomitra d1ab35a e91b2be conflict with what's already done in master. I guess git revert those, and merge in master.

Also why add these commits now while we're still in discussions on the actual breakpoint values?

[ericf]

@bradleyfalzon Good call on xl being 80em/1280px!

[bradleyfalzon]

Since we have tooling to allow people to manipulate all aspects of this grid, I think we should stick to convention and have the .pure-u- prefix for everything that's in Pure

Just to reiterate my point to make sure it wasn't lost in my other comments, IMHO pure-medium-1-2 is faster to type, easier to read and easier to initially understand than pure-u-md-1-2.When there's many declarations for an element, IMHO, I think:

pure-u-1 pure-medium-3-4 pure-large-2-3 is easier to read than
pure-u-1 pure-u-md-3-4 pure-u-lg-2-3.

But that's all, tooling can customise this.

[ericf]

@bradleyfalzon I worry that without the -u- in the classname that it could be ambiguous. We will be doing an RC release for this stuff and hopefully that will give us all a chance to see how the classnames feel when applied to an existing codebase.

[kwando]

What about generating grids with gutters with the new tooling support?
Manually defining that for all breakpoints will be a nightmare =/

[tilomitra]

@kwando If you want to have gutters for your grids, just use this. Check the second example that uses box-sizing: border-box.

[ericf]

What about generating grids with gutters with the new tooling support?

@kwando We're not afraid to tell users of Pure that they are going to have to write some CSS. With this fundamental principle in mind, we don't want our tooling to lead to unnecessary bloat that is commonly seen when using CSS preprocessors. This is why we're not bundling the grids-responsive.css file into the main pure.css rollup. Some people want to use HTML-drivng styling, while others want to control styling from their CSS files; the latter folks won't care much for our grids generation tooling.

As @tilomitra points out, we have examples to show how people can write a little bit of CSS on top of what Pure provides to achieve their desired result. Let us know if there's other common grids-usage patterns that would benefit for similar examples.

[xlnt-webdesign]

I prefer the first suggested default XL size with 1200px.
this would prevent a layout change on 1280px screens when a scrollbar limits the available size.

for the grid I'd like to see a social/comment Layout example like facebook, twitter or this:
http://www.cascade-framework.com/grid-mediaobject.html
or
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

where a user-image requires a defined space and the content uses the remaining available space.

thank you

[tilomitra]

@xlnt-webdesign We're going with 1280px, but you can easily change this with the Get Started web interface that we'll be launching for Pure for the next release.

[ericf]

@tilomitra Looks good. Once all the HISTORY changes are added, let's merge this and deploy v0.5.0-rc-1.

[benzai]

Sorry if this has been already asked... Is it possible (and easy) to make Pure 'desktop-first'? I've tried mobile-first before with Foundation and I didn't really like the process. I prefer the other way around.