Layout

Layout

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.

Commands

grid

Generate a CSS Grid layout with configurable columns, rows, gap, named areas, and custom templates.

Options:

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

flex

Generate a Flexbox layout with direction, wrapping, alignment, and per-item grow factor.

Options:

bash scripts/script.sh flex --direction row --wrap --justify space-between --items 5 --output flex.css

responsive

Generate mobile-first (min-width) and desktop-first (max-width) media query breakpoints.

Options:

bash scripts/script.sh responsive --breakpoints "sm:640,md:768,lg:1024,xl:1280" --output breakpoints.css

scaffold

Generate a complete HTML page skeleton with semantic sections. Supports four layout types:

• basic — header, nav, main, footer
• holy-grail — header, left sidebar, main, right sidebar, footer
• dashboard — header with logo/nav/user, sidebar navigation, card grid, data table
• landing — header with nav links, hero section with CTA, features grid, pricing cards, footer

Options:

bash scripts/script.sh scaffold --type dashboard --title "Admin Panel" --css styles.css --output dashboard.html

spacing

Generate a spacing scale system with CSS custom properties and margin/padding utility classes.

Options:

bash scripts/script.sh spacing --base 8 --steps 10 --unit px --output spacing.css

analyze

Analyze an existing CSS file and report layout property usage including display types, media queries, grid/flex properties, nesting depth, and file stats.

Options:

bash scripts/script.sh analyze --input styles.css

Output

• grid — CSS file with .grid-container and numbered __item-N rules
• flex — CSS file with .flex-container and numbered __item-N rules
• responsive — CSS file with min-width and max-width media query blocks
• scaffold — Complete HTML5 document with semantic sections and optional CSS link
• spacing — CSS file with :root custom properties plus .m-*, .mt-*, .p-*, .px-* (etc.) utility classes
• analyze — Stdout report: rule block count, display type breakdown, media queries, grid/flex properties, nesting depth, file stats

Data Storage

No persistent data. All output goes to stdout or to the file specified by --output. No data directory is created.

Requirements

• Bash 4+
• Standard Unix utilities: grep, wc, du, head, sort
• No API keys, no external dependencies

When to Use

1. Bootstrapping a new web project — generate grid and flex CSS foundations in seconds instead of writing boilerplate by hand
2. Creating responsive breakpoints — produce a consistent set of mobile-first and desktop-first media queries from named breakpoints
3. Scaffolding HTML pages — generate semantic page skeletons for dashboards, landing pages, holy-grail layouts, or basic sites
4. Building a spacing system — create a uniform spacing scale with margin/padding utility classes like Tailwind but custom-fit
5. Auditing existing CSS — analyze a stylesheet to understand its layout property usage, media queries, and nesting complexity

Examples

# 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

Tips

• Use --output to write directly to a file; omit it to pipe or preview on stdout
• Combine grid + responsive + spacing to scaffold a complete design system
• The scaffold command produces clean HTML5 — pair it with your generated CSS files
• Run analyze on legacy CSS before refactoring to understand what you're working with

Powered by BytesAgain | bytesagain.com | hello@bytesagain.com