Another type of generator for generating grid widths. This is the version we commonly use, because it outputs significantly less css. Most elements can be aligned to the design in halves, thirds or quarters, however this can be extended to include fifths as well.

These classes are set up to adhere to a specific naming convention: g-[size]@[breakpoint-name]. Below are some examples.

  • .g-one-half@desk
  • .g-two-thirds@lap
  • .g-one-quarter