Basscss / Docs

Table of Styles

A list of all styles included in Basscss

250 Styles

Selectors Declarations
body, button margin: 0;
button, input, select, textarea font-family: inherit; font-size: 100%;
article, aside, details, figcaption, figure, footer, header, main, nav, section, summary display: block;
img max-width: 100%;
svg max-height: 100%;
body font-family: 'Helvetica Neue', Helvetica, sans-serif; line-height: 1.5; font-size: 100%;
h1, h2, h3, h4, h5, h6 font-family: 'Helvetica Neue', Helvetica, sans-serif; font-weight: bold; line-height: 1.25; margin-top: 1em; margin-bottom: .5em;
p, dl, ol, ul font-size: 1rem; margin-top: 0; margin-bottom: 1rem;
ol, ul padding-left: 2rem;
pre, code, samp font-family: 'Source Code Pro', Consolas, monospace; font-size: inherit;
pre margin-top: 0; margin-bottom: 1rem; overflow-x: scroll;
hr margin-top: 2rem; margin-bottom: 2rem;
blockquote margin-top: 2rem; margin-bottom: 2rem; margin-left: 0; padding-left: 1rem; padding-right: 1rem;
blockquote, blockquote p font-size: 1.25rem; font-style: italic;
h1, .h1 font-size: 2rem;
h2, .h2 font-size: 1.5rem;
h3, .h3 font-size: 1.25rem;
h4, .h4 font-size: 1rem;
h5, .h5 font-size: .875rem;
h6, .h6 font-size: .75rem;
.list-reset list-style: none; padding-left: 0;
input, select, textarea, fieldset margin-top: 0; margin-bottom: .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] line-height: 1.75em; -moz-box-sizing: border-box; box-sizing: border-box; height: 2.25em; -webkit-appearance: none; padding: .25em 1rem;
select line-height: 2em; padding: .25em 1rem; -moz-box-sizing: border-box; box-sizing: border-box;
select:not([multiple]) height: 2.25em;
textarea -moz-box-sizing: border-box; box-sizing: border-box; line-height: 1.75em; padding: .25em 1rem;
.fieldset-reset padding: 0; margin-left: 0; margin-right: 0; border: 0;
.fieldset-reset legend padding: 0;
button, input[type=button], input[type=submit], input[type=reset], .button font-weight: bold; text-decoration: none; cursor: pointer; display: inline-block; -moz-box-sizing: border-box; box-sizing: border-box; line-height: 2.25em; margin: 0; padding: 0 1rem; height: auto; width: auto; min-height: 2.25em; border: 0; -webkit-appearance: none;
.button:hover text-decoration: none;
table border-collapse: collapse; border-spacing: 0; max-width: 100%; width: 100%;
th text-align: left; font-weight: bold;
th, td padding: .25em 1rem; line-height: inherit;
th vertical-align: bottom;
td vertical-align: top;
.inline display: inline;
.block display: block;
.inline-block display: inline-block;
.overflow-hidden overflow: hidden;
.overflow-scroll overflow: scroll;
.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%;
.bold font-weight: bold;
.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;
.m0 margin: 0;
.mt0 margin-top: 0;
.mr0 margin-right: 0;
.mb0 margin-bottom: 0;
.ml0 margin-left: 0;
.m1 margin: .5rem;
.mt1 margin-top: .5rem;
.mr1 margin-right: .5rem;
.mb1 margin-bottom: .5rem;
.ml1 margin-left: .5rem;
.m2 margin: 1rem;
.mt2 margin-top: 1rem;
.mr2 margin-right: 1rem;
.mb2 margin-bottom: 1rem;
.ml2 margin-left: 1rem;
.m3 margin: 2rem;
.mt3 margin-top: 2rem;
.mr3 margin-right: 2rem;
.mb3 margin-bottom: 2rem;
.ml3 margin-left: 2rem;
.m4 margin: 4rem;
.mt4 margin-top: 4rem;
.mr4 margin-right: 4rem;
.mb4 margin-bottom: 4rem;
.ml4 margin-left: 4rem;
.mxn1 margin-left: -.5rem; margin-right: -.5rem;
.mxn2 margin-left: -1rem; margin-right: -1rem;
.mxn3 margin-left: -2rem; margin-right: -2rem;
.mxn4 margin-left: -4rem; margin-right: -4rem;
.mx-auto margin-left: auto; margin-right: auto;
.p1 padding: .5rem;
.py1 padding-top: .5rem; padding-bottom: .5rem;
.px1 padding-left: .5rem; padding-right: .5rem;
.p2 padding: 1rem;
.py2 padding-top: 1rem; padding-bottom: 1rem;
.px2 padding-left: 1rem; padding-right: 1rem;
.p3 padding: 2rem;
.py3 padding-top: 2rem; padding-bottom: 2rem;
.px3 padding-left: 2rem; padding-right: 2rem;
.p4 padding: 4rem;
.py4 padding-top: 4rem; padding-bottom: 4rem;
.px4 padding-left: 4rem; padding-right: 4rem;
.sm-show, .md-show, .lg-show display: none !important;
.sm-show (min-width: 40em) display: block !important;
.md-show (min-width: 52em) display: block !important;
.lg-show (min-width: 64em) display: block !important;
.hide display: none !important;
.sm-hide (min-width: 40em) display: none !important;
.md-hide (min-width: 52em) display: none !important;
.lg-hide (min-width: 64em) display: none !important;
.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;
.container max-width: 64em; margin-left: auto; margin-right: auto;
.col float: left; -moz-box-sizing: border-box; box-sizing: border-box;
.col-right float: right; -moz-box-sizing: border-box; box-sizing: border-box;
.col-1 width: 8.333333333333332%;
.col-2 width: 16.666666666666664%;
.col-3 width: 25%;
.col-4 width: 33.33333333333333%;
.col-5 width: 41.66666666666667%;
.col-6 width: 50%;
.col-7 width: 58.333333333333336%;
.col-8 width: 66.66666666666666%;
.col-9 width: 75%;
.col-10 width: 83.33333333333334%;
.col-11 width: 91.66666666666666%;
.col-12 width: 100%;
.sm-col (min-width: 40em) float: left; -moz-box-sizing: border-box; box-sizing: border-box;
.sm-col-right (min-width: 40em) float: right; -moz-box-sizing: border-box; box-sizing: border-box;
.sm-col-1 (min-width: 40em) width: 8.333333333333332%;
.sm-col-2 (min-width: 40em) width: 16.666666666666664%;
.sm-col-3 (min-width: 40em) width: 25%;
.sm-col-4 (min-width: 40em) width: 33.33333333333333%;
.sm-col-5 (min-width: 40em) width: 41.66666666666667%;
.sm-col-6 (min-width: 40em) width: 50%;
.sm-col-7 (min-width: 40em) width: 58.333333333333336%;
.sm-col-8 (min-width: 40em) width: 66.66666666666666%;
.sm-col-9 (min-width: 40em) width: 75%;
.sm-col-10 (min-width: 40em) width: 83.33333333333334%;
.sm-col-11 (min-width: 40em) width: 91.66666666666666%;
.sm-col-12 (min-width: 40em) width: 100%;
.md-col (min-width: 52em) float: left; -moz-box-sizing: border-box; box-sizing: border-box;
.md-col-right (min-width: 52em) float: right; -moz-box-sizing: border-box; box-sizing: border-box;
.md-col-1 (min-width: 52em) width: 8.333333333333332%;
.md-col-2 (min-width: 52em) width: 16.666666666666664%;
.md-col-3 (min-width: 52em) width: 25%;
.md-col-4 (min-width: 52em) width: 33.33333333333333%;
.md-col-5 (min-width: 52em) width: 41.66666666666667%;
.md-col-6 (min-width: 52em) width: 50%;
.md-col-7 (min-width: 52em) width: 58.333333333333336%;
.md-col-8 (min-width: 52em) width: 66.66666666666666%;
.md-col-9 (min-width: 52em) width: 75%;
.md-col-10 (min-width: 52em) width: 83.33333333333334%;
.md-col-11 (min-width: 52em) width: 91.66666666666666%;
.md-col-12 (min-width: 52em) width: 100%;
.lg-col (min-width: 64em) float: left; -moz-box-sizing: border-box; box-sizing: border-box;
.lg-col-right (min-width: 64em) float: right; -moz-box-sizing: border-box; box-sizing: border-box;
.lg-col-1 (min-width: 64em) width: 8.333333333333332%;
.lg-col-2 (min-width: 64em) width: 16.666666666666664%;
.lg-col-3 (min-width: 64em) width: 25%;
.lg-col-4 (min-width: 64em) width: 33.33333333333333%;
.lg-col-5 (min-width: 64em) width: 41.66666666666667%;
.lg-col-6 (min-width: 64em) width: 50%;
.lg-col-7 (min-width: 64em) width: 58.333333333333336%;
.lg-col-8 (min-width: 64em) width: 66.66666666666666%;
.lg-col-9 (min-width: 64em) width: 75%;
.lg-col-10 (min-width: 64em) width: 83.33333333333334%;
.lg-col-11 (min-width: 64em) width: 91.66666666666666%;
.lg-col-12 (min-width: 64em) width: 100%;
.table display: table; width: 100%;
.table-cell display: table-cell; vertical-align: middle;
.table-fixed table-layout: fixed;
.sm-table (min-width: 40em) display: table; width: 100%;
.sm-table-cell (min-width: 40em) display: table-cell; vertical-align: middle;
.md-table (min-width: 52em) display: table; width: 100%;
.md-table-cell (min-width: 52em) display: table-cell; vertical-align: middle;
.lg-table (min-width: 64em) display: table; width: 100%;
.lg-table-cell (min-width: 64em) display: table-cell; vertical-align: middle;
body color: #333; background-color: white;
a color: #0076df; text-decoration: none;
a:hover text-decoration: underline;
pre, code background-color: #eee; border-radius: 3px;
hr border: 0; border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc;
.dark-gray color: #333;
.white color: white;
.blue color: #0076df;
.mid-gray color: #777;
.light-gray color: #ccc;
.lighter-gray color: #eee;
.red color: #f95020;
.green color: #00d930;
.yellow color: #ffdc00;
.bg-dark-gray background-color: #333;
.bg-white background-color: white;
.bg-blue background-color: #0076df;
.bg-mid-gray background-color: #777;
.bg-light-gray background-color: #ccc;
.bg-lighter-gray background-color: #eee;
.bg-red background-color: #f95020;
.bg-green background-color: #00d930;
.bg-yellow background-color: #ffdc00;
.bg-darken-1 background-color: rgba(0, 0, 0, .0625);
.bg-darken-2 background-color: rgba(0, 0, 0, .125);
.bg-darken-3 background-color: rgba(0, 0, 0, .25);
.bg-darken-4 background-color: rgba(0, 0, 0, .5);
.border border-style: solid; border-width: 1px; border-color: #ccc;
.border-top border-top-style: solid; border-top-width: 1px; border-top-color: #ccc;
.border-right border-right-style: solid; border-right-width: 1px; border-right-color: #ccc;
.border-bottom border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc;
.border-left border-left-style: solid; border-left-width: 1px; border-left-color: #ccc;
.rounded border-radius: 3px;
.circle border-radius: 50%;
.field-light background-color: white; -webkit-transition: box-shadow .2s ease; transition: box-shadow .2s ease; border-style: solid; border-width: 1px; border-color: #ccc; border-radius: 3px;
.field-light:focus outline: none; border-color: #0076df; box-shadow: 0 0 2px rgba(0, 118, 223, .5);
.field-light:disabled color: #777; background-color: rgba(0, 0, 0, .125);
.field-light:read-only:not(select) background-color: rgba(0, 0, 0, .125);
.field-light:invalid border-color: #f95020;
.field-light.has-success border-color: #00d930;
.field-light.has-warning border-color: #ffdc00;
.field-light.has-error border-color: #f95020;
.radio-light, .checkbox-light -webkit-transition: box-shadow: .2s ease; transition: box-shadow: .2s ease;
.radio-light border-radius: 50%;
.radio-light:focus, .checkbox-light:focus outline: none; box-shadow: 0 0 2px rgba(0, 118, 223, .5);
.table-light th, .table-light td border-bottom-style: solid; border-bottom-width: 1px; border-bottom-color: #ccc;
.button-blue color: white; background-color: #0076df; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow, background-color; transition-property: box-shadow, background-color;
.button-blue:hover opacity: .875;
.button-blue:active box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, .25);
.button-blue:focus outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 0 1px 4px rgba(0, 118, 223, .5);
.button-blue:disabled, .button-blue.disabled opacity: .5;
.button-blue-outline color: #0076df; background-color: transparent; border-radius: 3px; box-shadow: inset 0 0 0 2px #0076df; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow, background-color; transition-property: box-shadow, background-color;
.button-blue-outline:hover color: white; background-color: #0076df;
.button-blue-outline:active box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, .25);
.button-blue-outline:focus outline: none; box-shadow: inset 0 0 0 2px #0076df, 0 0 0 2px rgba(255, 255, 255, .5), 0 0 1px 4px rgba(0, 118, 223, .5);
.button-blue-outline:disabled, .button-blue-outline.disabled color: #0076df; background-color: transparent; opacity: .5;
.button-gray color: white; background-color: #777; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow, background-color; transition-property: box-shadow, background-color;
.button-gray:hover opacity: .875;
.button-gray:active box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, .25);
.button-gray:focus outline: none; box-shadow: 0 0 0 2px white, 0 0 1px 4px rgba(0, 118, 223, .5);
.button-gray:disabled, .button-gray.disabled opacity: .5;
.button-red color: white; background-color: #f95020; border-radius: 3px; -webkit-transition-duration: .1s; transition-duration: .1s; -webkit-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-transition-property: box-shadow, background-color; transition-property: box-shadow, background-color;
.button-red:hover opacity: .875;
.button-red:active box-shadow: inset 0 3px 3px 0 rgba(0, 0, 0, .25);
.button-red:focus outline: none; box-shadow: 0 0 0 2px rgba(255, 255, 255, .5), 0 0 1px 4px rgba(249, 80, 32, .5);
.button-red:disabled, .button-red.disabled opacity: .5;