Abrusco Docs

Hackable & Functional CSS toolbox.



Background

Position

.bg-top         { background-position: top;          }
.bg-bottom      { background-position: bottom;       }
.bg-left        { background-position: left;         }
.bg-right       { background-position: right;        }
.bg-center      { background-position: center;       }
.bg-topleft     { background-position: top left;     }
.bg-topright    { background-position: top right;    }
.bg-bottomleft  { background-position: bottom left;  }
.bg-bottomright { background-position: bottom right; }

Repeat

.bg-repeatx  { background-repeat: repeat-x;  }
.bg-repeaty  { background-repeat: repeat-y;  }
.bg-norepeat { background-repeat: no-repeat; }

Size

.bg-cover   { background-size: cover;   }
.bg-contain { background-size: contain; }

Keywords

/* transparent */
.bg-transparent,
.bg-transparent\:hover:hover,
.anchor:hover .bg-transparent\:hover {
  background-color: transparent;
}

Black

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

.bg-black { background-color: var(--black); } .bg-black-95 { background-color: var(--black-95); } .bg-black-90 { background-color: var(--black-90); } .bg-black-80 { background-color: var(--black-80); } .bg-black-70 { background-color: var(--black-70); } .bg-black-60 { background-color: var(--black-60); } .bg-black-50 { background-color: var(--black-50); } .bg-black-40 { background-color: var(--black-40); } .bg-black-30 { background-color: var(--black-30); } .bg-black-20 { background-color: var(--black-20); } .bg-black-10 { background-color: var(--black-10); } .bg-black-05 { background-color: var(--black-05); } .bg-black-025 { background-color: var(--black-025); } .bg-black-0125 { background-color: var(--black-0125); }

Default Variables

:root {

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

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

.bg-white { background-color: var(--white); } .bg-white-95 { background-color: var(--white-95); } .bg-white-90 { background-color: var(--white-90); } .bg-white-80 { background-color: var(--white-80); } .bg-white-70 { background-color: var(--white-70); } .bg-white-60 { background-color: var(--white-60); } .bg-white-50 { background-color: var(--white-50); } .bg-white-40 { background-color: var(--white-40); } .bg-white-30 { background-color: var(--white-30); } .bg-white-20 { background-color: var(--white-20); } .bg-white-10 { background-color: var(--white-10); } .bg-white-05 { background-color: var(--white-05); } .bg-white-025 { background-color: var(--white-025); } .bg-white-0125 { background-color: var(--white-0125); }

Default Variables

:root {

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

}

Accents

Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa
Aa

.bg-aqua { background-color: var(--aqua); } .bg-blue { background-color: var(--blue); } .bg-navy { background-color: var(--navy); } .bg-teal { background-color: var(--teal); } .bg-green { background-color: var(--green); } .bg-olive { background-color: var(--olive); } .bg-lime { background-color: var(--lime); } .bg-yellow { background-color: var(--yellow); } .bg-orange { background-color: var(--orange); } .bg-red { background-color: var(--red); } .bg-fuchsia { background-color: var(--fuchsia); } .bg-purple { background-color: var(--purple); } .bg-maroon { background-color: var(--maroon); }

Default Variables

:root {

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

}