1. Desktop-First Approach

Since Basis is primarily used on desktop, start with the Xlarge breakpoint and scale down from there. This ensures a good user experience for our primary use cases, and then provides support for edge-case mobile use cases.

2. Prioritize and Hide Content

Identify essential content that must always be visible and what can be hidden or accessed differently on smaller screens. Use techniques like progressive disclosure, accordions, or tabs to manage content effectively. ¹

3. Use Layout Classes

Employ our layout classes to adapt to different screen sizes while maintaining consistency. Use the various stacking method classes to change layout direction depending on available space of that breakpoint.²

4. Testing

Thoroughly test your responsive design on a variety of devices and screen sizes. Use browser developer tools and emulators to simulate different user experiences. ²