@evanwinter/styles

A minimal CSS utility library Evan uses in his personal projects.

Borders

| key | value | | ---- | ------- | | xxs | 0.125em | | xs | 0.25em | | sm | 0.5em | | md | 1em | | lg | 2em | | full | 50% |

.border {
  border: 1px solid currentColor;
}

.border-thick {
  border-width: 2px solid currentColor;
}

.rounded-{key} {
  border-radius: {value};
}

Breakpoints / Widths

| key | value | | --- | ----- | | xs | 20rem | | sm | 30rem | | md | 48rem | | lg | 64rem | | xl | 80rem |

--breakpoint-{key}: {value};

.w-{key} {
  width: {value};
}

.maxw-{key} {
  width: min(100%, {value});
}

.minw-{key} {
  width: max(100%, {value});
}

.w-none {
  width: 0;
}

.w-100 {
  width: 100%;
}

Colors

| key | value | | -------- | ------------------------- | | black | rgb(33, 33, 33) | | black-75 | rgba(33, 33, 33, 0.75) | | black-50 | rgba(33, 33, 33, 0.5) | | black-25 | rgba(33, 33, 33, 0.25) | | black-10 | rgba(33, 33, 33, 0.1) | | white | rgb(247, 247, 247) | | white-75 | rgba(247, 247, 247, 0.75) | | white-50 | rgba(247, 247, 247, 0.5) | | white-25 | rgba(247, 247, 247, 0.25) | | white-10 | rgba(247, 247, 247, 0.1) |

--color-{key}: {value};

.color-{key} {
  color: {value};
}

.bg-{key} {
  background-color: {value};
}

Flexbox

.flex {
  display: flex;
}

/* Direction */

.flex.row {
  flex-direction: row;
}

.flex.column {
  flex-direction: column;
}

.flex.row-reverse {
  flex-direction: row-reverse;
}

.flex.column-reverse {
  flex-direction: column-reverse;
}

/* Justify */

.flex.justify-start {
  justify-content: flex-start;
}

.flex.justify-center {
  justify-content: center;
}

.flex.justify-end {
  justify-content: flex-end;
}

.flex.justify-between {
  justify-content: space-between;
}

.flex.justify-around {
  justify-content: space-around;
}

/* Align */

.flex.align-start {
  align-items: flex-start;
}

.flex.align-center {
  align-items: center;
}

.flex.align-end {
  align-items: flex-end;
}

.flex.align-stretch {
  align-items: stretch;
}

.flex.align-baseline {
  align-items: baseline;
}

/* Gap */

.flex.gap-{spacingKey} {
  gap: {spacingValue};
}

Heights

| key | value | | ----- | ----- | | 10vh | 10vh | | 20vh | 20vh | | 30vh | 30vh | | 40vh | 40vh | | 50vh | 50vh | | 60vh | 60vh | | 70vh | 70vh | | 80vh | 80vh | | 90vh | 90vh | | 100vh | 100vh |

.minh-{key} {
  height: auto;
  min-height: {value};
}

.maxh-{key} {
  height: auto;
  max-height: {value};
}

.h-{key} {
  height: {value};
}

.h-none {
  height: 0;
}

.h-100 {
  height: 100%;
}

Misc

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

Position

| key | value | | -------- | -------- | | absolute | absolute | | fixed | fixed | | relative | relative | | sticky | sticky | | static | static |

.{key} {
  position: {value};
}

.top-{spacingKey} {
  top: {spacingValue};
}
.bottom-{spacingKey} {
  bottom: {spacingValue};
}
.left-{spacingKey} {
  left: {spacingValue};
}
.right-{spacingKey} {
  right: {spacingValue};
}

.inset-0 {
  inset: 0;
}

Spacing

| key | value | | ---- | ------ | | auto | auto | | none | 0 | | xxs | 0.25em | | xs | 0.5em | | sm | 1em | | md | 2em | | lg | 4em | | xl | 8em | | xxl | 12em |

--space-{key}: {value};

/* Margin */

.m-{key} {
  margin: {value};
}

.mt-{key} {
  margin-top: {value};
}

.mr-{key} {
  margin-right: {value};
}

.mb-{key} {
  margin-bottom: {value};
}

.ml-{key} {
  margin-left: {value};
}

.mx-{key} {
  margin-left: {value};
  margin-right: {value};
}

.my-{key} {
  margin-top: {value};
  margin-bottom: {value};
}

/* Padding */

.p-{key} {
  padding: {value};
}

.pt-{key} {
  padding-top: {value};
}

.pr-{key} {
  padding-right: {value};
}

.pb-{key} {
  padding-bottom: {value};
}

.pl-{key} {
  padding-left: {value};
}

.px-{key} {
  padding-left: {value};
  padding-right: {value};
}

.py-{key} {
  padding-top: {value};
  padding-bottom: {value};
}

Typography

Alignments

| key | value | | ------ | ------ | | center | center | | left | left | | right | right |

.text-{key} {
  text-align: {value};
}

Weights

| key | value | | -------- | ----- | | light | 300 | | normal | 400 | | semibold | 600 | | bold | 700 |

--text-{key}: {value};

.text-{key} {
  font-weight: {value};
}

Sizes

| key | value | | ----- | ----- | | small | 0.9em | | large | 1.2em |

--text-{key}: {value};

.text-{key} {
  font-size: {value};
}

Decoration

.underline {
  text-decoration: underline;
}
.no-underline {
  text-decoration: none;
}

CSS Reset

// Modern CSS Reset
// https://github.com/andy-piccalilli/modern-css-reset
// (amended by me)

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}

/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}

/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  margin: 0;
}

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto;
}

/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}