Basscss / Docs

Kitchen Sink

Demo page for elements and styles.

Turkey Top Left
Turkey Bottom Right

Bacon

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.

Bacon with Image

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

Bacon with Header

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin.

Bacon with Header and Footer

Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison. Ham bacon corned beef, sausage kielbasa flank tongue pig drumstick capicola swine short loin ham hock kevin. Bacon t-bone hamburger turkey capicola rump short loin.

Turkey short loin tenderloin jerky.


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 }
}
@media (--breakpoint-sm) {
  .sm-hide { display: none !important }
}
@media (--breakpoint-md) {
  .md-hide { display: none !important }
}
@media (--breakpoint-lg) {
  .lg-hide { display: none !important }
}
.display-none { display: none !important }
.hide {
  position: absolute !important;
  height: 1px;
  width: 1px;
  overflow: hidden;
  clip: rect(1px, 1px, 1px, 1px);
}
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.