Generate CSS layouts. Use when building grid or flexbox layouts, creating responsive breakpoints, or scaffolding HTML pages.
Generate CSS Grid layouts, Flexbox containers, responsive breakpoint media queries, page scaffold HTML, and spacing utility classes — all from a single shell script. Analyze existing CSS files for layout property usage.
gridGenerate a CSS Grid layout with configurable columns, rows, gap, named areas, and custom templates.
Options:
| Flag | Default | Description |
|---|---|---|
--columns | 3 | Number of grid columns |
--rows | 1 | Number of grid rows |
--gap | 1rem | Gap between grid items |
--col-template | repeat(N, 1fr) | Custom grid-template-columns value |
--row-template |
Custom grid-template-rows value |
--areas | (none) | Named grid areas (pipe-separated rows) |
--class | grid-container | CSS class name |
--output | (stdout) | Write CSS to file |
bash scripts/script.sh grid --columns 4 --rows 2 --gap "2rem" --output grid.css
bash scripts/script.sh grid --areas "header header header|sidebar main main|footer footer footer" --output layout.css
flexGenerate a Flexbox layout with direction, wrapping, alignment, and per-item grow factor.
Options:
| Flag | Default | Description |
|---|---|---|
--direction | row | Flex direction (row, column, etc.) |
--wrap | (flag) | Enable flex-wrap: wrap |
--nowrap | (flag) | Force flex-wrap: nowrap |
--justify | flex-start | justify-content value |
--align | stretch | align-items value |
--items | 3 | Number of flex children to generate |
--grow | 0 | flex-grow value for children |
--class | flex-container | CSS class name |
--output | (stdout) | Write CSS to file |
bash scripts/script.sh flex --direction row --wrap --justify space-between --items 5 --output flex.css
responsiveGenerate mobile-first (min-width) and desktop-first (max-width) media query breakpoints.
Options:
| Flag | Required | Description |
|---|---|---|
--breakpoints | Yes | Comma-separated name:px pairs |
--prefix | No (default screen-) | Class name prefix |
--output | No | Write CSS to file |
bash scripts/script.sh responsive --breakpoints "sm:640,md:768,lg:1024,xl:1280" --output breakpoints.css
scaffoldGenerate a complete HTML page skeleton with semantic sections. Supports four layout types:
Options:
| Flag | Default | Description |
|---|---|---|
--type | basic | Layout type (basic, holy-grail, dashboard, landing) |
--title | Page | HTML <title> value |
--css | (none) | Path to CSS file to link |
--output | (stdout) | Write HTML to file |
bash scripts/script.sh scaffold --type dashboard --title "Admin Panel" --css styles.css --output dashboard.html
spacingGenerate a spacing scale system with CSS custom properties and margin/padding utility classes.
Options:
| Flag | Default | Description |
|---|---|---|
--base | 4 | Base spacing unit |
--steps | 8 | Number of scale steps |
--unit | px | CSS unit (px, rem, etc.) |
--prefix | sp | CSS variable prefix |
--output | (stdout) | Write CSS to file |
bash scripts/script.sh spacing --base 8 --steps 10 --unit px --output spacing.css
analyzeAnalyze an existing CSS file and report layout property usage including display types, media queries, grid/flex properties, nesting depth, and file stats.
Options:
| Flag | Required | Description |
|---|---|---|
--input | Yes | Path to CSS file to analyze |
bash scripts/script.sh analyze --input styles.css
.grid-container and numbered __item-N rules.flex-container and numbered __item-N rulesmin-width and max-width media query blocks:root custom properties plus .m-*, .mt-*, .p-*, .px-* (etc.) utility classesNo persistent data. All output goes to stdout or to the file specified by --output. No data directory is created.
grep, wc, du, head, sort# Generate a 12-column grid with named areas
bash scripts/script.sh grid --columns 12 --gap "1.5rem" \
--areas "header header header header header header header header header header header header|sidebar sidebar main main main main main main main main main main|footer footer footer footer footer footer footer footer footer footer footer footer" \
--output grid.css
# Create a centered flex navbar
bash scripts/script.sh flex --direction row --justify center --align center --items 6 --class navbar --output navbar.css
# Generate responsive breakpoints with custom prefix
bash scripts/script.sh responsive --breakpoints "xs:480,sm:640,md:768,lg:1024,xl:1280,xxl:1536" --prefix "bp-" --output breakpoints.css
# Scaffold a landing page with linked CSS
bash scripts/script.sh scaffold --type landing --title "Product Launch" --css main.css --output index.html
# Analyze an existing stylesheet
bash scripts/script.sh analyze --input existing-styles.css
--output to write directly to a file; omit it to pipe or preview on stdoutgrid + responsive + spacing to scaffold a complete design systemscaffold command produces clean HTML5 — pair it with your generated CSS filesanalyze on legacy CSS before refactoring to understand what you're working withPowered by BytesAgain | bytesagain.com | [email protected]