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

canopy-spacing-padding

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

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide provides best-practice guidance for applying Canopy padding via the lgPadding directive in Angular projects, ensuring consistent spacing across components.

Core Features & Use Cases

  • Clear usage references for the lgPadding inputs (lgPadding, lgPaddingTop, lgPaddingRight, lgPaddingBottom, lgPaddingLeft, lgPaddingHorizontal, lgPaddingVertical) and breakpoint-aware options like NoneAt to maintain responsive layouts.
  • Real-world scenarios showing all-sides, per-side, and breakpoint-based padding adjustments for Canopy components such as cards, panels, and grids.
  • Practical examples that help teams align with the Canopy spacing scale and avoid custom CSS padding.

Quick Start

Integrate Canopy spacing by applying the lgPadding directive to components in your Angular app.

Frequently Asked Questions about canopy-spacing-padding

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

FAQPage Schema
How do I apply consistent padding to Angular components using Canopy?▼

Apply consistent Canopy padding to Angular components by using the lgPadding directive, which ensures spacing aligns with the Canopy spacing scale defined in spacing.scss and avoids custom CSS.

Can I set responsive padding per side with the lgPadding directive?▼

Yes, the lgPadding directive supports responsive per-side padding through inputs like lgPaddingTop, lgPaddingBottom, lgPaddingLeft, and lgPaddingRight, alongside breakpoint-aware none-at behavior for layout adjustments.

Do I need to import LgPaddingDirective to use Canopy spacing in my project?▼

Yes, you need to import LgPaddingDirective into your Angular project to apply the Canopy spacing scale via the lgPadding directive and utilize its all-sides, per-side, and breakpoint-based padding inputs.

What is the best way to manage spacing in Angular applications using Canopy components?▼

The best way to manage spacing in Angular Canopy applications is applying the lgPadding directive to cards, panels, and grids, ensuring spacing scales consistently without custom CSS padding overrides.

Why does my Canopy component layout break when I use custom CSS padding instead of the spacing scale?▼

Custom CSS padding breaks Canopy component layouts because it bypasses the Canopy spacing scale defined in spacing.scss, whereas the lgPadding directive maintains consistent spacing tokens and responsive breakpoint behavior.

Related Skills

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

canopy-spacing-margin

Guide Angular developers to apply Canopy spacing with lgMargin directives.

Official
Basic
Legal-and-GeneralLegal-and-General
23

canopy-grid

Enforce Canopy grid directive order and responsive breakpoint usage in Angular components.

Official
Intermediate
Legal-and-GeneralLegal-and-General
23

canopy-layout-grid-and-spacing

Implement Canopy's responsive layout grid and spacing system in Angular projects.

Official
Intermediate
wilfriedagowilfriedago
2

tailwind-css-patterns

Apply Tailwind CSS utility classes for responsive layouts and component styling.

Community
Intermediate