Foundations
2x Grids
A system to design hierarchy and organize elements
Overview
The 2x Grid is the geometric foundation of all the visual elements, from typography to columns, boxes, icons, and illustrations.
The grid is an invisible glue that holds the design together and brings order to a page. It provides a way to achieve an organized positioning of elements that it is harmonious and consistent across the experience.
Objectives
The grid system serves as the foundation for arranging content on web pages.
- Consistency: A unified layout system that allows for consistent design across different pages.
- Responsive: Enable fluid designs that adapt seamlessly to different screen sizes.
- Flexibility: Provide flexibility within the grid to accommodate different content types and specific design needs.
- Accessibility: Ensure that grid layouts maintain readability and usability, particularly for users with visual impairments.
Mobile First
The mobile-first approach is to design first for the smaller screen and work your way up. We design for a generic screen size of 375px with 4 columns to account for most used Android and iOS devices.
Breakpoints
For best results, test designs and code at least in these standard breakpoints.
| Size | Breakpoints | Padding | Margin |
|---|---|---|---|
| Mobile | 300-766px | 16px or 1rem | 16 or 1rem |
| Tablet | 767-991px | 24px or 1.5rem | 24px or 1.5rem |
| Desktop | 992-1279px | 32px or 2rem | 32px or 2rem |
| Desktop-XL | 1280px | 32px or 2rem | 32px or 2rem |
Unit
The basic grid system of 8Bit Loot is the individual 8-pixel square unit. Multiples of square units compose the dimensions of columns, rows, margins and paddings.
Columns and Rows
Columns and rows create key lines that are essential for visual rhythm, especially for typography. Construct columns by either dividing a space into a fluid grid, or by tiling fixed boxes in multiples.
Fluid grid
A fluid grid divides space by twos. This division is immediately evident in the 2x column structure. Within a breakpoint, the column count is constant, and unit size scales with screen size. Choose a column count by starting with one, then divide by two as needed.
Fixed grid
A fixed grid starts with a fixed unit size from the sizing scale, then tiles and wraps as needed, like text. To employ the 2x concept, once you’ve determined the original box size that you want to use, you can multiply it by two and so forth to create a layout.
When tiling fixed boxes, the column count is not known in advance, but a grid emerges visually due to the use of a consistent sizing scale. On breakpoint boundaries, fixed sizing scales match column sizes.
Margin
Padding is always a fixed multiple of mini units: 16 pixels at all standard breakpoints. Always align type to the edge of box padding.
Padding is always a fixed multiple of mini units: 16 pixels at all standard breakpoints. Always align type to the edge of box padding. Note, some design tools add padding to text boxes by default; check text box padding and remove it if necessary.
Padding
Grid margins are the outer margins of the grid. They can be the same width as the gutters or greater.
Gutter
Gutters are the gaps between the columns. Gutter widths are fixed values (16 px, 24 px, 32px) based on the Mobile, Tablet and Desktop breakpoints.
