skills.rest
Legal-and-General
Legal-and-GeneralOFFICIAL
Explore all skills by this author →
Website𝕏@landg_groupGitHub

canopy-spacing-margin

Guide Angular developers to apply Canopy spacing with lgMargin directives.

23|46|Updated Sep 7, 2020
Search Tags:#angular#best-practices#ui-design#spacing#margin#directive#canopy
One-click install
npx skills add https://github.com/Legal-and-General/canopy --skill canopy-spacing-margin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: canopy-spacing-margin
Source: https://github.com/Legal-and-General/canopy/tree/main/skills/best-practice/spacing-margin
Command: npx skills add https://github.com/Legal-and-General/canopy --skill canopy-spacing-margin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Align Canopy teams around a single spacing model by guiding developers to apply the Canopy spacing scale using the lgMargin directive instead of ad-hoc CSS margins.

Core Features & Use Cases

  • Provides guidance on using the lgMargin directive to maintain uniform margins across Canopy components.
  • Documents common margin patterns (top, bottom, horizontal, vertical) and responsive variants.
  • Use Case: when updating UI layouts to align with Canopy design system, apply the margin directive rather than writing custom CSS.

Quick Start

Apply Canopy spacing by using lgMargin directives to set the desired margins according to the spacing scale.

Frequently Asked Questions about canopy-spacing-margin

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

FAQPage Schema
How do I apply consistent spacing margins in Angular using Canopy?▼

To apply consistent spacing margins in Angular, use the lgMargin directive to set values according to the Canopy spacing scale. This ensures uniform margins across components without writing custom CSS.

What is the Canopy spacing scale and why use it instead of custom CSS margins?▼

The Canopy spacing scale is a standardized model for uniform margins across components. Using it via the lgMargin directive prevents ad-hoc CSS margins, aligning teams around a single, consistent spacing system.

Does the lgMargin directive support responsive breakpoints for UI layouts?▼

Yes, the lgMargin directive supports responsive variants and documented breakpoints. This allows you to adapt top, bottom, horizontal, and vertical margins across different screen sizes within your Angular project.

What's the best way to set top, bottom, and horizontal margins with Canopy?▼

The best way to set top, bottom, or horizontal margins is by applying the lgMargin directive with inputs mapped to the Canopy spacing scale. This enforces design system standards and discourages custom CSS overrides.

When should I not use custom CSS margins in a Canopy Angular project?▼

You should not use custom CSS margins when updating UI layouts in a Canopy Angular project. Instead, apply the lgMargin directive to maintain uniform spacing and align with the design system.

Related Skills

Explore More Software Engineering Skills→
Legal-and-GeneralLegal-and-General
23

canopy-spacing-padding

Apply Canopy lgPadding directive for breakpoint-aware spacing in Angular projects.

Official
Intermediate
krzemienskikrzemienski
2

responsive-validation

Validate responsive UI layouts across device viewports and breakpoints.

Community
Advanced
tanujsutariatanujsutaria
1

design-system-auditor

Audit SwiftUI views for hardcoded colors, spacing, and typography.

Community
Basic
Legal-and-GeneralLegal-and-General
23

canopy-spacing-row-gap

Apply the Canopy lgRowGap directive to standardize row-gap spacing in Angular grid and flex layouts.

Official
Basic