Basscss / Docs

Kitchen Sink

Demo page for elements and styles.

Button Blue
Button Gray
Button Red
Button Outline
Button Disabled
Button Disabled
Button Disabled
Button Disabled
Legend
Radios and Checkboxes
File Input & Progress 30%


.col-11
.col-1
.col-10
.col-2
.col-9
.col-3
.col-8
.col-4
.col-7
.col-5
.col-6
.col-6
.sm-col-11
.sm-col-1
.sm-col-10
.sm-col-2
.sm-col-9
.sm-col-3
.sm-col-8
.sm-col-4
.sm-col-7
.sm-col-5
.sm-col-6
.sm-col-6
.md-col-11
.md-col-1
.md-col-10
.md-col-2
.md-col-9
.md-col-3
.md-col-8
.md-col-4
.md-col-7
.md-col-5
.md-col-6
.md-col-6
.lg-col-11
.lg-col-1
.lg-col-10
.lg-col-2
.lg-col-9
.lg-col-3
.lg-col-8
.lg-col-4
.lg-col-7
.lg-col-5
.lg-col-6
.lg-col-6

.sm-show
.sm-show
.md-show
.md-show
.lg-show
.lg-show
.sm-hide
.sm-hide
.md-hide
.md-hide
.lg-hide
.lg-hide
.bg-dark-gray
.bg-mid-gray
.bg-light-gray
.bg-lighter-gray
.bg-white
.bg-blue
.bg-red
.bg-yellow
.bg-green
.bg-darken-1
.bg-darken-2
.bg-darken-3
.bg-darken-4
.border
.border-top
.border-right
.border-bottom
.border-left
Link Button

.dark-gray .mid-gray .light-gray .lighter-gray .white .blue .red .yellow .green

Image
Image

Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.

.sm-col.sm-col-6.md-col-5.lg-col-4
.sm-col.sm-col-6.md-col-7.lg-col-8
Centered Column
.col.col-6
.col.col-6
.px2
.px2
Unnested
Nested
Nested
.col-right.col-6
.col.col-6

Hamburger 1

Hamburger 2

Hamburger 3

Hamburger 4

Hamburger 5
Hamburger 6
.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% }
.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) }
.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;
}

Responsive Line Break
To Control Wrapping

Visible from --breakpoint-sm and up.

Hidden from --breakpoint-sm and up.

.sm-show, .md-show, .lg-show {
  display: none !important
}
@media (--breakpoint-sm) {
  .sm-show { display: block !important }
}
@media (--breakpoint-md) {
  .md-show { display: block !important }
}
@media (--breakpoint-lg) {
  .lg-show { display: block !important }
}
.hide { display: none !important }
@media (--breakpoint-sm) {
  .sm-hide { display: none !important }
}
@media (--breakpoint-md) {
  .md-hide { display: none !important }
}
@media (--breakpoint-lg) {
  .lg-hide { display: none !important }
}
Artist Album Release Date
Huey Lewis and the News Sports 1983
Phil Collins No Jacket Required 1985
Peter Gabriel So 1986

.table-cell

For vertically centered content

.table-cell

.table-cell

For vertically centered content

.table-cell
.table-cell
Image

Flag Body

The full-width utility makes the table object behave like the flag object.

.table-cell.col-7

For vertically centered content

.table-cell.col-5

.sm-table-cell

Only kicks in above the small breakpoint

.sm-table-cell

.lg-table-cell

Only kicks in above the large breakpoint

.lg-table-cell
Artist Album Release Date
Huey Lewis and the News Sports 1983
Phil Collins No Jacket Required 1985
Peter Gabriel So 1986

Pastrami 1

Pastrami 2

Pastrami 3

Pastrami 4

Pastrami 5

Pastrami 6

Bold

Regular

Italic

Caps

Left align

Center

Right align

Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.