Style Guide
  • Handy Style Guide
  • Brand Guidelines
    • Logo
    • Color System
    • Line Icons
    • Expressive Icons
    • Typography
  • Native
    • Action Cards
      • Booking Cards
      • Job Cards
      • List Cards
      • Message Cards
      • User Cards
    • Avatars
    • Banners
    • Callouts
    • Buttons
    • Half Sheets
    • Headers
    • Icon Lists
    • Input Fields
    • Marketing
    • Message Bubbles
    • Modal
    • Navigation
    • Pickers
    • Reviews
    • Skeleton Loading States
    • Tabs
    • Typography - Native
      • Native Text Combinations
  • Web
    • Navigation
    • Grid and Layout
    • Forms
    • Typography (Web)
    • Buttons
    • Pickers
    • Modals
    • Cards
Powered by GitBook
On this page
  • Grid by Screen Size
  • Standard Desktop Grid 1440px
  • Small Desktop Grid 1280px
  • Tablet and Mobile Grid (1024px and 375px)
  • Sketch Layout Settings
  • Desktop: 1440px Wide
  • Mobile: 375px Wide

Was this helpful?

  1. Web

Grid and Layout

The Handy website is laid out on a flexible grid. We design for desktop and mobile web.

PreviousNavigationNextForms

Last updated 5 years ago

Was this helpful?

Grid by Screen Size

Designs must flex for both desktop and mobile web, but initial designs should be created with the most-used screen size in mind.

Standard Desktop Grid 1440px

Small Desktop Grid 1280px

Tablet and Mobile Grid (1024px and 375px)

Sketch Layout Settings

Desktop: 1440px Wide

All desktop web designs should be created on a 1440px wide artboard. The below Layout Settings will render the correct grid on your artboard.

Mobile: 375px Wide

All mobile web designs should be created on a 375px wide artboard. The below Layout Settings will render the correct grid on your artboard.

This is our standard grid for desktop web designs.
This is the smallest screen size where original content and layout sizes can be maintained.
We break from the desktop grid to the mobile grid when the browser reaches 640px or less.