Enlite Prime
Buy Now
Welcome to Enlite Prime
Here is some guide to use this template. Click next to continue and back to previous or click on outside to skip it.
grid_on
Grid Spacing
The responsive grid focuses on consistent spacing widths, rather than column width. Material design margins and columns follow an 8dp square baseline grid. Spacing can be 8, 16, 24, or 40dp wide.
descriptionsrc/app/containers/Layouts/demos/GridLayout.js
grid_on
Full-Width
Full-width grids: use fluid columns and breakpoints to determine when a layout needs to change.
xs=12
xs=12 sm=6
xs=12 sm=6
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
xs=6 sm=3
descriptionsrc/app/containers/Layouts/demos/FullWidth.js
grid_on
Centered Grid
Centered grids: use fixed columns and re-flow the layout when all columns (plus a defined margin) no longer fit on the screen.
xs=12
xs=6
xs=6
xs=3
xs=3
xs=3
xs=3
descriptionsrc/app/containers/Layouts/demos/Centered.js
grid_on
Interactive
Below is an interactive demo that lets you explore the visual results of the different settings:
Cell 1
Cell 2
Cell 3
descriptionsrc/app/containers/Layouts/demos/Interactive.js