Menu
Basscss

Table of Styles

Home / Docs / Reference / Styles

Base Reset v2.0.3

View Docs
SelectorsDeclarations
bodymargin: 0;
imgmax-width: 100%;
svgmax-height: 100%;

Base Forms v2.0.2

View Docs
SelectorsDeclarations
input, select, textarea, fieldsetfont-family: var(--form-field-font-family); font-size: var(--form-field-font-size); box-sizing: border-box; margin-top: 0; margin-bottom: 0;
labelvertical-align: middle;
input[type=text], input[type=date], input[type=datetime], input[type=datetime-local], input[type=email], input[type=month], input[type=number], input[type=password], input[type=search], input[type=tel], input[type=time], input[type=url], input[type=week]height: var(--form-field-height); padding: var(--form-field-padding-y) var(--form-field-padding-x); vertical-align: middle; -webkit-appearance: none;
selectline-height: 1.75; padding: var(--form-field-padding-y) var(--form-field-padding-x);
select:not([multiple])height: var(--form-field-height); vertical-align: middle;
textarealine-height: 1.75; padding: var(--form-field-padding-y) var(--form-field-padding-x);

Base Tables v1.0.2

View Docs
SelectorsDeclarations
tableborder-collapse: separate; border-spacing: 0; max-width: 100%; width: 100%;
thtext-align: left; font-weight: var(--table-header-font-weight);
th, tdpadding: var(--table-cell-padding-y) var(--table-cell-padding-x); line-height: inherit;
thvertical-align: bottom;
tdvertical-align: top;

Base Typography v2.0.3

View Docs
SelectorsDeclarations
bodyfont-family: var(--font-family); line-height: var(--line-height); font-size: var(--body-font-size);
h1, h2, h3, h4, h5, h6font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); line-height: var(--heading-line-height); margin-top: var(--heading-margin-top); margin-bottom: var(--heading-margin-bottom);
pmargin-top: var(--paragraph-margin-top); margin-bottom: var(--paragraph-margin-bottom);
dl, ol, ulmargin-top: var(--list-margin-top); margin-bottom: var(--list-margin-bottom);
pre, code, sampfont-family: var(--monospace-font-family); font-size: var(--pre-font-size);
premargin-top: var(--pre-margin-top); margin-bottom: var(--pre-margin-bottom); overflow-x: scroll;
h1font-size: var(--h1);
h2font-size: var(--h2);
h3font-size: var(--h3);
h4font-size: var(--h4);
h5font-size: var(--h5);
h6font-size: var(--h6);

Color Base v2.0.2

View Docs
SelectorsDeclarations
bodycolor: var(--body-color); background-color: var(--body-background-color);
acolor: var(--link-color); text-decoration: var(--link-text-decoration);
a:hovertext-decoration: var(--link-hover-text-decoration);
pre, codebackground-color: var(--pre-background-color); border-radius: var(--pre-border-radius);
hrborder: 0; border-bottom-style: var(--rule-border-style); border-bottom-width: var(--rule-border-width); border-bottom-color: var(--rule-border-color);

Color Forms v3.0.2

View Docs
SelectorsDeclarations
.fieldborder-style: solid; border-width: var(--border-width); border-color: var(--border-color); border-radius: var(--border-radius);
.field:focus, .field.is-focusedoutline: none; border-color: var(--field-focus-color); box-shadow: 0 0 0 2px color(var(--field-focus-color) a(.5));
.field:disabled, .field.is-disabledbackground-color: var(--darken-2); opacity: .5;
.field:read-only:not(select), .field.is-read-onlybackground-color: var(--darken-2);
.field.is-successborder-color: var(--field-success-color);
.field.is-success:focus, .field.is-success.is-focusedbox-shadow: 0 0 0 2px color(var(--field-success-color) a(.5));
.field.is-warningborder-color: var(--field-warning-color);
.field.is-warning:focus, .field.is-warning.is-focusedbox-shadow: 0 0 0 2px color(var(--field-warning-color) a(.5));
.field:invalid, .field.is-errorborder-color: var(--field-error-color);
.field:invalid:focus, .field:invalid.is-focused, .field.is-error:focus, .field.is-error.is-focusedbox-shadow: 0 0 0 2px color(var(--field-error-color) a(.5));

Color Tables v1.0.4

View Docs
SelectorsDeclarations
.table-light th, .table-light tdborder-bottom-width: var(--border-width); border-bottom-style: solid; border-bottom-color: var(--border-color);
.table-light tr:last-child tdborder-bottom: 0;

Btn v1.0.5

View Docs
SelectorsDeclarations
.btnfont-family: var(--button-font-family); font-size: var(--button-font-size); font-weight: var(--button-font-weight); text-decoration: none; cursor: pointer; display: inline-block; line-height: var(--button-line-height); padding: var(--button-padding-y) var(--button-padding-x); margin: 0; height: auto; border: var(--border-width) solid transparent; vertical-align: middle; -webkit-appearance: none; color: inherit; background-color: transparent;
.btn:hovertext-decoration: none;
.btn:focusoutline: none; border-color: var(--darken-2); box-shadow: 0 0 0 3px var(--darken-3);
::-moz-focus-innerborder: 0; padding: 0;

Btn Primary v1.0.2

View Docs
SelectorsDeclarations
.btn-primarycolor: var(--button-color); background-color: var(--button-background-color); border-radius: var(--border-radius);
.btn-primary:hoverbox-shadow: inset 0 0 0 20rem var(--darken-1);
.btn-primary:activebox-shadow: inset 0 0 0 20rem var(--darken-2), inset 0 3px 4px 0 var(--darken-3), 0 0 1px var(--darken-2);
.btn-primary:disabled, .btn-primary.is-disabledopacity: .5;

Btn Outline v1.0.2

View Docs
SelectorsDeclarations
.btn-outline, .btn-outline:hoverborder-color: currentcolor;
.btn-outlineborder-radius: var(--border-radius);
.btn-outline:hoverbox-shadow: inset 0 0 0 20rem var(--darken-1);
.btn-outline:activebox-shadow: inset 0 0 0 20rem var(--darken-2), inset 0 3px 4px 0 var(--darken-3), 0 0 1px var(--darken-2);
.btn-outline:disabled, .btn-outline.is-disabledopacity: .5;

Type Scale v1.0.3

View Docs
SelectorsDeclarations
.h1font-size: var(--h1);
.h2font-size: var(--h2);
.h3font-size: var(--h3);
.h4font-size: var(--h4);
.h5font-size: var(--h5);
.h6font-size: var(--h6);

Utility Typography v2.1.0

View Docs
SelectorsDeclarations
.font-family-inheritfont-family: inherit;
.font-size-inheritfont-size: inherit;
.text-decoration-nonetext-decoration: none;
.boldfont-weight: var(--bold-font-weight, bold);
.regularfont-weight: normal;
.italicfont-style: italic;
.capstext-transform: uppercase; letter-spacing: var(--caps-letter-spacing);
.left-aligntext-align: left;
.centertext-align: center;
.right-aligntext-align: right;
.justifytext-align: justify;
.nowrapwhite-space: nowrap;
.break-wordword-wrap: break-word;
.line-height-1line-height: var(--line-height-1);
.line-height-2line-height: var(--line-height-2);
.line-height-3line-height: var(--line-height-3);
.line-height-4line-height: var(--line-height-4);
.list-style-nonelist-style: none;
.underlinetext-decoration: underline;
.truncatemax-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
.list-resetlist-style: none; padding-left: 0;

Utility Layout v2.0.4

View Docs
SelectorsDeclarations
.inlinedisplay: inline;
.blockdisplay: block;
.inline-blockdisplay: inline-block;
.tabledisplay: table;
.table-celldisplay: table-cell;
.overflow-hiddenoverflow: hidden;
.overflow-scrolloverflow: scroll;
.overflow-autooverflow: auto;
.clearfix:before, .clearfix:aftercontent: " "; display: table;
.clearfix:afterclear: both;
.leftfloat: left;
.rightfloat: right;
.fitmax-width: 100%;
.border-boxbox-sizing: border-box;

Align v1.0.1

View Docs
SelectorsDeclarations
.align-baselinevertical-align: baseline;
.align-topvertical-align: top;
.align-middlevertical-align: middle;
.align-bottomvertical-align: bottom;

White Space v1.1.4

View Docs
SelectorsDeclarations
.m0margin: 0;
.mt0margin-top: 0;
.mr0margin-right: 0;
.mb0margin-bottom: 0;
.ml0margin-left: 0;
.m1margin: var(--space-1);
.mt1margin-top: var(--space-1);
.mr1margin-right: var(--space-1);
.mb1margin-bottom: var(--space-1);
.ml1margin-left: var(--space-1);
.m2margin: var(--space-2);
.mt2margin-top: var(--space-2);
.mr2margin-right: var(--space-2);
.mb2margin-bottom: var(--space-2);
.ml2margin-left: var(--space-2);
.m3margin: var(--space-3);
.mt3margin-top: var(--space-3);
.mr3margin-right: var(--space-3);
.mb3margin-bottom: var(--space-3);
.ml3margin-left: var(--space-3);
.m4margin: var(--space-4);
.mt4margin-top: var(--space-4);
.mr4margin-right: var(--space-4);
.mb4margin-bottom: var(--space-4);
.ml4margin-left: var(--space-4);
.mxn1margin-left: -var(--space-1); margin-right: -var(--space-1);
.mxn2margin-left: -var(--space-2); margin-right: -var(--space-2);
.mxn3margin-left: -var(--space-3); margin-right: -var(--space-3);
.mxn4margin-left: -var(--space-4); margin-right: -var(--space-4);
.mx-automargin-left: auto; margin-right: auto;
.p0padding: 0;
.p1padding: var(--space-1);
.py1padding-top: var(--space-1); padding-bottom: var(--space-1);
.px1padding-left: var(--space-1); padding-right: var(--space-1);
.p2padding: var(--space-2);
.py2padding-top: var(--space-2); padding-bottom: var(--space-2);
.px2padding-left: var(--space-2); padding-right: var(--space-2);
.p3padding: var(--space-3);
.py3padding-top: var(--space-3); padding-bottom: var(--space-3);
.px3padding-left: var(--space-3); padding-right: var(--space-3);
.p4padding: var(--space-4);
.py4padding-top: var(--space-4); padding-bottom: var(--space-4);
.px4padding-left: var(--space-4); padding-right: var(--space-4);

Positions v1.0.5

View Docs
SelectorsDeclarations
.relativeposition: relative;
.absoluteposition: absolute;
.fixedposition: fixed;
.top-0top: 0;
.right-0right: 0;
.bottom-0bottom: 0;
.left-0left: 0;
.z1z-index: var(--z1);
.z2z-index: var(--z2);
.z3z-index: var(--z3);
.z4z-index: var(--z4);

Responsive States v1.0.6

View Docs
SelectorsDeclarations
.sm-show, .md-show, .lg-showdisplay: none;
.sm-showdisplay: block;
.md-showdisplay: block;
.lg-showdisplay: block;
.sm-hidedisplay: none;
.md-hidedisplay: none;
.lg-hidedisplay: none;
.display-nonedisplay: none;
.hideposition: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);

Grid v1.0.6

View Docs
SelectorsDeclarations
.containermax-width: var(--container-width); margin-left: auto; margin-right: auto;
.colfloat: left; box-sizing: border-box;
.col-rightfloat: right; box-sizing: border-box;
.col-1width: calc(1/12 * 100%);
.col-2width: calc(2/12 * 100%);
.col-3width: calc(3/12 * 100%);
.col-4width: calc(4/12 * 100%);
.col-5width: calc(5/12 * 100%);
.col-6width: calc(6/12 * 100%);
.col-7width: calc(7/12 * 100%);
.col-8width: calc(8/12 * 100%);
.col-9width: calc(9/12 * 100%);
.col-10width: calc(10/12 * 100%);
.col-11width: calc(11/12 * 100%);
.col-12width: 100%;
.sm-colfloat: left; box-sizing: border-box;
.sm-col-rightfloat: right; box-sizing: border-box;
.sm-col-1width: calc(1/12 * 100%);
.sm-col-2width: calc(2/12 * 100%);
.sm-col-3width: calc(3/12 * 100%);
.sm-col-4width: calc(4/12 * 100%);
.sm-col-5width: calc(5/12 * 100%);
.sm-col-6width: calc(6/12 * 100%);
.sm-col-7width: calc(7/12 * 100%);
.sm-col-8width: calc(8/12 * 100%);
.sm-col-9width: calc(9/12 * 100%);
.sm-col-10width: calc(10/12 * 100%);
.sm-col-11width: calc(11/12 * 100%);
.sm-col-12width: 100%;
.md-colfloat: left; box-sizing: border-box;
.md-col-rightfloat: right; box-sizing: border-box;
.md-col-1width: calc(1/12 * 100%);
.md-col-2width: calc(2/12 * 100%);
.md-col-3width: calc(3/12 * 100%);
.md-col-4width: calc(4/12 * 100%);
.md-col-5width: calc(5/12 * 100%);
.md-col-6width: calc(6/12 * 100%);
.md-col-7width: calc(7/12 * 100%);
.md-col-8width: calc(8/12 * 100%);
.md-col-9width: calc(9/12 * 100%);
.md-col-10width: calc(10/12 * 100%);
.md-col-11width: calc(11/12 * 100%);
.md-col-12width: 100%;
.lg-colfloat: left; box-sizing: border-box;
.lg-col-rightfloat: right; box-sizing: border-box;
.lg-col-1width: calc(1/12 * 100%);
.lg-col-2width: calc(2/12 * 100%);
.lg-col-3width: calc(3/12 * 100%);
.lg-col-4width: calc(4/12 * 100%);
.lg-col-5width: calc(5/12 * 100%);
.lg-col-6width: calc(6/12 * 100%);
.lg-col-7width: calc(7/12 * 100%);
.lg-col-8width: calc(8/12 * 100%);
.lg-col-9width: calc(9/12 * 100%);
.lg-col-10width: calc(10/12 * 100%);
.lg-col-11width: calc(11/12 * 100%);
.lg-col-12width: 100%;

Flex Object v2.0.5

View Docs
SelectorsDeclarations
.flexdisplay: flex;
.flex-columnflex-direction: column;
.flex-wrapflex-wrap: wrap;
.flex-centeralign-items: center;
.flex-baselinealign-items: baseline;
.flex-stretchalign-items: stretch;
.flex-startalign-items: flex-start;
.flex-endalign-items: flex-end;
.flex-justifyjustify-content: space-between;
.flex-autoflex: 1 1 auto; min-width: 0; min-height: 0;
.flex-growflex: 1 0 auto;
.flex-noneflex: none;
.flex-firstorder: -1;
.flex-lastorder: 99999;
.sm-flexdisplay: flex;
.md-flexdisplay: flex;
.lg-flexdisplay: flex;

Borders v2.0.5

View Docs
SelectorsDeclarations
.borderborder-style: solid; border-width: var(--border-width); border-color: var(--border-color);
.border-topborder-top-style: solid; border-top-width: var(--border-width); border-top-color: var(--border-color);
.border-rightborder-right-style: solid; border-right-width: var(--border-width); border-right-color: var(--border-color);
.border-bottomborder-bottom-style: solid; border-bottom-width: var(--border-width); border-bottom-color: var(--border-color);
.border-leftborder-left-style: solid; border-left-width: var(--border-width); border-left-color: var(--border-color);
.border-noneborder: 0;
.roundedborder-radius: var(--border-radius);
.circleborder-radius: 50%;
.rounded-topborder-radius: var(--border-radius) var(--border-radius) 0 0;
.rounded-rightborder-radius: 0 var(--border-radius) var(--border-radius) 0;
.rounded-bottomborder-radius: 0 0 var(--border-radius) var(--border-radius);
.rounded-leftborder-radius: var(--border-radius) 0 0 var(--border-radius);
.not-roundedborder-radius: 0;

Colors v2.0.2

View Docs
SelectorsDeclarations
.blackcolor: var(--black);
.graycolor: var(--gray);
.silvercolor: var(--silver);
.whitecolor: var(--white);
.aquacolor: var(--aqua);
.bluecolor: var(--blue);
.navycolor: var(--navy);
.tealcolor: var(--teal);
.greencolor: var(--green);
.olivecolor: var(--olive);
.limecolor: var(--lime);
.yellowcolor: var(--yellow);
.orangecolor: var(--orange);
.redcolor: var(--red);
.fuchsiacolor: var(--fuchsia);
.purplecolor: var(--purple);
.marooncolor: var(--maroon);
.color-inheritcolor: inherit;
.mutedopacity: .5;

Background Colors v1.1.3

View Docs
SelectorsDeclarations
.bg-blackbackground-color: var(--black);
.bg-graybackground-color: var(--gray);
.bg-silverbackground-color: var(--silver);
.bg-whitebackground-color: var(--white);
.bg-aquabackground-color: var(--aqua);
.bg-bluebackground-color: var(--blue);
.bg-navybackground-color: var(--navy);
.bg-tealbackground-color: var(--teal);
.bg-greenbackground-color: var(--green);
.bg-olivebackground-color: var(--olive);
.bg-limebackground-color: var(--lime);
.bg-yellowbackground-color: var(--yellow);
.bg-orangebackground-color: var(--orange);
.bg-redbackground-color: var(--red);
.bg-fuchsiabackground-color: var(--fuchsia);
.bg-purplebackground-color: var(--purple);
.bg-maroonbackground-color: var(--maroon);
.bg-darken-1background-color: var(--darken-1);
.bg-darken-2background-color: var(--darken-2);
.bg-darken-3background-color: var(--darken-3);
.bg-darken-4background-color: var(--darken-4);
.bg-lighten-1background-color: var(--lighten-1);
.bg-lighten-2background-color: var(--lighten-2);
.bg-lighten-3background-color: var(--lighten-3);
.bg-lighten-4background-color: var(--lighten-4);
Design Principles
Color Combos