Skip to content

Latest commit

 

History

History
67 lines (56 loc) · 3.71 KB

README.md

File metadata and controls

67 lines (56 loc) · 3.71 KB

Grid module for Angular

CSS grids helpers

Directive [grid]

Creates a CSS grid with the provided column count using CSS custom properties.

Defining cols:

  • [cols] defines the base column count (alias for [cols.xs]), defaults to 1.
  • [cols.xs] defines the column count beginning with the XS breakpoint.
  • [cols.sm] defines the column count beginning with the SM breakpoint.
  • [cols.md] defines the column count beginning with the MD breakpoint.
  • [cols.lg] defines the column count beginning with the LG breakpoint.
  • [cols.xl] defines the column count beginning with the XL breakpoint.

Defining rows:

  • [rows] defines the base column count (alias for [rows.xs]), defaults to 1.
  • [rows.xs] defines the column count beginning with the XS breakpoint.
  • [rows.sm] defines the column count beginning with the SM breakpoint.
  • [rows.md] defines the column count beginning with the MD breakpoint.
  • [rows.lg] defines the column count beginning with the LG breakpoint.
  • [rows.xl] defines the column count beginning with the XL breakpoint.

Defining gaps:

  • [gap] defines the base gap in px (alias for [gap.xs]), defaults to 10.
  • [gap.xs] defines the column count beginning with the XS breakpoint.
  • [gap.sm] defines the column count beginning with the SM breakpoint.
  • [gap.md] defines the column count beginning with the MD breakpoint.
  • [gap.lg] defines the column count beginning with the LG breakpoint.
  • [gap.xl] defines the column count beginning with the XL breakpoint.

Directive [gridItem]

Creates a CSS grid item with the provided column span using CSS custom properties.

Must be inside an element with the grid directive.

Defining col span:

  • [col.span] defines the base column span (alias for [col.span.xs]), defaults to 1.
  • [col.span.xs] defines the column span beginning with the XS breakpoint.
  • [col.span.sm] defines the column span beginning with the SM breakpoint.
  • [col.span.md] defines the column span beginning with the MD breakpoint.
  • [col.span.lg] defines the column span beginning with the LG breakpoint.
  • [col.span.xl] defines the column span beginning with the XL breakpoint.

Defining row span:

  • [row.span] defines the base rowumn span (alias for [row.span.xs]), defaults to 1.
  • [row.span.xs] defines the rowumn span beginning with the XS breakpoint.
  • [row.span.sm] defines the rowumn span beginning with the SM breakpoint.
  • [row.span.md] defines the rowumn span beginning with the MD breakpoint.
  • [row.span.lg] defines the rowumn span beginning with the LG breakpoint.
  • [row.span.xl] defines the rowumn span beginning with the XL breakpoint.

Defining col start:

  • [col.start] defines the base start column (alias for [col.start.xs]), defaults to 1.
  • [col.start.xs] defines the start column beginning with the XS breakpoint.
  • [col.start.sm] defines the start column beginning with the SM breakpoint.
  • [col.start.md] defines the start column beginning with the MD breakpoint.
  • [col.start.lg] defines the start column beginning with the LG breakpoint.
  • [col.start.xl] defines the start column beginning with the XL breakpoint.

Defining row start:

  • [row.start] defines the base start rowumn (alias for [row.start.xs]), defaults to 1.
  • [row.start.xs] defines the start rowumn beginning with the XS breakpoint.
  • [row.start.sm] defines the start rowumn beginning with the SM breakpoint.
  • [row.start.md] defines the start rowumn beginning with the MD breakpoint.
  • [row.start.lg] defines the start rowumn beginning with the LG breakpoint.
  • [row.start.xl] defines the start rowumn beginning with the XL breakpoint.