Create Grid System for Component Library - UI

[kangina-tech]

Overview

Grids create a balanced and pleasing UI. It is best practice to create a good standard for them.

Background

This project is heavily reliant on the Atomic Design process. As explained by the HfLA Design System Guide for Designers, it is the simplest way to go through all the possible steps that are required for this component part.

As a point of start for this stickersheet, it is best to create the components based off of Hack for LA's current system and let the other teams adjust them according to their needs.

Action Items

Grid System

Extra Large Grid

• [ ] screen size
• [ ] Margin
• [ ] Gutter
• [ ] Type

Large grid

• [ ] screen size
• [ ] Margin
• [ ] Gutter
• [ ] Type

Medium grid

• [ ] screen size
• [ ] Margin
• [ ] Gutter
• [ ] Type

Small grid

• [ ] screen size
• [ ] Margin
• [ ] Gutter
• [ ] Type

When in doubt, use the Neilsen Norman Group discussion on grids and their types.

Resources/Instructions

Internship Project Civic Tech Jobs HfLA Website