Table of Styles

basscss-base-reset v0.0.3

Details
Selectors Declarations
body, button margin: 0;
button, input, select, textarea font-family: inherit; font-size: 100%;
img max-width: 100%;
svg max-height: 100%;

basscss-base-typography v0.0.3

Details
Selectors Declarations
body font-family: var(--font-family); line-height: var(--line-height); font-size: 100%;
h1, h2, h3, h4, h5, h6 font-family: var(--heading-font-family); font-weight: var(--heading-font-weight); line-height: var(--heading-line-height); margin-top: 1em; margin-bottom: .5em;
p, dl, ol, ul font-size: var(--h4); margin-top: 0; margin-bottom: var(--space-2);
ol, ul padding-left: var(--space-3);
pre, code, samp font-family: var(--monospace-font-family); font-size: inherit;
pre margin-top: 0; margin-bottom: var(--space-2); overflow-x: scroll;
hr margin-top: var(--space-3); margin-bottom: var(--space-3);
blockquote margin-top: var(--space-3); margin-bottom: var(--space-3); margin-left: 0; padding-left: var(--space-2); padding-right: var(--space-2);
blockquote, blockquote p font-size: var(--h3); font-style: italic;
h1, .h1 font-size: var(--h1);
h2, .h2 font-size: var(--h2);
h3, .h3 font-size: var(--h3);
h4, .h4 font-size: var(--h4);
h5, .h5 font-size: var(--h5);
h6, .h6 font-size: var(--h6);
.list-reset list-style: none; padding-left: 0;

basscss-base-forms v1.0.6

Details
Selectors Declarations
input, select, textarea, fieldset font-size: var(--form-field-font-size); margin-top: 0; margin-bottom: var(--space-1, .5rem);
input[type=text], 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] box-sizing: border-box; height: var(--form-field-height); padding: var(--form-field-padding-y) var(--form-field-padding-x); vertical-align: middle; -webkit-appearance: none;
select box-sizing: border-box; line-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;
textarea box-sizing: border-box; line-height: 1.75; padding: var(--form-field-padding-y) var(--form-field-padding-x);
.fieldset-reset padding: 0; margin-left: 0; margin-right: 0; border: 0;
.fieldset-reset legend padding: 0;

basscss-base-buttons v1.0.6

Details
Selectors Declarations
button, .button font-size: var(--button-font-size); font-weight: var(--button-font-weight); text-decoration: none; cursor: pointer; display: inline-block; box-sizing: border-box; line-height: var(--button-line-height); padding: var(--button-padding-y) var(--button-padding-x); margin: 0; height: auto; border: 1px solid transparent; vertical-align: middle; -webkit-appearance: none;
button:after, button:before, .button:after, .button:before box-sizing: border-box;
::-moz-focus-inner border: 0; padding: 0;
.button:hover text-decoration: none;

basscss-base-tables v0.1.1

Details
Selectors Declarations
table border-collapse: separate; border-spacing: 0; max-width: 100%; width: 100%;
th text-align: left; font-weight: var(--table-header-font-weight);
th, td padding: var(--table-cell-padding-y) var(--table-cell-padding-x); line-height: inherit;
th vertical-align: bottom;
td vertical-align: top;

basscss-utility-layout v0.0.2

Details
Selectors Declarations
.inline display: inline;
.block display: block;
.inline-block display: inline-block;
.overflow-hidden overflow: hidden;
.overflow-scroll overflow: scroll;
.overflow-auto overflow: auto;
.clearfix:before, .clearfix:after content: " "; display: table;
.clearfix:after clear: both;
.left float: left;
.right float: right;
.fit max-width: 100%;
.half-width width: 50%;
.full-width width: 100%;

basscss-utility-typography v0.0.2

Details
Selectors Declarations
.bold font-weight: var(--bold-font-weight);
.regular font-weight: normal;
.italic font-style: italic;
.caps text-transform: uppercase; letter-spacing: .2em;
.left-align text-align: left;
.center text-align: center;
.right-align text-align: right;
.justify text-align: justify;
.nowrap white-space: nowrap;

basscss-utility-white-space v0.0.4

Details
Selectors Declarations
.m0 margin: 0;
.mt0 margin-top: 0;
.mr0 margin-right: 0;
.mb0 margin-bottom: 0;
.ml0 margin-left: 0;
.m1 margin: var(--space-1);
.mt1 margin-top: var(--space-1);
.mr1 margin-right: var(--space-1);
.mb1 margin-bottom: var(--space-1);
.ml1 margin-left: var(--space-1);
.m2 margin: var(--space-2);
.mt2 margin-top: var(--space-2);
.mr2 margin-right: var(--space-2);
.mb2 margin-bottom: var(--space-2);
.ml2 margin-left: var(--space-2);
.m3 margin: var(--space-3);
.mt3 margin-top: var(--space-3);
.mr3 margin-right: var(--space-3);
.mb3 margin-bottom: var(--space-3);
.ml3 margin-left: var(--space-3);
.m4 margin: var(--space-4);
.mt4 margin-top: var(--space-4);
.mr4 margin-right: var(--space-4);
.mb4 margin-bottom: var(--space-4);
.ml4 margin-left: var(--space-4);
.mxn1 margin-left: -var(--space-1); margin-right: -var(--space-1);
.mxn2 margin-left: -var(--space-2); margin-right: -var(--space-2);
.mxn3 margin-left: -var(--space-3); margin-right: -var(--space-3);
.mxn4 margin-left: -var(--space-4); margin-right: -var(--space-4);
.mx-auto margin-left: auto; margin-right: auto;
.p1 padding: var(--space-1);
.py1 padding-top: var(--space-1); padding-bottom: var(--space-1);
.px1 padding-left: var(--space-1); padding-right: var(--space-1);
.p2 padding: var(--space-2);
.py2 padding-top: var(--space-2); padding-bottom: var(--space-2);
.px2 padding-left: var(--space-2); padding-right: var(--space-2);
.p3 padding: var(--space-3);
.py3 padding-top: var(--space-3); padding-bottom: var(--space-3);
.px3 padding-left: var(--space-3); padding-right: var(--space-3);
.p4 padding: var(--space-4);
.py4 padding-top: var(--space-4); padding-bottom: var(--space-4);
.px4 padding-left: var(--space-4); padding-right: var(--space-4);

basscss-utility-responsive-states v0.0.2

Details
Selectors Declarations
.sm-show, .md-show, .lg-show display: none;
.sm-show display: block;
.md-show display: block;
.lg-show display: block;
.sm-hide display: none;
.md-hide display: none;
.lg-hide display: none;
.display-none display: none;
.hide position: absolute; height: 1px; width: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px);

basscss-positions v0.0.5

Details
Selectors Declarations
.relative position: relative;
.absolute position: absolute;
.fixed position: fixed;
.top-0 top: 0;
.right-0 right: 0;
.bottom-0 bottom: 0;
.left-0 left: 0;
.z1 z-index: 1;
.z2 z-index: 2;
.z3 z-index: 3;
.z4 z-index: 4;
.absolute-center top: 0; right: 0; bottom: 0; left: 0; margin: auto; display: table;

basscss-ui-utility-button-sizes v1.0.0

Details
Selectors Declarations
.button-small padding: var(--button-small-padding-y) var(--button-small-padding-x);
.button-big padding: var(--button-big-padding-y) var(--button-big-padding-x);
.button-narrow padding-left: var(--space-1); padding-right: var(--space-1);

basscss-grid v0.0.15

Details
Selectors Declarations
.container max-width: var(--container-width); margin-left: auto; margin-right: auto;
.col float: left; box-sizing: border-box;
.col-right float: right; box-sizing: border-box;
.col-1 width: calc(1/12 * 100%);
.col-2 width: calc(2/12 * 100%);
.col-3 width: calc(3/12 * 100%);
.col-4 width: calc(4/12 * 100%);
.col-5 width: calc(5/12 * 100%);
.col-6 width: calc(6/12 * 100%);
.col-7 width: calc(7/12 * 100%);
.col-8 width: calc(8/12 * 100%);
.col-9 width: calc(9/12 * 100%);
.col-10 width: calc(10/12 * 100%);
.col-11 width: calc(11/12 * 100%);
.col-12 width: 100%;
.sm-col float: left; box-sizing: border-box;
.sm-col-right float: right; box-sizing: border-box;
.sm-col-1 width: calc(1/12 * 100%);
.sm-col-2 width: calc(2/12 * 100%);
.sm-col-3 width: calc(3/12 * 100%);
.sm-col-4 width: calc(4/12 * 100%);
.sm-col-5 width: calc(5/12 * 100%);
.sm-col-6 width: calc(6/12 * 100%);
.sm-col-7 width: calc(7/12 * 100%);
.sm-col-8 width: calc(8/12 * 100%);
.sm-col-9 width: calc(9/12 * 100%);
.sm-col-10 width: calc(10/12 * 100%);
.sm-col-11 width: calc(11/12 * 100%);
.sm-col-12 width: 100%;
.md-col float: left; box-sizing: border-box;
.md-col-right float: right; box-sizing: border-box;
.md-col-1 width: calc(1/12 * 100%);
.md-col-2 width: calc(2/12 * 100%);
.md-col-3 width: calc(3/12 * 100%);
.md-col-4 width: calc(4/12 * 100%);
.md-col-5 width: calc(5/12 * 100%);
.md-col-6 width: calc(6/12 * 100%);
.md-col-7 width: calc(7/12 * 100%);
.md-col-8 width: calc(8/12 * 100%);
.md-col-9 width: calc(9/12 * 100%);
.md-col-10 width: calc(10/12 * 100%);
.md-col-11 width: calc(11/12 * 100%);
.md-col-12 width: 100%;
.lg-col float: left; box-sizing: border-box;
.lg-col-right float: right; box-sizing: border-box;
.lg-col-1 width: calc(1/12 * 100%);
.lg-col-2 width: calc(2/12 * 100%);
.lg-col-3 width: calc(3/12 * 100%);
.lg-col-4 width: calc(4/12 * 100%);
.lg-col-5 width: calc(5/12 * 100%);
.lg-col-6 width: calc(6/12 * 100%);
.lg-col-7 width: calc(7/12 * 100%);
.lg-col-8 width: calc(8/12 * 100%);
.lg-col-9 width: calc(9/12 * 100%);
.lg-col-10 width: calc(10/12 * 100%);
.lg-col-11 width: calc(11/12 * 100%);
.lg-col-12 width: 100%;

flex-object v1.0.7

Details
Selectors Declarations
.flex display: flex;
.flex-column flex-direction: column;
.flex-wrap flex-wrap: wrap;
.flex-center align-items: center;
.flex-baseline align-items: baseline;
.flex-stretch align-items: stretch;
.flex-start align-items: flex-start;
.flex-end align-items: flex-end;
.flex-first order: -1;
.flex-last order: 1024;
.flex-auto flex: 1 1 auto;
.flex-grow flex: 1 0 auto;
.flex-none flex: none;
.flex > div box-sizing: border-box;
.sm-flex display: flex;
.sm-flex > div box-sizing: border-box;
.md-flex display: flex;
.md-flex > div box-sizing: border-box;
.lg-flex display: flex;
.lg-flex > div box-sizing: border-box;

basscss-color-base v1.1.2

Details
Selectors Declarations
body color: var(--black); background-color: white;
a color: var(--link-color, var(--blue) ); text-decoration: none;
a:hover text-decoration: underline;
pre, code background-color: var(--pre-background-color, var(--silver) ); border-radius: var(--border-radius);
hr border: 0; border-bottom-style: solid; border-bottom-width: var(--border-width); border-bottom-color: var(--border-color);
.button color: white; background-color: var(--button-background-color, var(--blue) ); border-radius: var(--border-radius); transition-duration: .05s; transition-timing-function: ease-out; transition-property: box-shadow, background-color;
.button:hover box-shadow: inset 0 0 0 20rem var(--darken-1);
.button:focus outline: none; border-color: var(--darken-2); box-shadow: 0 0 2px 1px var(--darken-3);
.button:active, .button.is-active box-shadow: inset 0 0 0 20rem var(--darken-2), inset 0 3px 4px 0 var(--darken-3), 0 0 1px var(--darken-2);
.button:disabled, .button.is-disabled opacity: .5;

basscss-button-outline v0.0.2

Details
Selectors Declarations
.button-outline position: relative; z-index: 2; color: inherit; background-color: transparent; border-radius: var(--border-radius); border: var(--border-width) solid currentcolor; transition-duration: .1s; transition-timing-function: ease-out; transition-property: box-shadow, background-color;
.button-outline:before content: ''; width: 100%; height: 100%; display: block; position: absolute; z-index: -1; top: -1px; left: -1px; border: 1px solid transparent; background-color: currentcolor; border-radius: var(--border-radius); transition-duration: .1s; transition-timing-function: ease-out; transition-property: opacity; opacity: 0;
.button-outline:hover box-shadow: none;
.button-outline:hover:before opacity: .125;
.button-outline:focus outline: none; border: var(--border-width) solid currentcolor; box-shadow: 0 0 3px 1px;
.button-outline:active, .button-outline.is-active box-shadow: inset 0 1px 5px 0, 0 0 1px;
.button-outline:disabled, .button-outline.is-disabled opacity: .5;

basscss-button-transparent v0.0.3

Details
Selectors Declarations
.button-transparent position: relative; z-index: 2; color: inherit; background-color: transparent; border-radius: 0; border: var(--border-width) solid transparent; transition-duration: .1s; transition-timing-function: ease-out; transition-property: box-shadow;
.button-transparent:before content: ''; width: 100%; height: 100%; display: block; position: absolute; z-index: -1; top: -1px; left: -1px; border: 1px solid transparent; background-color: currentcolor; transition-duration: .1s; transition-timing-function: ease-out; transition-property: opacity; opacity: 0;
.button-transparent:hover box-shadow: none;
.button-transparent:hover:before opacity: .0625; opacity: .09375;
.button-transparent:focus outline: none; border-color: transparent; box-shadow: 0 0 3px;
.button-transparent:active:before, .button-transparent.is-active:before opacity: .0625;
.button-transparent:disabled, .button-transparent.is-disabled opacity: .5;

basscss-colors v1.0.6

Details
Selectors Declarations
.black, .dark-gray color: var(--black);
.gray, .mid-gray color: var(--gray);
.silver, .light-gray color: var(--silver);
.white color: var(--white);
.aqua color: var(--aqua);
.blue color: var(--blue);
.navy color: var(--navy);
.teal color: var(--teal);
.green color: var(--green);
.olive color: var(--olive);
.lime color: var(--lime);
.yellow color: var(--yellow);
.orange color: var(--orange);
.red color: var(--red);
.fuchsia color: var(--fuchsia);
.purple color: var(--purple);
.maroon color: var(--maroon);
.bg-black, .bg-dark-gray background-color: var(--black);
.bg-gray, .bg-mid-gray background-color: var(--gray);
.bg-silver, .bg-light-gray background-color: var(--silver);
.bg-white background-color: var(--white);
.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);
.bg-darken-1 background-color: var(--darken-1);
.bg-darken-2 background-color: var(--darken-2);
.bg-darken-3 background-color: var(--darken-3);
.bg-darken-4 background-color: var(--darken-4);
.border-aqua border-color: var(--aqua);
.border-blue border-color: var(--blue);
.border-navy border-color: var(--navy);
.border-teal border-color: var(--teal);
.border-green border-color: var(--green);
.border-olive border-color: var(--olive);
.border-lime border-color: var(--lime);
.border-yellow border-color: var(--yellow);
.border-orange border-color: var(--orange);
.border-red border-color: var(--red);
.border-fuchsia border-color: var(--fuchsia);
.border-purple border-color: var(--purple);
.border-maroon border-color: var(--maroon);
.border-black border-color: var(--black);
.border-gray border-color: var(--gray);
.border-silver border-color: var(--silver);
.border-white border-color: var(--white);
.border-darken-1 border-color: var(--darken-1);
.border-darken-2 border-color: var(--darken-2);
.border-darken-3 border-color: var(--darken-3);
.border-darken-4 border-color: var(--darken-4);
.muted opacity: .5;

basscss-color-borders v0.0.4

Details
Selectors Declarations
.border border-style: solid; border-width: var(--border-width); border-color: var(--border-color);
.border-top border-top-style: solid; border-top-width: var(--border-width); border-top-color: var(--border-color);
.border-right border-right-style: solid; border-right-width: var(--border-width); border-right-color: var(--border-color);
.border-bottom border-bottom-style: solid; border-bottom-width: var(--border-width); border-bottom-color: var(--border-color);
.border-left border-left-style: solid; border-left-width: var(--border-width); border-left-color: var(--border-color);
.rounded border-radius: var(--border-radius);
.circle border-radius: 50%;
.rounded-top border-radius: var(--border-radius) var(--border-radius) 0 0;
.rounded-right border-radius: 0 var(--border-radius) var(--border-radius) 0;
.rounded-bottom border-radius: 0 0 var(--border-radius) var(--border-radius);
.rounded-left border-radius: var(--border-radius) 0 0 var(--border-radius);
.not-rounded border-radius: 0;

basscss-color-forms v1.1.1

Details
Selectors Declarations
.field-light background-color: white; transition: box-shadow .2s ease; border-style: solid; border-width: var(--border-width); border-color: var(--border-color); border-radius: var(--border-radius);
.field-light:focus outline: none; border-color: var(--blue); box-shadow: 0 0 2px color(var(--blue) alpha(.5));
.field-light:disabled color: var(--mid-gray); background-color: var(--darken-2);
.field-light:read-only:not(select) background-color: var(--darken-2);
.field-light:invalid border-color: var(--red);
.field-light.is-success border-color: var(--green);
.field-light.is-warning border-color: var(--yellow);
.field-light.is-error border-color: var(--red);
.radio-light, .checkbox-light transition: box-shadow .2s ease;
.radio-light border-radius: 50%;
.radio-light:focus, .checkbox-light:focus outline: none; box-shadow: 0 0 2px color(var(--blue) alpha(.5));

basscss-color-forms-dark v0.1.1

Details
Selectors Declarations
.field-dark color: white; background-color: var(--darken-3); border: 1px solid var(--darken-1); border-radius: var(--border-radius, 3px);
.field-dark::placeholder color: rgba(255,255,255,.75);
.field-dark:focus outline: 0; border: 1px solid rgba(255,255,255,.5);
.field-dark:read-only:not(select) background-color: rgba(255,255,255,.25);
.field-dark:invalid border-color: var(--red);
.field-dark.is-success border-color: var(--green);
.field-dark.is-warning border-color: var(--yellow);
.field-dark.is-error border-color: var(--red);

basscss-input-range v1.1.1

Details
Selectors Declarations
input[type=range] vertical-align: middle; background-color: transparent;
.range-light color: inherit; -webkit-appearance: none; padding-top: var(--form-field-padding-y); padding-bottom: var(--form-field-padding-y);
.range-light::-webkit-slider-thumb -webkit-appearance: none; position: relative; width: var(--range-thumb-width); height: var(--range-thumb-height); border-radius: var(--border-radius); background-color: currentcolor; cursor: pointer; margin-top: var(--range-thumb-offset);
.range-light::-webkit-slider-thumb:before content: ''; display: block; position: absolute; top: calc( -.5 * var(--range-thumb-pseudo-size) + (.5 * var(--range-thumb-height)) ); left: calc( (-.5 * var(--range-thumb-pseudo-size)) + (.5 * var(--range-thumb-width)) ); width: var(--range-thumb-pseudo-size); height: var(--range-thumb-pseudo-size); opacity: 0;
.range-light::-moz-range-thumb width: var(--range-thumb-width); height: var(--range-thumb-height); border-radius: var(--border-radius); border-color: transparent; border-width: 0; background-color: currentcolor; cursor: pointer;
.range-light::-webkit-slider-runnable-track height: var(--range-track-height); cursor: pointer; border-radius: var(--border-radius); background-color: var(--darken-3);
.range-light::-moz-range-track height: var(--range-track-height); cursor: pointer; border-radius: var(--border-radius); background-color: var(--darken-3);
.range-light:focus outline: none;
.range-light:focus::-webkit-slider-thumb outline: none; border: 0; box-shadow: 0 0 1px 2px currentcolor;
.range-light:focus::-moz-range-thumb outline: none; border: 0; box-shadow: 0 0 1px 2px currentcolor;

basscss-progress v1.0.1

Details
Selectors Declarations
.progress display: block; width: 100%; height: calc( var(--form-field-height) / 4 ); margin: var(--form-field-padding-y) 0; background-color: var(--darken-2); border: 0; border-radius: 10000px; overflow: hidden; -webkit-appearance: none; cursor: pointer;
.progress::-webkit-progress-bar -webkit-appearance: none; background-color: var(--darken-2);
.progress::-webkit-progress-value -webkit-appearance: none; background-color: currentColor;
.progress::-moz-progress-bar background-color: currentColor;

basscss-color-tables v0.1.0

Details
Selectors Declarations
.table-light th, .table-light td border-bottom-style: solid; border-bottom-width: var(--border-width); border-bottom-color: var(--border-color);
.table-light tr:last-child td border-bottom: 0;

basscss-background-images v0.0.5

Details
Selectors Declarations
.bg-cover background-size: cover;
.bg-contain background-size: contain;
.bg-center background-position: center;
.bg-top background-position: top;
.bg-right background-position: right;
.bg-bottom background-position: bottom;
.bg-left background-position: left;