skills.rest
HiokKuek
HiokKuekCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

sgds-layouts

Provides page layout patterns for SGDS applications using web components and utility classes.

Updated Sep 5, 2026
Search Tags:#layout#design system#dashboard#web components#sidebar#grid#sgds
One-click install
npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-layouts-hiokkuek
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sgds-layouts
Source: https://github.com/HiokKuek/hdb_pricing/tree/main/.agents/skills/sgds-layouts
Command: npx skills add https://github.com/HiokKuek/hdb_pricing --skill sgds-layouts-hiokkuek

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @govtechsg/sgds-web-component, and includes references (resource) components.

What problem does it solve? Choosing and implementing a correct page structure in the Singapore Government Design System (SGDS) requires knowing which container, grid classes, and shell components to combine. This Skill catalogs production-ready layout patterns so you can pick the right structure without trial and error. ## Core Features & Use Cases - Full Width Layouts: Six variants for public-facing pages using .sgds-container, including Default, Aside Left/Right/Both, Split, and Breadcrumb patterns. - With Sidebar Layouts: Five variants for dashboards and internal tools using .sgds-container-sidebar with viewport containment, including Overlay and Split patterns. - Decision Guide: A quick-reference table maps your use case (two-column, breadcrumb, dashboard) directly to the correct layout and reference file. - Use Case: You are building an admin dashboard with persistent side navigation and a right aside panel. The Skill directs you to the With Sidebar Aside Right pattern, including the exact grid classes and the raw GitHub story file with working HTML. ## Quick Start Ask the AI to generate an SGDS dashboard page with a sidebar and a two-column content area using the sgds-layouts patterns.

Frequently Asked Questions about sgds-layouts

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

FAQPage Schema
How do I create a two-column layout in SGDS?▼

Use the Aside Left or Aside Right layout pattern, which applies `.sgds-grid` with a 4/8 column split via classes like `sgds-col-4 sgds-col-sm-8 sgds-col-lg-4`. For equal panels, use the Split layout with `sgds:flex` and two `sgds:flex-1` children.

What is the difference between sgds-container and sgds-container-sidebar?▼

`.sgds-container` is a centred, responsive max-width container for public-facing Full Width pages. `.sgds-container-sidebar` is narrower to account for the sidebar column and is used in dashboard layouts alongside the `<sgds-sidebar>` component.

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

Use a With Sidebar layout: wrap the page in `sgds:h-screen sgds:flex sgds:flex-col sgds:overflow-hidden`, add `fluid` to masthead and mainnav, include `<sgds-sidebar>`, and set the footer to `tone="neutral" layout="sidebar"`. The main content scrolls independently via `sgds:overflow-y-auto`.

Can I get working HTML code for SGDS layout patterns?▼

Yes. Each layout has a story file in the sgds-web-component GitHub repository under `stories/layouts/`. Fetch the raw file with curl, extract the HTML from the Lit template literal, remove `${variable}` interpolations and `<style>` blocks, and keep all SGDS components and utility classes.

When should I use Full Width versus With Sidebar layouts?▼

Use Full Width for public-facing pages and general-purpose sites without persistent side navigation. Use With Sidebar for dashboards, admin portals, and internal tools that need persistent navigation; never mix the two patterns on one page.

Related Skills

Explore More Software Engineering Skills→
GovTechSGGovTechSG
18

sgds-getting-started

Bootstrap SGDS projects with fonts, foundation CSS, utilities, components, and app layouts.

Official
Intermediate
GovTechSGGovTechSG
18

sgds-blocks

Compose SGDS page layouts using reusable UI blocks with sgds-templates.

Official
Intermediate
moughamirmoughamir

tailwindcss-advanced-layouts

Generate Tailwind CSS grid and flexbox layouts with responsive breakpoints.

Community
Advanced
ancolemanancoleman
503

designing-layouts

Design responsive layouts with CSS Grid, Flexbox, and breakpoints.

Community
Advanced