@ecodev/natural-layout

View on GitHub

• Start
• SCSS media query usage
• Unresponsive classes
  • Padding
  • Margin
  • Alignments
  • Center
• Responsive classes
  • Show/Hide
  • Gap
  • Horizontal
  • Vertical
  • Expand

Getting started

Available breakpoints prefixes : xs, sm, md, lg, xl.

Usage : class="nat[-breakpoint]-class[-size]"

Greater than medium (included) change layout to horizontal

class="nat-vertical nat-md-horizontal" 

Greater than medium (included) increase gap

class="nat-gap nat-md-gap-30" 

SCSS usage : media query

$breakpoints: (
    sm: 600px,
    md: 960px,
    lg: 1280px,
    xl: 1920px,
)

@use '@ecodev/natural-layout' as nat;

#id {
    // greater than SM
    @include nat.media(sm) { ... }

    // lesser than MD (excluded)
    @include nat.media(null, md) { ... }

    // from SM (included) to LG (exluded)
    @include nat.media(sm, lg) { ... }

    // from 1000px to 2000px, accepts null values too
    @include nat.media(1000px, 2000px) { ... }
}

Unresponsive html markup

nat-padding

Padding on all sides / top and down / left and right :

nat-margin

Margin on all sides / top and bottom / left and right :

Alignments

Alignments nat-bottom, nat-top, nat-left, nat-right can be combined.

Align bottom right

Distribute uses space-around

nat-center

nat-center is magic. If used alone it centers both axis. If used with another axis, centers on the complementary axis.

Horizontal center

Vertical center

Horizontal top centered

Horizontal right centered

Vertical top centered

Vertical right centered

Responsive HTML markup

nat-hide

Usage : nat-hide / nat-sm-hide / nat-show / nat-sm-show

Breakpoints are only the start of size. To focus a single size, combine multiple classes

Show badges that match the current breakpoint range

Hide badges that don't match the current breakpoint range

Show badges fitting in the current breakpoint range (show smaller ones).

Hide badges that don't fit in the current breakpoint range.

nat-gap

Must be combined with nat-horizontal or nat-vertical.

Sizes : 0, 5, 10, 15, 20, 30

Example where gap increases with screen size :

Orientation specific and responsive gap :

Different responsive gap in specific orientation (small screen = bigger vertical gap, big screen = bigger horizontal gap). Usefull for form fields layouts.

Gap takes priority on margin in same axis to prevent addition.

nat-horizontal

Wrap

nat-vertical

Align bottom right

Change orientation, starting mobile first vertically, then horizontal since medium :

nat-expand

Apply on nat-horizontal or nat-vertical children.

Available sizes : 25, 33, 50, 66, 75.

Proportions change when greater than medium (included) :