Size Classes

An attempt to simplify the "breakpoints mess" in web development using something Apple has named Size Classes in Xcode 6 (see this WWDC Video for details) for creating so-called "Adaptive Layouts".

I still have no idea if it'll work, but I'm going to use it extensively until I know more :)

Usage

To create "compact" and "regular" styles for a selector:

.header {
    // These styles apply to all size classes
    font: Times, serif;

    // These only applies within the "regular" horizontal size class
    .regular-width({
        font-size: 2.5rem;
    });

    // These only applies within the "compact" horizontal size class
    .compact-width({
        font-size: 1rem;
    });
}

Output (simplified)

.header {
  font: Times, serif;
}
@media only screen and (min-width: 569px) {
  .header {
    font-size: 2.5rem;
  }
}
@media only screen and (max-width: 568px) {
  .header {
    font-size: 1rem;
  }
}