Utility

Utilities are single-purpose styles that provide the backbone for layout. Once these are set, they should be considered immutable and never change or be extended. Each utility is designed to do one thing well, while making its usage simple and obvious with short, humanized naming conventions.

Utility Layout

basscss-utility-layout v0.0.2

basscss.com

Change the default document flow with display, float, and other utilities.

.inline       { display: inline }
.block        { display: block }
.inline-block { display: inline-block }

.overflow-hidden { overflow: hidden }
.overflow-auto   { overflow: auto }
.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% }

Media Object

Create a media object using basic utilities.

Image

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

<div class="clearfix mb2 outline-blue">
  <div class="left p2 mr1">Image</div>
  <div class="overflow-hidden">
    <p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
  </div>
</div>

Double-Sided Media Object

For a container with a flexible center, use a double-sided media object.

Image
Image

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

<div class="clearfix mb2 outline-blue">
  <div class="left p2 mr1">Image</div>
  <div class="right p2 ml1">Image</div>
  <div class="overflow-hidden">
    <p><b>Body</b> Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
  </div>
</div>

CSS Source

13 Rules
14 Selectors
14 Declarations
7 Properties
/* Basscss Utility Layout */

.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%;
}

Utility Typography

basscss-utility-typography v0.0.2

basscss.com

Change typographic styles and defaults with these utilities.

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.

<p class="bold">Bold</p>
<p class="regular">Regular</p>
<p class="italic">Italic</p>
<p class="caps">Caps</p>
<p class="left-align">Left align</p>
<p class="center">Center</p>
<p class="right-align">Right align</p>
<p class="justify">Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>

CSS Source

10 Rules
10 Selectors
11 Declarations
7 Properties
/* Basscss Utility Typography */

.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;
}

:root {
  --bold-font-weight: bold;
}

Utility White Space

basscss-utility-white-space v0.0.4

basscss.com

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

Shorthand Description
m Margin
p Padding
t Top
r Right
b Bottom
l Left
x X-axis (left and right)
y Y-axis (top and bottom)
n Negative (margin only)
1 --space-1 (default .5rem)
2 --space-2 (default 1rem)
3 --space-3 (default 2rem)
4 --space-4 (default 4rem)

Margins

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.

.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; }

Padding

Padding utilities are only available in symmetrical orientations. This is to normalize the spacing used around elements.

.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) }

Margins and padding should never be declared outside of these utilities. This is meant to help create consistent rhythm and avoid magic numbers. If, for some reason, the default white space scale does not suit your design, customize and extend it before implementation.


CSS Source

43 Rules
43 Selectors
59 Declarations
14 Properties
/* Basscss Utility White Space */

.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);
}

:root {
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 2rem;
  --space-4: 4rem;
}

Utility Responsive States

basscss-utility-responsive-states v0.0.2

basscss.com

These styles allow for conditionally showing and hiding elements using a mobile-first approach.

Prefix Naming Convention

Prefix Description
(no prefix) Not scoped to a breakpoint
sm- --breakpoint-sm (default: min-width 40em)
md- --breakpoint-md (default: min-width 52em)
lg- --breakpoint-lg (default: min-width 64em)

To adjust the default breakpoints, declare custom media queries after importing the file via Rework, or manually adjust them in CSS.

.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);
}

Example

Resize the browser window to see the effect.

Visible from --breakpoint-sm and up.

Hidden from --breakpoint-sm and up.

<h3 class="sm-show">Visible from <code>--breakpoint-sm</code> and up.</h3>
<h3 class="sm-hide red">Hidden from <code>--breakpoint-sm</code> and up.</h3>

Responsive Line Break

Control wrapping at different screen widths.

Responsive Line Break
To Control Wrapping

<h1>
  Responsive Line Break
  <br class="md-show">
  To Control Wrapping
</h1>

CSS Source

9 Rules
11 Selectors
13 Declarations
6 Properties
/* Basscss Utility Responsive States */

.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);
}

@custom-media --breakpoint-sm (min-width: 40em);

@custom-media --breakpoint-md (min-width: 52em);

@custom-media --breakpoint-lg (min-width: 64em);

Positions

basscss-positions v0.0.5

basscss.com

These styles alter the default document flow.

Use positions with caution. They are often unnecessary and commonly misused.
See the Guide to Basics for more info.

.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;
}

CSS Source

12 Rules
12 Selectors
17 Declarations
8 Properties
/* Basscss Positions */

.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;
}

Ui Utility Button Sizes

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

These utilities extend the basscss-base-buttons styles. To change the line-height and padding but leave the font-size the same, use button size extensions.

<button type="button" class="button-big button-blue">Burgers</button>
<button type="button" class="button-blue">Fries</button>
<div class="mb1 md-hide"></div>
<button type="button" class="button-narrow button-blue">Onion Rings</button>
<button type="button" class="button-small button-blue">Shakes</button>

CSS Source

4 Rules
4 Selectors
9 Declarations
8 Properties
/* Basscss UI Utility Button Sizes */

.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);
}

:root {
  --space-1: .5rem;
  --button-small-padding-y: .25rem;
  --button-small-padding-x: .5rem;
  --button-big-padding-y: 1rem;
  --button-big-padding-x: 1.25rem;
}