Trusty-CSS

A Small CSS package to use to spin up web apps quickly

Globals

• Includes all packages and sets up a light-weight reset.

@import "./css/_aspect-ratio.css";
@import "./css/_color.css";
@import "./css/_brand.css";
@import "./css/_accessibility.css";
@import "./css/_grid.css";
@import "./css/_list.css";
@import "./css/_opacity.css";
@import "./css/_radius.css";
@import "./css/_shadow.css";
@import "./css/_size.css";
@import "./css/_space.css";
@import "./css/_text.css";
@import "./css/_transition.css";
@import "./css/_z-index.css";

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;

  &:focus-within {
    scroll-behavior: smooth;
  }
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  text-rendering: optimizeSpeed;
}
:is(a, button, input, textarea, select) {
  outline-width: 0;
  outline-color: transparent;
  background-color: transparent;
  border: none;
  transition: outline-color var(--duration-normal);
}

:is(a, button, input, textarea, select):focus-visible {
  outline-width: var(--a11y-outline-width);
  outline-color: var(--a11y-outline-color);
  outline-style: solid;
}

@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;
  }
}

How to use it

• To use as a package pnpm i trusy-css

Use as an npm package

pnpm i trusty-css

Include the package in your global css file @import 'trusty-css/src/index.css';

Media _media.css

Media can be used in your project