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

canopy-orientation

Apply lgOrientation directive to Canopy components for responsive layouts.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Provide best-practice guidance for applying Canopy's lgOrientation directive to create responsive vertical and horizontal layouts, reducing layout complexity in Angular projects.

Core Features & Use Cases

  • Best-practice usage patterns for the lgOrientation directive in Canopy components.
  • Example scenarios for common containers (cards, grids) across multiple breakpoints.
  • Clear guidance to decide orientation strategies for responsive UIs.

Quick Start

Import LgOrientationDirective and apply a responsive orientation map to a container to arrange child elements.

Frequently Asked Questions about canopy-orientation

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

FAQPage Schema
How do I implement responsive orientation for Angular components to switch layouts across breakpoints?▼

You can implement responsive orientation by importing LgOrientationDirective and providing an OrientationResponsive mapping like { md: 'horizontal' } to switch container layouts vertically or horizontally across breakpoints. This simplifies responsive UI arrangement without complex CSS.

What is the best way to switch Canopy card and grid layouts between vertical and horizontal responsively?▼

The best way to switch Canopy card and grid layouts is applying the lgOrientation directive with a responsive mapping. Defining specific breakpoints like md, lg, or xl triggers the layout switch, effectively reducing structural complexity in Angular projects.

Do I need to import any specific modules to use lgOrientation for responsive layouts?▼

Yes, you must import LgOrientationDirective into your Angular project. This directive accepts an OrientationResponsive mapping object that dictates how your containers switch orientation at specified breakpoints like md, lg, and xl.

Can I apply responsive orientation to containers other than cards and grids in Canopy?▼

Yes, the lgOrientation directive can be applied to various containers beyond cards and grids. Supplying an OrientationResponsive mapping switches orientation at breakpoints like md, lg, and xl to simplify vertical and horizontal layouts across your application.

Why use a directive for responsive orientation instead of custom CSS media queries in Angular?▼

Using the lgOrientation directive provides best-practice patterns for Canopy components, reducing layout complexity compared to custom CSS media queries. It standardizes vertical and horizontal layout switching across breakpoints like md, lg, and xl.

Related Skills

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

canopy-grid

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

Official
Intermediate
djankiesdjankies

using-container-queries

Configure Tailwind v4 container queries with @container and breakpoint utilities.

Community
Advanced
launchapp-devlaunchapp-dev
38

layout-grid

Define responsive layout grids with columns, gutters, margins, and breakpoints.

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

canopy-spacing-margin

Guide Angular developers to apply Canopy spacing with lgMargin directives.

Official
Basic