groundworkcss/groundwork — pull request #239 by JProffitt71 (2014-01-12 05:27:36+00:00)
Title: 3.0.0 wip mobile first

This one is a little larger. I would look at the commits for quick overall details on changes. You can see the site live at http://dev.bnpdesigngroup.com/groundworkcss/

New features:

- Centralized breakpoint definition
- $breakpoints: List of breakpoint names (used in classes, placeholders, everywhere).
- $breakpoint-sizes: List of breakpoint min-widths, where corresponding breakpoints take effect.
- $default-base: The breakpoint that should be considered the de-facto "default" for any helper, defaults to first breakpoint.
- $grid-base: The breakpoint that should be considered the default for any grid class, defaults to LAST breakpoint (not default-base). Reasoning that grid float behavior is expected on larger devices.
- $navigation-base: The breakpoint that should be considered the default for any nav class, defaults to LAST breakpoint (not default-base). Reasoning that nav bar-mode behavior is expected on larger devices.
- $helper-base: The breakpoint that should be considered the default for any helper class (in layout/_helpers.scss), defaults to $default-base.

- Toggleable media queries via "respond-min" and "respond-max" mixins
- $fixed-size: Media query size that should be simulated, removes media queries above that size (ideal for IE8 fallback stylesheets).

- Breakpoint loops via "breakpoint" mixin
- Automates the mobile-first flow by reiterating contents for each breakpoint
- Takes two parameters:
- $base: The breakpoint that should be suffixless and therefore the "default"
- $append: How the target should be appended, can be "suffix" ("-" + target), "prefix" (target + "-"), or "none" (just target)
- Provides three variables to contents:
- $breakpoint: Current breakpoint (by name)
- $breakpoint-index: Current breakpoint (by 1-based index)
- $breakpoint-target: Suggest string for appending

Advantages:
- Consistent structure (breakpoint loops)
- Minimal rewriting for responsive
- Extendable (define new breakpoints, remove old ones)
- Semantic customization (rename breakpoints)
- Easy IE8 media query fallback (define "fixed-mqs" in separate stylesheet, serve file mutually exclusively to ie lte 8) NOTE: Compiled css MUST be blessed for IE9 and below

Disadvantage:
- Easily bloated (every breakpoint adds 65 kb to compiled size, 50 kb to compressed size, ~ 5kb to gzipped). Not bad if you're gzipping, but notable, similar to animations.
- Navigation is confusing to @extend. Probably something that can be fixed with a rewrite-from-scratch. I just inverted it for this.

Consequences:
- right/left modifiers must match their grid breakpoint (one-fourth => right-one, one-fourth-small-tablet => right-one-small-tablet). This can be advantagous for complex offseting (.one-half-mobile.right-one.one-third-ipad.right-two-ipad), but can be a little annoying for simple operations. Might want to make this behavior configurable.
- nav starts off mobile like grids start off collapsed, goes into "bar-mode" at breakpoint
- collapse-on-* has been deprecated, because it doesn't logically fit the mobile-first flow.
- removed reference to breakpoints.scss, since that is defined in settings now.

Other notes:
- Currently does not extend to tabs. Will need to look into those later. Having a way to pass arbitrary info from css to javascript would be nice (if script knew breakpoint names and widths, it could easily figure out what to do when).

Next up:
- "silent" package (useful for creating supporting stylesheets consistent with the core)
- rem support + fallback support
- encapsulate placeholders into mixins, for importing into media queries (Making @extend a little more useful, and replacing internal-placeholders)

My end-goal:
- Use groundworkcss as an easy "drop-in" core that can be configured and pulled into site-specific stylesheets. Replace Twitter Bootstrap.