Layout System
This guide explains the layout system in KimiStores and how to effectively structure your pages.
Layout Structure
KimiStores provides a flexible layout system built around MUI's components like Container, Grid, and Box. The layout system is organized in the following directories:
Layout Files
Core layout components are located in:
src/layouts/Contains main, dashboard, and compact layouts
Layout Components
Key components for layout composition:
• Container - Controls max-width and centers content
• Grid2 - Creates responsive grid layouts
• Stack - Arranges items in a vertical or horizontal stack
• Box - General-purpose container for layout
Layout Types
KimiStores provides several layout variants:
• Main - Standard layout with header and footer
• Dashboard - Admin layout with sidebar navigation
• Compact - Minimal layout for focused pages
• Auth - Special layout for authentication pages
Grid System
KimiStores uses MUI's Grid2 system, a revamped version of the Grid component that provides a responsive 12-column layout system.
Responsive Grid Usage
With Grid2, use the size prop with a responsive object to define how many columns a grid item should span at different breakpoints.
Available breakpoints:
• xs - Extra small devices (phones, 0px and up)
• sm - Small devices (tablets, 600px and up)
• md - Medium devices (small laptops, 900px and up)
• lg - Large devices (desktops, 1200px and up)
• xl - Extra large devices (large desktops, 1536px and up)
import { Grid2 } from '@mui/material';
function ResponsiveLayout() {
return (
<Grid2 container spacing={3}>
{/* This item is full width on mobile, half width on tablets,
and one-third width on desktop */}
<Grid2 size={{ xs: 12, sm: 6, md: 4 }}>
Item 1
</Grid2>
{/* This item is full width on mobile, half width on tablets,
and two-thirds width on desktop */}
<Grid2 size={{ xs: 12, sm: 6, md: 8 }}>
Item 2
</Grid2>
</Grid2>
);
}
Common Layout Patterns
Centered Content
<Container maxWidth="md">
<Box sx={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
my: 4
}}>
<Typography variant="h4">
Centered Content
</Typography>
<Typography variant="body1" sx={{ maxWidth: 600, textAlign: 'center' }}>
This content is centered in the container
</Typography>
</Box>
</Container>
Centered Content
This content is centered in the container
Sidebar Layout
<Box sx={{ display: 'flex' }}>
{/* Sidebar */}
<Box sx={{
width: { xs: '100%', sm: 240 },
flexShrink: 0,
bgcolor: 'grey.100',
p: 2,
display: { xs: 'none', sm: 'block' }
}}>
Sidebar Content
</Box>
{/* Main Content */}
<Box sx={{ flexGrow: 1, p: 2 }}>
Main Content Area
</Box>
</Box>
Best Practices
1. Mobile First: Always design for mobile screens first, then adapt for larger screens.
2. Consistent Spacing: Use theme spacing values instead of arbitrary pixel values.
3. Box Model: Use Box component instead of plain divs for layout containers.
4. Responsive Design: Always use responsive props for Grid2 items (xs, sm, md, lg, xl).
5. Container Usage: Use Container to maintain consistent max-width.
6. Avoid Fixed Heights: Let content determine height whenever possible.