Responsiveness

Built to be responsive with a fluid design approach.

On this page

Luxa CSS employs a fluid design approach to ensure visual consistency across devices.

Key features

  • Fluid design: fonts, spacing, and container breakpoints adapt proportionally to screen size;
  • Horizontal-first: elements default to horizontal layouts, optimized for wider screens;
  • Flexible layouts: vertical layouts can be achieved using modifier classes.

Design philosophy

Luxa prioritizes horizontal reading patterns, differing from mobile-first frameworks. This approach suits projects that primarily target larger screens while maintaining adaptability for smaller devices.

Customization

  • Columns: default to horizontal stacking;
  • Vertical layouts: use modifier classes to enforce vertical arrangements when needed.
Breakpoints

For detailed information on fixed breakpoints, refer to the Grid documentation.

Best practices
  1. Start with horizontal layouts for main components;
  2. Use modifier classes to adjust layouts for smaller screens;
  3. Test your design across various device sizes to ensure proper responsiveness.

Understanding Luxa’s responsiveness approach will help you create layouts that are both visually consistent and adaptable across different screen sizes.

Getting Help

Need help? Open an issue. I'll be happy to help. 🎈