shield_lock
金大哥
← 返回 Skill 列表
extension
分类: 效率与办公无需 API Key

Layout

Layout - 日常命令行工具

person作者: bytesagainhubclawhub
open_in_new仓库download下载资源包

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:

| 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 | (auto) | 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

flex

Generate 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

responsive

Generate 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

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:

| 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

spacing

Generate 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

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:

| Flag | Required | Description | |------|----------|-------------| | --input | Yes | Path to CSS file to analyze |

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