Adaptive Design Solutions
Learn common responsive design patterns and best practices using the Atomix Layout system. Create flexible, accessible layouts that work beautifully across all devices and screen sizes.
Start with mobile and enhance for larger screens
Layer features based on device capabilities
Use relative units and flexible layouts
Images and media that adapt to containers
Maintain visual hierarchy across breakpoints
Perfect for blogs, documentation, and admin dashboards
Ideal for dashboards, galleries, and product listings
Pinterest-style layouts for varying content heights
Large hero sections with responsive content below
Perfect for blogs, documentation, and admin dashboards. The sidebar is hidden on mobile and visible on desktop.
1import { Container, Row, GridCol } from '@shohojdhara/atomix';
2
3function SidebarLayout({ children, sidebar }) {
4 return (
5 <Container>
6 <Row>
7 {/* Sidebar - Hidden on mobile, visible on desktop */}
8 <GridCol xs={12} lg={3} className="d-none d-lg-block">
9 <aside className="sidebar">
10 {sidebar}
11 </aside>
12 </GridCol>
13
14 {/* Main content */}
15 <GridCol xs={12} lg={9}>
16 <main className="main-content">
17 {children}
18 </main>
19 </GridCol>
20 </Row>
21 </Container>
22 );
23}Ideal for dashboards, galleries, and product listings. Cards automatically adjust based on screen size.
1import { Container, Row, GridCol, Card } from '@shohojdhara/atomix';
2
3function CardGridLayout({ cards }) {
4 return (
5 <Container>
6 <Row>
7 {cards.map((card, index) => (
8 <GridCol xs={12} sm={6} md={4} key={index}>
9 <Card>
10 {card.content}
11 </Card>
12 </GridCol>
13 ))}
14 </Row>
15 </Container>
16 );
17}Atomix uses a mobile-first approach with 6 breakpoints:
1<GridCol xs={12} sm={6} md={4} lg={3}>
2 Responsive column
3</GridCol>Ensure images and media adapt to their containers:
1<img
2 src="image.jpg"
3 alt="Description"
4 className="u-w-100 u-h-auto"
5 loading="lazy"
6/>1<div className="u-ratio u-ratio-16x9">
2 <iframe
3 src="video.mp4"
4 className="u-ratio-item"
5 title="Video"
6 />
7</div>Use responsive font sizes:
1.u-font-size-responsive {
2 font-size: clamp(1rem, 2.5vw, 1.5rem);
3}Design for mobile devices first, then enhance for larger screens. This ensures a solid foundation.
Prefer rem, em, and percentages over fixed pixel values for better scalability.
Test your layouts at all breakpoints to ensure consistent behavior across devices.
Use appropriate image formats, lazy loading, and proper sizing for performance.