Available breakpoints prefixes : xs, sm, md, lg, xl.
Usage : class="nat[-breakpoint]-class[-size]"
Examples :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"
$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) { ... }
}
Padding on all sides / top and down / left and right :
Margin on all sides / top and bottom / left and right :
nat-center is magic. If used alone it centers both axis. If used with another axis, centers on the complementary axis.
Horizontal center :
nat-horizontal nat-centerVertical center :
nat-vertical nat-centerHorizontal top centered :
nat-horizontal nat-center nat-topHorizontal right centered :
nat-horizontal nat-center nat-rightVertical top centered :
nat-vertical nat-center nat-topVertical right centered :
nat-vertical nat-center nat-rightUsage : 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.
Alignments nat-top, nat-right, nat-bottom, nat-left can be combined.
Align bottom right :
nat-horizontal nat-bottom nat-rightMust be combined with nat-horizontal or nat-vertical.
Distribute uses space-around :
nat-distributeMust be combined with nat-horizontal or nat-vertical.
Example with horizontal :
nat-horizontal nat-alignExample with vertical :
nat-vertical nat-alignMust be combined with nat-horizontal or nat-vertical.
Sizes : 0, 5, 10, 15, 20, 30
Example where gap increases with screen size :
nat-horizontal nat-gap-0 nat-sm-gap-5 nat-md-gap-10 nat-lg-gap-15 nat-xl-gap-20Orientation 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.
nat-gap-vertical-30 nat-gap-horizontal-5 nat-md-gap-horizontal-30 nat-md-gap-vertical-5Gap takes priority on margin in same axis to prevent addition :
Wrap :
nat-horizontal nat-wrapWrap reverse:
nat-horizontal nat-wrap-reverseAlign bottom right :
nat-vertical nat-bottom nat-rightChange orientation, starting mobile first vertically, then horizontal since medium :
nat-vertical nat-md-horizontalApply on nat-horizontal or nat-vertical children.
Available sizes : 25, 33, 50, 66, 75.
Proportions change when greater than medium (included) :