unflexible-ui v0.2.9

Unflexible UI

Don't be flexible.

Usage

Installation

npm install unflexible-ui

Optional settings

Wrap

:root {
  --wrap-width-xl: 1240px;
  --wrap-width-l: 1030px;
  --wrap-width-m: 760px;
  --wrap-width-s: 470px;
  --wrap-width-xs: 94%;
}

Stacked

:root {
  --stacked-padding-wide: 180px;
  --stacked-padding-normal: 120px;
  --stacked-padding-narrow: 60px;
  --stacked-padding-thin: 30px;
  --stacked-padding-gapless: 0px;

  --stacked-padding-rate-xl: 1;
  --stacked-padding-rate-l: 1;
  --stacked-padding-rate-m: 0.5;
  --stacked-padding-rate-s: 0.5;
  --stacked-padding-rate-xs: 0.5;

  --stacked-gap-wide: 3rem;
  --stacked-gap-normal: 1.5rem;
  --stacked-gapless: 0rem;

  --stacked-gap-rate-xl: 1;
  --stacked-gap-rate-l: 1;
  --stacked-gap-rate-m: 1;
  --stacked-gap-rate-s: 1;
  --stacked-gap-rate-xs: 1;
}

PlainText

:root {
  --plain-base-size-xl: 1rem;
  --plain-h1-size-xl: 2.25rem;
  --plain-h2-size-xl: 2rem;
  --plain-h3-size-xl: 1.5rem;
  --plain-h4-size-xl: 1.25rem;
  --plain-h5-size-xl: 1rem;
  --plain-base-size-l: 1rem;
  --plain-h1-size-l: 2.25rem;
  --plain-h2-size-l: 2rem;
  --plain-h3-size-l: 1.5rem;
  --plain-h4-size-l: 1.25rem;
  --plain-h5-size-l: 1rem;
  --plain-base-size-m: 1rem;
  --plain-h1-size-m: 2.25rem;
  --plain-h2-size-m: 2rem;
  --plain-h3-size-m: 1.5rem;
  --plain-h4-size-m: 1.25rem;
  --plain-h5-size-m: 1rem;
  --plain-base-size-s: 1rem;
  --plain-h1-size-s: 1.75rem;
  --plain-h2-size-s: 1.5rem;
  --plain-h3-size-s: 1.25rem;
  --plain-h4-size-s: 1.1rem;
  --plain-h5-size-s: 1rem;
  --plain-base-size-xs: 1rem;
  --plain-h1-size-xs: 1.75rem;
  --plain-h2-size-xs: 1.5rem;
  --plain-h3-size-xs: 1.25rem;
  --plain-h4-size-xs: 1.1rem;
  --plain-h5-size-xs: 1rem;
  --plain-base-weight: 400;
  --plain-h1-weight: 700;
  --plain-h2-weight: 700;
  --plain-h3-weight: 700;
  --plain-h4-weight: 700;
  --plain-h5-weight: 700;
  --plain-base-align: left;
  --plain-h1-align: left;
  --plain-h2-align: left;
  --plain-h3-align: left;
  --plain-h4-align: left;
  --plain-h5-align: left;
  --plain-base-color: #000000;
  --plain-h1-color: #000000;
  --plain-h2-color: #000000;
  --plain-h3-color: #000000;
  --plain-h4-color: #000000;
  --plain-h5-color: #000000;
  --plain-base-line-height: 1.5;
  --plain-h1-line-height: 1.5;
  --plain-h2-line-height: 1.5;
  --plain-h3-line-height: 1.5;
  --plain-h4-line-height: 1.5;
  --plain-h5-line-height: 1.5;
  --plain-base-margin: 1rem 0 1rem 0;
  --plain-h1-margin: 2rem 0 1rem 0;
  --plain-h2-margin: 2rem 0 1rem 0;
  --plain-h3-margin: 2rem 0 1rem 0;
  --plain-h4-margin: 2rem 0 1rem 0;
  --plain-h5-margin: 2rem 0 1rem 0;
  --plain-base-strong-rate: 1.25;
  --plain-h1-strong-rate: 1.25;
  --plain-h2-strong-rate: 1.25;
  --plain-h3-strong-rate: 1.25;
  --plain-h4-strong-rate: 1.25;
  --plain-h5-strong-rate: 1.25;
  --plain-base-letter-spacing: 0;
  --plain-h1-letter-spacing: 0;
  --plain-h2-letter-spacing: 0;
  --plain-h3-letter-spacing: 0;
  --plain-h4-letter-spacing: 0;
  --plain-h5-letter-spacing: 0;
}