crucial.css/utilities.css

Crucial CSS sets up your CSS with the what you need to start styling and nothing more.

/*! Crucial.CSS Utilities v1.0.8 | MIT License | https://github.com/saltnpixels/curcial.css */

/* Vertical Spacing. Adds universal spacing on all inner items. Great for articles */
.vertical-spacing * + * {
  margin-top: var(--vertical-spacing);
}

.vertical-spacing p + p {
  margin-top: 1.5em;
}

/* hide from browsers, show on screen reader */
.screen-reader-text {
  clip: rect(1px, 1px, 1px, 1px);
  color: white;
  background-color: black;
  height: 1px;
  overflow: hidden;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important; /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

/* 
 Special div to fix overflow-x on the whole page.
 This should be on the body or right inside the body
 */
.page-wrap {
  overflow-x: clip; /* stops overflow */
  transform: translate3d(0, 0, 0); /* quirky fix overflow-x on mobile. Can also use position relative; */
  height: 100%; /* needed for position sticky items inside */
}


/* basic padded container, centered with a max-width */
.container {
  width: 100%;
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* basic padded container */
.container-fluid {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* container that is constrained only on one side */
.container-left,
.container-right {
  width: 100%;
  max-width: calc(
    var(--container-width) + ((100% - var(--container-width)) / 2)
  );
  margin-right: auto;
  margin-left: 0;
  padding-left: 0;
  padding-right: var(--container-padding);
}

/* container that is constrained to one side (right override) */
.container-right {
  margin-left: auto;
  margin-right: 0;
  padding-right: 0;
  padding-left: var(--container-padding);
}

/* special container for articles and holding lots of content with various-width components */
.container-content {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  width: 100%;
}

/* in case a container content is inside another container, dont add padding */
.container-fluid > .container-content,
.container > .container-content {
  padding-right: 0;
  padding-left: 0;
}
/* the magic, all inner elements have a max width and are centered */
.container-content > * {
  max-width: min(var(--container-content-width), 100%);
  margin-right: auto;
  margin-left: auto;
}

/* these special classes do not get a max width at all and "break out" of the container */
.container-content > .full-width,
.container-content > .alignfull,
.container-content > .container-fluid {
  width: auto;
  max-width: none;
  padding-right: 0;
  padding-left: 0;
  margin-left: calc(-1 * var(--container-padding));
  margin-right: calc(-1 * var(--container-padding));
}

/* container fluid can have back it's padding */
.container-content > .container-fluid {
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
}

/* these elements break out only enough to get a normal container size */
.container-content > .alignwide,
.container-content > .container {
  width: 100%;
  padding-right: 0;
  padding-left: 0;
  margin-right: auto;
  margin-left: auto;
  max-width: calc(var(--container-width) - (var(--container-padding) * 2));
}

.card-grid {
  --card-min: 250px;
  --card-max: 1fr;
  --card-stretch: auto-fill; /* can be auto-fit too */
  display: grid;
  grid-template-columns: repeat(
    var(--card-stretch),
    minmax(min(var(--card-min), 100%), var(--card-max))
  );
  gap: var(--gap);
  justify-content: center;
}

:root {
  /* spacing variables */
  --gutter: 15px;
  --gap: calc(2 * var(--gutter));
  --vertical-spacing: 30px;

  /* container variables */
  --container-width: 1200px;
  --container-padding: var(--gap); /* used on left/right side of containers */

  --container-content-width: 70rem; /* holds article text for nice reading */

  /* z-index variables */
  --z-index-top: 99;
  --z-index-overlay: 95;
  --z-index-header: 80;
  --z-index-behind: -1;
}