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 specific screen size, ensuring a seamless and user-friendly experience across desktops, tablets, and mobile devices. We have selected the following five breakpoints based on the most common screen resolutions. It's recommended to use these established breakpoints to maintain consistency across applications. However, if your project requires different breakpoints, feel free to adjust them as necessary, ensuring that all modifications comply with the Web Content Accessibility Guidelines (WCAG).

Size	Breakpoint Threshold	Breakpoint Range
Small (sm)	640px	0px to 640px
Medium (md)	768px	641px to 768px
Large (lg)	1024px	769px to 1024px
Extra Large (xl)	1280px	1025px to 1280px
2 Extra Large (2xl)	1536px	1281px to 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.