Abrusco Docs

Hackable & Functional CSS toolbox.



Typography

Font Family

.serif     { font-family: var(--serif-font-family);     }
.sansserif { font-family: var(--sansserif-font-family); }
.code      { font-family: var(--code-font-family);      }

Default Variables

:root {

  --serif-font-family: Georgia, 'Times New Roman', serif;
  --sansserif-font-family: -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell',
    'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  --code-font-family: Courier, monospace;

}

Font Size

/* Headings */
.h1 { font-size: var(--h1); } /* 2.5rem    (40px) */
.h2 { font-size: var(--h2); } /* 2.0rem    (32px) */
.h3 { font-size: var(--h3); } /* 1.5rem    (24px) */
.h4 { font-size: var(--h4); } /* 1.25rem   (20px) */
.h5 { font-size: var(--h5); } /* 1.125rem  (18px) */
.h6 { font-size: var(--h6); } /* 1.0625rem (17px) */

/* Smaller Sizes */
.f0 { font-size: var(--f0); } /* 1rem      (16px) */
.f1 { font-size: var(--f1); } /* .9375rem  (15px) */
.f2 { font-size: var(--f2); } /* .875rem   (14px) */
.f3 { font-size: var(--f3); } /* .8125rem  (13px) */
.f4 { font-size: var(--f4); } /* .75rem    (12px) */

Responsivity

@media (--view-sd) { /* min-width: 32rem */

  .sd-h1 { font-size: var(--h1); }
  .sd-h2 { font-size: var(--h2); }
  .sd-h3 { font-size: var(--h3); }
  .sd-h4 { font-size: var(--h4); }
  .sd-h5 { font-size: var(--h5); }
  .sd-h6 { font-size: var(--h6); }

}
@media (--view-md) { /* min-width: 48rem */

  .md-h1 { font-size: var(--h1); }
  .md-h2 { font-size: var(--h2); }
  .md-h3 { font-size: var(--h3); }
  .md-h4 { font-size: var(--h4); }
  .md-h5 { font-size: var(--h5); }
  .md-h6 { font-size: var(--h6); }

}
@media (--view-ld) { /* min-width: 64rem */

  .ld-h1 { font-size: var(--h1); }
  .ld-h2 { font-size: var(--h2); }
  .ld-h3 { font-size: var(--h3); }
  .ld-h4 { font-size: var(--h4); }
  .ld-h5 { font-size: var(--h5); }
  .ld-h6 { font-size: var(--h6); }

}

Default Variables

:root {

  --h1: 2.5rem;     /* 40px */
  --h2: 2.0rem;     /* 32px */
  --h3: 1.5rem;     /* 24px */
  --h4: 1.25rem;    /* 20px */
  --h5: 1.125rem;   /* 18px */
  --h6: 1.0625rem;  /* 17px */
  --f0: 1rem;       /* 16px */
  --f1: .9375rem;   /* 15px */
  --f2: .875rem;    /* 14px */
  --f3: .8125rem;   /* 13px */
  --f4: .75rem;     /* 12px */

}

Font Style

.italic { font-style: italic; }

Font Weight

.normal { font-weight: normal; }
.bold   { font-weight: var(--bold-font-weight); }
.fw100  { font-weight: 100; }
.fw200  { font-weight: 200; }
.fw300  { font-weight: 300; }
.fw400  { font-weight: 400; }
.fw500  { font-weight: 500; }
.fw600  { font-weight: 600; }
.fw700  { font-weight: 700; }
.fw800  { font-weight: 800; }
.fw900  { font-weight: 900; }

Default Variables

:root {

  --bold-font-weight: bold;

}

Line Height

.lh0 { line-height: var(--lh0); }
.lh1 { line-height: var(--lh1); }
.lh2 { line-height: var(--lh2); }
.lh3 { line-height: var(--lh3); }
.lh4 { line-height: var(--lh4); }
.lh5 { line-height: var(--lh5); }

Default Variables

:root {

  --lh0: 1;         /* 16px (at default font-size) */
  --lh1: 1.125;     /* 18px (at default font-size) */
  --lh2: 1.250;     /* 20px (at default font-size) */
  --lh3: 1.375;     /* 22px (at default font-size) */
  --lh4: 1.5;       /* 24px (at default font-size) */
  --lh5: 2;         /* 32px (at default font-size) */

}

Text Align

.al { text-align: left;   }
.ar { text-align: right;  }
.ac { text-align: center; }

Responsivity

@media (--view-xs) { /* max-width: 24rem */

  .xs-al { text-align: left;   }
  .xs-ar { text-align: right;  }
  .xs-ac { text-align: center; }

}
@media (--view-sd) { /* min-width: 32rem */

  .sd-al { text-align: left;   }
  .sd-ar { text-align: right;  }
  .sd-ac { text-align: center; }

}
@media (--view-md) { /* min-width: 48rem */

  .md-al { text-align: left;   }
  .md-ar { text-align: right;  }
  .md-ac { text-align: center; }

}
@media (--view-ld) { /* min-width: 64rem */

  .ld-al { text-align: left;   }
  .ld-ar { text-align: right;  }
  .ld-ac { text-align: center; }

}

Text Decoration

.ul,
.ul\:hover:hover,
.anchor:hover .ul\:hover {
  text-decoration: underline;
}
.ol { text-decoration: overline;     }
.lt { text-decoration: line-through; }

Text Transform

.uc { text-transform: uppercase;  }
.lc { text-transform: lowercase;  }
.cc { text-transform: capitalize; }
.nc { text-transform: none;       }

Vertical Align

.va-inherit  { vertical-align: inherit;  }
.va-baseline { vertical-align: baseline; }
.va-sub      { vertical-align: sub;      }
.va-super    { vertical-align: super;    }
.va-middle   { vertical-align: middle;   }
.va-top      { vertical-align: top;      }
.va-bottom   { vertical-align: bottom;   }

White Space

.nowrap { white-space: nowrap; }