LogoLogo
  • Release Notes
  • Downloads
  • Developers
    • Introduction
    • Color Variables
    • Font Family
    • Vanilla JS
    • React
    • Vue
    • Angular
    • RTL Support
    • Light Mode/Dark Mode
  • Foundations
    • Typography
    • Colors
    • Icons & Visuals
    • Images
    • Layout & Breakpoints
    • Utils
  • Components
    • Accordion
    • Alert
    • Attach File
    • Avatar
    • Breadcrumbs
    • Buttons
      • Button
      • Icon Button
      • Link Button
      • Social Media Buttons
    • Checkbox Input
    • Chips
    • Credit Card
    • Credit Card Input Field
    • Header
    • Interactive Banner
    • Number Input Field
    • Pagination
    • Phone Input Field
    • Progress Indicators
      • Expectation Levels
      • Progress Bar
      • Progress Circle
      • Progress Semi-Circle
    • Quick Select Field
    • Radio Input
    • Search Input Field
    • Segmented Controls
    • Select Input Field
    • Slider
    • Steps
    • Sticky Bar
    • Tabs
    • Text Area
    • Text Input Field
    • Toggle Switch
    • Tooltip
Powered by GitBook
On this page
  • Breakpoints for Design
  • Inner Container Widths
  • Gutters and Margins
  • Spacing and Padding
  • Layout Patterns
  • Content Layouts
  • Images
  • Testing and Accessibility
Export as PDF
  1. Foundations

Layout & Breakpoints

Breakpoints for Design

Breakpoints are predefined screen widths that dictate how a responsive layout adapts to different devices. At each breakpoint, CSS rules change to optimize the design for that screen size, ensuring a seamless and user-friendly experience across desktops, tablets, and mobile devices. We have selected the following 5 breakpoints based on the most common screen resolutions:

Size
Breakpoint Threshold

Small (sm)

640px

Medium (md)

768px

Large (lg)

1024px

Extra Large (xl)

1280px

2 Extra Large (2xl)

1536px

Inner Container Widths

Define container widths based on each breakpoint to keep content visually balanced:

Small (sm): 100% width with minimum 8px padding.

Medium (md): Max width 720px.

Large (lg): Max width 960px.

Extra Large (xl): Max width 1140px.

2XL (2xl): Max width 1280px.

Gutters and Margins

Gutter Width: 16px between columns, ensuring consistent spacing.

Outer Margins: 112px on both left and right edges for a contained look on desktop screens.

Alignment and Balance: Ensure content aligns with columns, maintaining balance and structure. Adjust columns if needed to keep gutters and margins consistent.

Spacing and Padding

Spacing is a crucial tool for enhancing clarity and usability in design. GWU follows a structured approach:

  • Up to the base font size (1rem), spacing increases in 2px increments.

  • Beyond 1rem, spacing increments increase by 4px up to a maximum of 48px.

Layout Patterns

Header & Footer: Keep headers and footers consistent across breakpoints, with a compact version for smaller screens.

Sidebar Navigation: Display sidebars with fixed positioning on larger screens if needed.

Content Layouts

One-Column Layout: For narrow screens, focusing on vertical scrolling.

Two-Column Layout: Adds a secondary column at the medium breakpoint.

Three-Column Layout: Available at larger breakpoints, ideal for data-heavy pages or dashboards.

Images

Adaptive Images: Serve different image sizes based on breakpoints for optimized loading times and quality.

Techniques: Use srcset or CSS to ensure images adapt effectively to varying screen resolutions.

Testing and Accessibility

Testing on Devices: Test layouts on multiple devices to confirm that breakpoints provide a consistent experience.

Accessibility Considerations: Ensure layouts are keyboard navigable and compatible with screen readers. Confirm that text and interactive elements resize appropriately for users who adjust browser zoom settings.

PreviousImagesNextUtils

Last updated 3 months ago