Abrusco Docs

Hackable & Functional CSS toolbox.



Default Variables

:root {

  --font-size: 16px;
  --font-family: var(--sansserif-font-family);

  --background-color: var(--white, white);
  --text-color: var(--black, black);
  --link-color: var(--blue, blue);
  --border-width: 1px;
  --border-color: currentColor;
  --bold-font-weight: bold;

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

  --h1: 2.5rem;     /* 40px */
  --h2: 2.0rem;     /* 32px */
  --h3: 1.5rem;     /* 24px */
  --h4: 1.25rem;    /* 20px */
  --h5: 1.125rem;   /* 18px */
  --h6: 1.0625rem;  /* 17px */

  --d1: 3.0rem;     /* 48px */
  --d2: 3.5rem;     /* 56px */
  --d3: 4.0rem;     /* 64px */
  --d4: 5.0rem;     /* 80px */
  --d5: 6.0rem;     /* 96px */

  --f0: 1rem;       /* 16px */
  --f1: .9375rem;   /* 15px */
  --f2: .875rem;    /* 14px */
  --f3: .8125rem;   /* 13px */
  --f4: .75rem;     /* 12px */

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

  --black:  #040404;
  --white:  #ffffff;

  --black-95: rgba(4, 4, 4, .95);
  --black-90: rgba(4, 4, 4, .90);
  --black-80: rgba(4, 4, 4, .80);
  --black-70: rgba(4, 4, 4, .70);
  --black-60: rgba(4, 4, 4, .60);
  --black-50: rgba(4, 4, 4, .50);
  --black-40: rgba(4, 4, 4, .40);
  --black-30: rgba(4, 4, 4, .30);
  --black-20: rgba(4, 4, 4, .20);
  --black-10: rgba(4, 4, 4, .10);
  --black-05: rgba(4, 4, 4, .05);
  --black-025: rgba(4, 4, 4, .025);
  --black-0125: rgba(4, 4, 4, .0125);

  --white-95: rgba(255, 255, 255, .95);
  --white-90: rgba(255, 255, 255, .90);
  --white-80: rgba(255, 255, 255, .80);
  --white-70: rgba(255, 255, 255, .70);
  --white-60: rgba(255, 255, 255, .60);
  --white-50: rgba(255, 255, 255, .50);
  --white-40: rgba(255, 255, 255, .40);
  --white-30: rgba(255, 255, 255, .30);
  --white-20: rgba(255, 255, 255, .20);
  --white-10: rgba(255, 255, 255, .10);
  --white-05: rgba(255, 255, 255, .05);
  --white-025: rgba(255, 255, 255, .025);
  --white-0125: rgba(255, 255, 255, .0125);

  /* credit to http://clrs.cc/ */
  --aqua:    #7fdbff;
  --blue:    #0074d9;
  --navy:    #001f3f;
  --teal:    #39cccc;
  --green:   #2ecc40;
  --olive:   #3d9970;
  --lime:    #01ff70;
  --yellow:  #ffdc00;
  --orange:  #ff851b;
  --red:     #ff4136;
  --fuchsia: #f012be;
  --purple:  #b10dc9;
  --maroon:  #85144b;
  /* /credit */

}

@custom-media --view-xs (max-width: 24rem);
@custom-media --view-sd (min-width: 32rem);
@custom-media --view-md (min-width: 48rem);
@custom-media --view-ld (min-width: 64rem);
@custom-media --view-xl (min-width: 80rem);

@custom-media --ie screen and (-ms-high-contrast: active), (-ms-high-contrast: none);