Contents

name: Element Spacing
description: |
  When creating new layouts, cards or modals — or otherwise adding elements to Casebook — please use Groundwork's gap and pad helpers, rather than hard coded pixel-based element spacing. Doing so will correctly preserve spacing on different screen sizes.

  See [Groundwork's helper classes](http://groundworkcss.github.io/groundwork/docs/helpers.html) for a complete reference.
usage: |
  * Use Gaps (Gap = Margin) to add spacing BETWEEN elements. Use pads (Pad = padding) to add spacing WITHIN elements.
  * When in doubt, use gaps vertically, since the browser will collapse cascading gap elements and thereby prevent doubling visual space when items are placed adjacent to one another.  Before delivering a story, always double check that adjacent elements have kept the intended collapsed distance from one another (i.e. elements are not further apart than desired due to the additive margin effect).
  * Wherever possible/relevant, build consistent element spacing into Undercase, rather than adding it inline for each element.
  * Always use multiples of half or full gap.
  * As a reference, we are moving towards more white space in Casebook, so all spacing (except for icon/text separation) is/should be 1x gap/pad or larger, as outlined in the examples below.
category: :grids

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
undercase-0.2.57	lib/undercase/patterns/grids_element_spacing.yml