sgds-layouts

Catalog SGDS page layout patterns with frontmatter metadata and usage guidance.

18|10|Updated Aug 30, 2022

Search Tags:#layout #patterns #dashboard #responsive #two-column #sgds

Ready to run

npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-layouts

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: sgds-layouts
Source: https://github.com/GovTechSG/sgds-web-component/tree/main/skills/sgds-layouts
Command: npx skills add https://github.com/GovTechSG/sgds-web-component --skill sgds-layouts

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

SGDS layout patterns catalog helps teams rapidly design consistent, responsive page structures by reusing proven layouts instead of reinventing approaches for every project.

Core Features & Use Cases

Covers two layout families: Full Width for public-facing pages using sgds-container and With Sidebar for dashboards using sgds-container-sidebar.
Includes common variants such as Default, Aside Left, Aside Right, Aside Both, Split, Breadcrumb, and Overlay, with guidance on when to apply each.
Provides references to implementation examples and raw content links to accelerate development and onboarding.

Quick Start

Use sgds-layouts to explore a layout pattern and adapt it to your content and navigation needs.

Frequently Asked Questions about sgds-layouts

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

What SGDS layout patterns are available for responsive page structures?▼

SGDS layout patterns include Full Width for public-facing pages using sgds-container and With Sidebar for dashboards using sgds-container-sidebar. Variants cover Default, Aside Left, Aside Right, Aside Both, Split, Breadcrumb, and Overlay layouts.

How do I build a dashboard layout with a sidebar using SGDS?▼

To build a dashboard layout, apply the With Sidebar family which utilizes the sgds-container-sidebar structure. Select variants like Aside Left, Aside Right, or Aside Both depending on where navigation elements must be placed.

When should I use a full width layout versus a sidebar layout in SGDS?▼

Use a full width layout for public-facing pages where content spans the sgds-container, and reserve sidebar layouts for dashboards requiring fixed navigation placement alongside main content via sgds-container-sidebar.

Can I adapt SGDS layout patterns for custom navigation and content needs?▼

Yes, you can explore a specific SGDS layout pattern and adapt its structure to fit custom content and navigation requirements. The catalog provides usage guidance and references to implementation examples to accelerate customization.

Do I need any dependencies to use sgds-layouts for UI composition?▼

No dependencies are required to use sgds-layouts for UI composition. It operates as a standalone catalog that defines page composition patterns through frontmatter metadata and descriptive usage guidance.