Basscss Forms

Basic form styles module for Basscss. Add your own color styles to customize the look and feel.

Label

<label class="label">Hamburger</label>

Input

<input type="text" class="input" />

Select

<select class="select">
  <option>Hamburger 1</option>
  <option>Hamburger 2</option>
  <option>Hamburger 3</option>
  <option>Hamburger 4</option>
</select>

Textarea

<textarea class="textarea" rows="4"></textarea>

This module styles range inputs to match other form styles in Basscss.

<input type="range" class="input-range">
<input type="range" class="input-range blue">

This module styles progress elements to better match other form styles in Basscss.

<progress value="0.375" class="progress">0.375</progress>
<progress value="0.5" class="progress">0.5</progress>

Base structural styles, resets, and colors for buttons are set with this module. All buttons share common padding and height, well suited for tap targets on touchscreen displays, and align with form inputs and selects.

Use the .btn class to style buttons, input buttons, and links.

<div class="mb1">
  <button class="btn">Button</button>
  <a href="#!" class="btn">Link Button</a>
  <input type="button" class="btn" value="Input Button">
</div>

Note: adjusting the line-height and padding variables may require adjustments to form element variables to maintain vertical alignment.

By default elements with the .btn class have transparent backgrounds. Use color utilities or .btn color styles to adjust the appearance.

These utilities extend the basscss-btn styles to modify button sizes.

To change the line-height and padding but leave the font-size the same, use button size extensions.

<button type="button" class="btn btn-big btn-primary mb1">Burgers</button>
<button type="button" class="btn btn-primary mb1">Fries</button>
<button type="button" class="btn btn-narrow btn-primary mb1">Onion Rings</button>
<button type="button" class="btn btn-small btn-primary mb1">Shakes</button>

Solid button color style for use with the .btn base style.

<div class="mb1">
  <button class="btn btn-primary">Button</button>
  <a href="#!" class="btn btn-primary">Link Button</a>
  <input type="button" class="btn btn-primary" value="Input Button">
</div>

By default, .btn-primary has white text on a blue background.

Adjust the default colors using the --button-color and --button-background-color custom properties.

:root {
  --button-color: black;
  --button-background-color: silver;
}

Use other color utilities to handle one-off exceptions.

<button class="btn btn-primary mb1 bg-blue">Button</button>
<button class="btn btn-primary mb1 bg-black">Button</button>
<button class="btn btn-primary mb1 black bg-gray">Button</button>
<button class="btn btn-primary mb1 black bg-silver">Button</button>
<button class="btn btn-primary mb1 black bg-aqua">Button</button>
<button class="btn btn-primary mb1 bg-navy">Button</button>
<button class="btn btn-primary mb1 bg-teal">Button</button>
<button class="btn btn-primary mb1 bg-green">Button</button>
<button class="btn btn-primary mb1 bg-olive">Button</button>
<button class="btn btn-primary mb1 bg-lime">Button</button>
<button class="btn btn-primary mb1 black bg-yellow">Button</button>
<button class="btn btn-primary mb1 bg-orange">Button</button>
<button class="btn btn-primary mb1 bg-red">Button</button>
<button class="btn btn-primary mb1 bg-fuchsia">Button</button>
<button class="btn btn-primary mb1 bg-purple">Button</button>
<button class="btn btn-primary mb1 bg-maroon">Button</button>
<button class="btn btn-primary mb1 black bg-darken-1">Button</button>
<button class="btn btn-primary mb1 black bg-darken-2">Button</button>
<button class="btn btn-primary mb1 black bg-darken-3">Button</button>
<button class="btn btn-primary mb1 black bg-darken-4">Button</button>

Outline button color style for use with the .btn base style.

<div class="mb1">
  <button class="btn btn-outline">Button</button>
  <a href="#!" class="btn btn-outline">Link Button</a>
  <input type="button" class="btn btn-outline" value="Input Button">
</div>

By default, .btn-outline inherits color from its parent. Use color utilities to adjust the color per button.

<div class="p1">
  <button class="btn btn-outline mb1 blue">Button</button>
  <button class="btn btn-outline mb1 black">Button</button>
  <button class="btn btn-outline mb1 navy">Button</button>
  <button class="btn btn-outline mb1 olive">Button</button>
  <button class="btn btn-outline mb1 red">Button</button>
  <button class="btn btn-outline mb1 fuchsia">Button</button>
  <button class="btn btn-outline mb1 purple">Button</button>
  <button class="btn btn-outline mb1 maroon">Button</button>
</div>

<div class="p1 bg-black">
  <button class="btn btn-outline mb1 aqua">Button</button>
  <button class="btn btn-outline mb1 teal">Button</button>
  <button class="btn btn-outline mb1 lime">Button</button>
  <button class="btn btn-outline mb1 green">Button</button>
  <button class="btn btn-outline mb1 yellow">Button</button>
  <button class="btn btn-outline mb1 orange">Button</button>
  <button class="btn btn-outline mb1 gray">Button</button>
  <button class="btn btn-outline mb1 silver">Button</button>
</div>

Basscss Media

Flexbox media object module for Basscss - http://basscss.com

Basic Usage

<div class="media">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Centered

<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Bottom Aligned

<div class="media media-bottom">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Source Order

<div class="media">
  <div class="media-body">
    Media Object
  </div>
  <img src="http://placehold.it/96" class="media-img" />
</div>

Double-Sided

<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
  <img src="http://placehold.it/96" class="media-img" />
</div>

Multiple Images

<div class="media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Responsive Media Objects

<div class="sm-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

<div class="md-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

<div class="lg-media media-center">
  <img src="http://placehold.it/96" class="media-img" />
  <div class="media-body">
    Media Object
  </div>
</div>

Basscss Responsive Margin

Responsive margin utilities module for Basscss - http://basscss.com

Margin utilities are based on a global white space scale defined with variables. These utilities use a shorthand naming convention.

Naming Convention

Prefix Naming Convention

These styles follow the same breakpoint prefix convention as other Basscss modules.

Change or reset default margins using the global white space scale. Negative x-axis margins are used to offset padding. Margin auto is used to horizontally center block-level elements with a set width.

Larger margins at wider breakpoints

<div class="m1 sm-m2 md-m3 lg-m4">Hamburger</div>

Larger grid gutters at wider breakpoints

When combined with basscss-grid and basscss-responsive-padding, grid gutters can be changed at different breakpoints.

<div class="clearfix mxn2 md-mxn3">
  <div class="col col-6 px2 md-px3">Column</div>
  <div class="col col-6 px2 md-px3">Column</div>
</div>

Basscss Responsive Padding

Responsive padding utilities module for Basscss - http://basscss.com

Padding utilities are based on a global white space scale defined with variables. These utilities use a shorthand naming convention.

Naming Convention

Prefix Naming Convention

These styles follow the same breakpoint prefix convention as other Basscss modules.

Change or reset default padding using the global white space scale.

Larger padding at wider breakpoints

<div class="p1 sm-p2 md-p3 lg-p4">Hamburger</div>

Basscss Responsive Layout

Responsive layout utilities module for Basscss - http://basscss.com

Prefix Naming Convention

These styles follow the same breakpoint prefix convention as other Basscss modules.

Basscss Responsive Position

Responsive position utilities module for Basscss - http://basscss.com

Prefix Naming Convention

These styles follow the same breakpoint prefix convention as other Basscss modules.

Basscss Responsive Typography

Responsive typography utilities module for Basscss - http://basscss.com

Prefix Naming Convention

These styles follow the same breakpoint prefix convention as other Basscss modules.

Basscss Responsive Type Scale

Responsive type scale utilities module for Basscss - http://basscss.com

Prefix Naming Convention

These styles follow the same breakpoint prefix convention as other Basscss modules.

Use this suite of color utilities to directly style elements. The color values used in this module are from mrmrs/colors.

Colors

<h3 class="center">
  <span class="black">.black</span>
  <span class="gray">.gray</span>
  <span class="silver">.silver</span>
  <span class="white">.white</span>
  <span class="aqua">.aqua</span>
  <span class="blue">.blue</span>
  <span class="navy">.navy</span>
  <span class="teal">.teal</span>
  <span class="green">.green</span>
  <span class="olive">.olive</span>
  <span class="lime">.lime</span>
  <span class="yellow">.yellow</span>
  <span class="orange">.orange</span>
  <span class="red">.red</span>
  <span class="fuchsia">.fuchsia</span>
  <span class="purple">.purple</span>
  <span class="maroon">.maroon</span>
  <span class="color-inherit">.color-inherit</span>
</h3>

Opacity

To de-emphasize elements with lower opacity, use the .muted utility.

<span class="blue">Normal</span>
<span class="blue muted">Muted</span>

Use this suite of background color utilities to directly style elements. The color values used in this module are from mrmrs/colors.

Background Colors

<div class="center p1 white bg-black">.bg-black</div>
<div class="center p1 bg-gray">.bg-gray</div>
<div class="center p1 bg-silver">.bg-silver</div>
<div class="center p1 bg-white">.bg-white</div>
<div class="center p1 bg-aqua">.bg-aqua</div>
<div class="center p1 bg-blue">.bg-blue</div>
<div class="center p1 white bg-navy">.bg-navy</div>
<div class="center p1 bg-teal">.bg-teal</div>
<div class="center p1 bg-green">.bg-green</div>
<div class="center p1 bg-olive">.bg-olive</div>
<div class="center p1 bg-lime">.bg-lime</div>
<div class="center p1 bg-yellow">.bg-yellow</div>
<div class="center p1 bg-orange">.bg-orange</div>
<div class="center p1 bg-red">.bg-red</div>
<div class="center p1 bg-fuchsia">.bg-fuchsia</div>
<div class="center p1 bg-purple">.bg-purple</div>
<div class="center p1 white bg-maroon">.bg-maroon</div>
<div class="center p1 bg-darken-1">.bg-darken-1</div>
<div class="center p1 bg-darken-2">.bg-darken-2</div>
<div class="center p1 bg-darken-3">.bg-darken-3</div>
<div class="center p1 bg-darken-4">.bg-darken-4</div>
<div class="bg-black">
  <div class="center p1 white bg-lighten-1">.bg-lighten-1</div>
  <div class="center p1 white bg-lighten-2">.bg-lighten-2</div>
  <div class="center p1 white bg-lighten-3">.bg-lighten-3</div>
  <div class="center p1 white bg-lighten-4">.bg-lighten-4</div>
</div>

Use this suite of border color utilities to directly style elements. The color values used in this module are from mrmrs/colors.

Border Colors

<div class="flex flex-wrap mxn1">
  <div class="flex-auto center m1 p1 border border-black">.border-black</div>
  <div class="flex-auto center m1 p1 border border-gray">.border-gray</div>
  <div class="flex-auto center m1 p1 border border-silver">.border-silver</div>
  <div class="flex-auto center m1 p1 border border-white">.border-white</div>
  <div class="flex-auto center m1 p1 border border-aqua">.border-aqua</div>
  <div class="flex-auto center m1 p1 border border-blue">.border-blue</div>
  <div class="flex-auto center m1 p1 border border-navy">.border-navy</div>
  <div class="flex-auto center m1 p1 border border-teal">.border-teal</div>
  <div class="flex-auto center m1 p1 border border-green">.border-green</div>
  <div class="flex-auto center m1 p1 border border-olive">.border-olive</div>
  <div class="flex-auto center m1 p1 border border-lime">.border-lime</div>
  <div class="flex-auto center m1 p1 border border-yellow">.border-yellow</div>
  <div class="flex-auto center m1 p1 border border-orange">.border-orange</div>
  <div class="flex-auto center m1 p1 border border-red">.border-red</div>
  <div class="flex-auto center m1 p1 border border-fuchsia">.border-fuchsia</div>
  <div class="flex-auto center m1 p1 border border-purple">.border-purple</div>
  <div class="flex-auto center m1 p1 border border-maroon">.border-maroon</div>
</div>

Darken

Use this suite of background-color utilities to directly style elements.

<div class="center p1 bg-darken-1">.bg-darken-1</div>
<div class="center p1 bg-darken-2">.bg-darken-2</div>
<div class="center p1 bg-darken-3">.bg-darken-3</div>
<div class="center p1 bg-darken-4">.bg-darken-4</div>

Lighten

Use this suite of background-color utilities to directly style elements.

<div style='background-color: #555'>
  <div class="center p1 bg-lighten-1">.bg-lighten-1</div>
  <div class="center p1 bg-lighten-2">.bg-lighten-2</div>
  <div class="center p1 bg-lighten-3">.bg-lighten-3</div>
  <div class="center p1 bg-lighten-4">.bg-lighten-4</div>
</div>

This module controls background size and position for background images.

Background Size

Use the .bg-cover or .bg-contain utilities to control background size.

<div class="p4 bg-cover white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-cover</h1>
</div>

Background Position

Use background position utilities to control position.

.bg-center

<div class="p4 bg-cover bg-center white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-center</h1>
</div>

.bg-top

<div class="p4 bg-cover bg-top white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-top</h1>
</div>

.bg-right

<div class="p4 bg-cover bg-right white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-right</h1>
</div>

.bg-bottom

<div class="p4 bg-cover bg-bottom white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-bottom</h1>
</div>

.bg-left

<div class="p4 bg-cover bg-left white bg-gray" style="background-image: url(https://d262ilb51hltx0.cloudfront.net/max/2000/1*DZwdGMaeu-rvTroJYui6Uw.jpeg)">
  <h1>.bg-left</h1>
</div>

These utilities set all properties.

<div class="all-inherit">.all-inherit</div>
<button class="all-inherit">.all-inherit</button>
<blockquote class="all-inherit">.all-inherit</blockquote>
<div class="all-initial">.all-initial</div>
<button class="all-initial">.all-initial</button>
<blockquote class="all-initial">.all-initial</blockquote>
<div class="all-unset">.all-unset</div>
<button class="all-unset">.all-unset</button>
<blockquote class="all-unset">.all-unset</blockquote>