This design system will work with any grid system, however the design resource files were created using Bootstrap's 12-column grid to set default widths for all components. This does not affect development.
There are seven spacing values that are used throughout the system for both vertical and horizontal spacing: --gs1-spacer-1 is the smallest, and --gs1-spacer-7 is the largest. While most spacing values are one of those seven or a product of the grid gutters, there are some exceptions, especially for the smaller components.
<aside> <img src="https://img.icons8.com/ios/250/000000/info.png" alt="https://img.icons8.com/ios/250/000000/info.png" width="40px" /> Warning: spacing values in the design resource files are for visual reference only and should not be used for development.
</aside>
The CSS provided with the guidelines includes responsive spacing values using rem and vw units so that the calculated size varies depending on the users’ viewport and root font size.
Example: {margin-bottom: calc(1.31rem + 4.92vw);}
This enables a cohesive user experience as text and spacing are automatically smaller for small screen sizes and larger for large screen sizes.
While "ugly" numbers in the browser are commonplace, the limitations of web design software require us to used fixed sized units (px). Because of this, the specs from the design resource files are approximations and should only be used to create mockups for stakeholder approval. Developers should use the styles and CSS custom properties provided in the code rather than using the px values from the specs.
For more information, see Getting started: for developers.
The provided CSS includes the seven spacer values as CSS custom properties to use on margins and paddings while coding your pages.
The CSS also includes utility classes that set margin-bottom specifically: .gs1-spacer-1 – .gs1-spacer-7.
The design resource files contain symbols (in Sketch) and components (in Adobe XD) that have the seven spacing variables approximated at small and large screens. Using these assets will help you make page mockups with consistent spacing.
https://notion-ga.astrocket.vercel.app/collect?tid=UA-889776-28&host=notion.so/gs1&page=grid_and_spacing
