Demo page for elements and default styles.
This lightweight reset for base elements sets margin 0 for the body and button elements, sets font-family inherit for form elements, and sets max-width 100% for images.
Typographic elements are normalized to a simple type scale that works well across devices. Default top and bottom margins are set for commonly-used typographic elements.
<h1>Hamburger 1</h1>
<h2>Hamburger 2</h2>
<h3>Hamburger 3</h3>
<h4>Hamburger 4</h4>
<h5>Hamburger 5</h5>
<h6>Hamburger 6</h6>
The .h1
– .h6
font-size utilities can be used to override an element’s default size.
Pastrami 1
Pastrami 2
Pastrami 3
Pastrami 4
Pastrami 5
Pastrami 6
<p class="h1">Pastrami 1</p>
<p class="h2">Pastrami 2</p>
<p class="h3">Pastrami 3</p>
<p class="h4">Pastrami 4</p>
<p class="h5">Pastrami 5</p>
<p class="h6">Pastrami 6</p>
By default, lists have bullets or numbers and padding left.
<ul>
<li>Half-Smoke</li>
<li>Kielbasa</li>
<li>Bologna</li>
</ul>
<ol>
<li>Prosciutto</li>
<li>Andouille</li>
<li>Bratwurst</li>
<li>Chorizo</li>
</ol>
To remove default list styling, use .list-reset
.
<ul class="list-reset">
<li>List Reset</li>
<li>Removes bullets</li>
<li>Removes numbers</li>
<li>Removes padding</li>
</ul>
To set lists inline, use utilities.
<ul class="list-reset">
<li class="inline-block mr1">Half-Smoke</li>
<li class="inline-block mr1">Kielbasa</li>
<li class="inline-block mr1">Bologna</li>
<li class="inline-block mr1">Prosciutto</li>
</ul>
Forms use base styles for their structure with color styles applied to adjust the look and feel. This creates a rhythmic consitency among all forms while allowing thematic differences where needed. Form elements do not rely on nested styles or markup structure, so utility styles can be used for contextual adjustments.
By default, form elements display inline.
<form>
<label>Search</label>
<input type="text" class="mb0 field-light">
<button class="button-blue">Go</button>
</form>
Use .block
and other utilities to stack form elements.
The use of utilities allows for a lot of flexibility when building form layouts.
<form class="sm-col-6">
<label>Email Address</label>
<input type="text" class="block full-width field-light">
<label>Password</label>
<input type="password" class="block full-width field-light">
<label>Select</label>
<select class="block full-width field-light">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
</select>
<label class="block full-width mb2">
<input type="checkbox" checked>
Remember me
</label>
<button type="submit" class="button-blue">Sign In</button>
<button type="reset" class="button-gray">Cancel</button>
</form>
Fieldsets can be reset with .fieldset-reset
to allow for easier styling of the fieldset and legend.
<form class="sm-col-6">
<fieldset class="fieldset-reset">
<legend class="h3 bold">Fieldset Legend</legend>
<label>Hamburger</label>
<input type="text" class="block full-width field-light">
<label>Hot Dog</label>
<input type="text" class="block full-width field-light">
</fieldset>
<button type="sumbit" class="button-blue">Submit</button>
</form>
To customize base form field styles, use the following variables.
:root {
--form-field-font-size: 1rem;
--form-field-height: 2.25rem;
--form-field-padding-y: .5rem;
--form-field-padding-x: .5rem;
}
Structural styles and resets for buttons are set in this base element styles module. All buttons share common padding and height, well suited for tap targets on touchscreen displays.
<div class="mb1">
<button>Button</button>
<a href="#!" class="button">Link Button</a>
<input type="button" class="button" value="Input Button">
</div>
Color style modules and other custom extensions adjust their surface-level appearance.
<div class="mb1">
<button class="button-blue mb1">Button Blue</button>
<button class="button-blue-outline mb1">Button Blue Outline</button>
<button class="button-light-gray mb1">Button Light Gray</button>
<button class="button-red mb1">Button Red</button>
</div>
To customize base button styles, use the following variables.
:root {
--button-font-size: inherit;
--button-font-weight: bold;
--button-line-height: 1.125rem;
--button-padding-y: .5rem;
--button-padding-x: 1rem;
}
Note: adjusting the line-height and padding may require adjustments to form element variables to maintain vertical alignment.
Default table styles are defined in base.
Use the table-light
color style from the basscss-color-tables
module
with other color utilities or create custom theme extensions to suit your needs.
Artist | Album | Release Date |
---|---|---|
Huey Lewis and the News | Sports | 1983 |
Phil Collins | No Jacket Required | 1985 |
Peter Gabriel | So | 1986 |
<div class="overflow-scroll">
<table class="table-light">
<thead>
<tr>
<th>Artist</th> <th>Album</th> <th>Release Date</th>
</tr>
</thead>
<tbody>
<tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
<tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
<tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
</tbody>
</table>
</div>
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% }
Create a media object using basic utilities.
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>
For a container with a flexible center, use a double-sided media object.
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>
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>
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) |
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 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 accomodate your design, customize and extend it before implementation.
These styles allow for conditionally showing and hiding elements using a mobile-first approach.
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);
}
Resize the browser window to see the effect.
--breakpoint-sm
and up.--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>
Control wrapping at different screen widths.
<h1>
Responsive Line Break
<br class="md-show">
To Control Wrapping
</h1>
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>
Use group utilities for fine-grained control over visually grouping buttons, form fields, and other elements.
Button groups allow for more flexibility in establishing gestalt and controlling information density.
Use a combination of layout utilities and color extensions to create button groups.
The utilities .rounded-left
, .rounded-right
,
and .not-rounded
can be used to override button and form field border radii.
<div class="inline-block clearfix">
<button type="button" class="left button-blue rounded-left is-active">Burgers</button>
<button type="button" class="left button-blue border-left not-rounded">Fries</button>
<button type="button" class="left button-blue border-left rounded-right">Shakes</button>
</div>
Normally, buttons with borders would double up when placed next to each other.
The .x-group-item
utility adjusts negative margins and focus states to visually collapse borders.
Functionally, this is similar to how other frameworks handle button and form input groups,
but with more direct control over styling.
<div class="inline-block clearfix">
<button type="button" class="left button-blue-outline x-group-item rounded-left is-active">Burgers</button>
<button type="button" class="left button-blue-outline x-group-item not-rounded">Fries</button>
<button type="button" class="left button-blue-outline x-group-item rounded-right">Shake</button>
</div>
Use .y-group-item
to group elements vertically.
<div class="inline-block">
<button type="button" class="block full-width button-blue-outline y-group-item rounded-top is-active">Burgers</button>
<button type="button" class="block full-width button-blue-outline y-group-item not-rounded">Fries</button>
<button type="button" class="block full-width button-blue-outline y-group-item rounded-bottom">Shake</button>
</div>
Input groups can be created by removing margins, adjusting border radii, and using the group utilities.
The .hide
utility visually hides labels, while keeping them accessible to screen readers.
<form class="sm-col-6">
<label class="hide">Pancakes</label>
<input type="text" class="block full-width mb0 field-light rounded-top y-group-item" placeholder="Pancakes">
<label class="hide">Making</label>
<input type="password" class="block full-width mb0 field-light not-rounded y-group-item" placeholder="Making">
<label class="hide">Bacon</label>
<input type="text" class="block full-width field-light rounded-bottom y-group-item" placeholder="Bacon">
<button type="submit" class="button-blue">Pancake</button>
</form>
The grid system can be used to control button or input group widths.
<form class="clearfix">
<label class="hide">Bacon</label>
<input type="text" class="col col-4 md-col-5 mb0 field-light rounded-left x-group-item" placeholder="Bacon">
<label class="hide">Pancakes</label>
<input type="password" class="col col-4 md-col-5 mb0 field-light not-rounded x-group-item" placeholder="Pancakes">
<button type="submit" class="col col-4 md-col-2 button-blue rounded-right">Pancake</button>
</form>
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;
}
The utility-based grid allows a lot of flexibility in creating complex layouts.
Start by using a .clearfix
container.
Optionally use a .container
to set a max-width.
Adjust the container width with the --container-width
variable.
<div class="container">
<div class="clearfix">
</div>
</div>
Add columns using the .col
and grid width .col-N
classes.
.col
floats elements left and sets box-sizing to border-box.
.col-N
sets width according to a 12 column grid.
The total number of columns in a row should add up to 12.
<div class="clearfix outline-blue">
<div class="col col-6">.col.col-6</div>
<div class="col col-6">.col.col-6</div>
</div>
Use breakpoint-prefixed column utilities to change the grid at different screen widths. Each breakpoint applies to that screen width and up. Unprefixed styles apply to all screen widths.
<div class="clearfix outline-blue">
<div class="sm-col sm-col-6 md-col-5 lg-col-4">.sm-col.sm-col-6.md-col-5.lg-col-4</div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8">.sm-col.sm-col-6.md-col-7.lg-col-8</div>
</div>
Use padding and negative margin utilities to create gutters based on the white space scale. When using negative margin, be sure to compensate for the extra width created with a padded parent element or by using overflow hidden. Otherwise, horizontal scrolling may occur.
<div class="clearfix mxn2 outline-blue">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div>.px2</div></div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8 px2"><div>.px2</div></div>
</div>
Nest whole grid structures within columns to created nested grids.
<div class="clearfix mxn2 outline-blue">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div>Unnested</div></div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8 px2">
<div class="clearfix mxn2">
<div class="col col-6 px2"><div>Nested</div></div>
<div class="col col-6 px2"><div>Nested</div></div>
</div>
</div>
</div>
To reverse the order of columns, use the .col-right
class to float right
<div class="clearfix outline-blue">
<div class="col-right col-6">.col-right.col-6</div>
<div class="col col-6">.col.col-6</div>
</div>
Use the .mx-auto
class to center columns within their containers.
<div class="clearfix mxn2 outline-blue">
<div class="col-8 px2 mx-auto">
<div>Centered Column</div>
</div>
</div>
Use the table object to vertically center content.
These styles can be combined with grid width and white-space utilities
for a wide range of layout options.
Apply padding to .table-cell
elements to contol spacing.
For vertically centered content
<div class="table outline-blue">
<div class="table-cell">
<h1 class="m0">.table-cell</h1>
<p class="m0">For vertically centered content</p>
</div>
<div class="table-cell">.table-cell</div>
</div>
The flag object can be emulated by adding .full-width
to one of the cells.
To add padding to the body, nest another div within the full-width cell.
The full-width utility makes the table object behave like the flag object.
<div class="table outline-blue">
<div class="table-cell p2">Image</div>
<div class="table-cell full-width">
<h1 class="m0">Flag Body</h1>
<p class="m0">The full-width utility makes the table object behave like the flag object.</p>
</div>
</div>
Use the .table-fixed
extension to create equal-width cells.
For vertically centered content
<div class="table table-fixed outline-blue">
<div class="table-cell">
<h1 class="m0">.table-cell</h1>
<p class="m0">For vertically centered content</p>
</div>
<div class="table-cell">.table-cell</div>
<div class="table-cell">.table-cell</div>
</div>
Use breakpoint prefixes to keep table objects stacked at smaller screen sizes. This is useful for things like navigation.
Only kicks in above the small breakpoint
Only kicks in above the large breakpoint
<div class="sm-table mb1 outline-blue">
<div class="sm-table-cell">
<h1 class="m0">.sm-table-cell</h1>
<p class="m0">Only kicks in above the small breakpoint</p>
</div>
<div class="sm-table-cell">.sm-table-cell</div>
</div>
<div class="lg-table outline-blue">
<div class="lg-table-cell">
<h1 class="m0">.lg-table-cell</h1>
<p class="m0">Only kicks in above the large breakpoint</p>
</div>
<div class="lg-table-cell">.lg-table-cell</div>
</div>
The table object can be combined with grid width utilities to create vertically centered columns.
For vertically centered content
<div class="table outline-blue">
<div class="table-cell col-7">
<h1 class="m0">.table-cell.col-7</h1>
<p class="m0">For vertically centered content</p>
</div>
<div class="table-cell col-5">.table-cell.col-5</div>
</div>
MIT License
Sets color styles for the body tag, links, pre, code, and hr tags.
:root {
--blue: #0076df;
--dark-gray: #333;
--light-gray: #ccc;
--lighter-gray: #eee;
--border-radius: 3px;
--border-width: 1px;
--border-color: var(--light-gray);
}
Includes the following basic button modules:
.button-blue
,
.button-blue-outline
,
.button-light-gray
,
.button-red
,
.button-nav-light
, and
.button-nav-dark
.
Use these styles on button elements, or with the basscss-base-buttons
module for links and input buttons.
<div class="mb1">
<button>Button</button>
<a href="#!" class="button">Link Button</a>
<input type="button" class="button" value="Input Button">
</div>
<div class="mb1">
<button class="button-blue mb1">Button Blue</button>
<button class="button-blue-outline mb1">Button Blue Outline</button>
<button class="button-light-gray mb1">Button Light Gray</button>
<button class="button-red mb1">Button Red</button>
</div>
Button styles can be used for navigation. The .button-nav-light
style adds a subtle hover effect for links on a light background.
<div class="mxn1">
<a href="#!" class="button button-narrow button-nav-light">Burgers</a>
<a href="#!" class="button button-narrow button-nav-light">Fries</a>
<a href="#!" class="button button-narrow button-nav-light">Shakes</a>
<a href="#!" class="button button-narrow button-nav-light">Onion Rings</a>
</div>
For dark backgrounds, use the .button-nav-dark
style.
<div class="bg-dark-gray">
<a href="#!" class="button button-narrow button-nav-dark">Burgers</a>
<a href="#!" class="button button-narrow button-nav-dark">Fries</a>
<a href="#!" class="button button-narrow button-nav-dark">Shakes</a>
<a href="#!" class="button button-narrow button-nav-dark">Onion Rings</a>
</div>
Basic color styles for form elements on a light background.
To style the color, background, and border styles for form fields, use the .field-light
style.
<label>Input</label>
<input type="text" class="block full-width field-light">
<label>Select</label>
<select class="block full-width field-light">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label>Textarea</label>
<textarea class="block full-width field-light"></textarea>
The .field-light
style includes states for disabled and read-only fields, as well as success, warning, and error states.
<label>Normal</label>
<input type="text" class="block full-width field-light">
<label>Disabled</label>
<input type="text" class="block full-width field-light" disabled value="This is disabled">
<label>Read Only</label>
<input type="text" class="block full-width field-light" readonly value="This is read-only">
<label>Required</label>
<input type="text" class="block full-width field-light" required>
<label>Success</label>
<input type="text" class="block full-width field-light is-success">
<label>Warning</label>
<input type="text" class="block full-width field-light is-warning">
<label>Error</label>
<input type="text" class="block full-width field-light is-error">
Style radio buttons and checkboxes with the .radio-light
and .checkbox-light
styles.
These add focus states that are consistent with the other form elements.
<label class="block">
<input type="checkbox" class="checkbox-light">
Checkbox
</label>
<label class="block">
<input type="radio" class="radio-light">
Radio
</label>
Color styles for form elements on dark backgrounds.
To style the color, background, and border styles for form fields on dark backgrounds, use the .field-dark
style.
<form class="p2 white bg-dark-gray">
<label>Input</label>
<input type="text" class="block full-width field-dark">
<label>Select</label>
<select class="block full-width field-dark">
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<label>Textarea</label>
<textarea class="block full-width field-dark"></textarea>
</form>
The .field-dark
style includes states for disabled and read-only fields, as well as success, warning, and error states.
<form class="p2 white bg-dark-gray">
<label>Normal</label>
<input type="text" class="block full-width field-dark">
<label>Disabled</label>
<input type="text" class="block full-width field-dark" disabled value="This is disabled">
<label>Read Only</label>
<input type="text" class="block full-width field-dark" readonly value="This is read-only">
<label>Required</label>
<input type="text" class="block full-width field-dark" required>
<label>Success</label>
<input type="text" class="block full-width field-dark is-success">
<label>Warning</label>
<input type="text" class="block full-width field-dark is-warning">
<label>Error</label>
<input type="text" class="block full-width field-dark is-error">
</form>
Use the .table-light
style as a starting point, then apply color utilities to style tables.
Artist | Album | Release Date |
---|---|---|
Huey Lewis and the News | Sports | 1983 |
Phil Collins | No Jacket Required | 1985 |
Peter Gabriel | So | 1986 |
<div class="overflow-scroll">
<table class="table-light">
<thead>
<tr>
<th>Artist</th> <th>Album</th> <th>Release Date</th>
</tr>
</thead>
<tbody>
<tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
<tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
<tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
</tbody>
</table>
</div>
Artist | Album | Release Date |
---|---|---|
Huey Lewis and the News | Sports | 1983 |
Phil Collins | No Jacket Required | 1985 |
Peter Gabriel | So | 1986 |
<div class="overflow-scroll">
<table class="table-light overflow-hidden bg-white border rounded">
<thead class="bg-light-gray">
<tr>
<th>Artist</th> <th>Album</th> <th>Release Date</th>
</tr>
</thead>
<tbody>
<tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
<tr> <td>Phil Collins</td> <td>No Jacket Required</td> <td>1985</td> </tr>
<tr> <td>Peter Gabriel</td> <td>So</td> <td>1986</td> </tr>
</tbody>
</table>
</div>
<div class="mb1">
<button class="button-blue">Button</button>
<a href="#!" class="button button-blue">Link Button</a>
<input type="button" class="button button-blue" value="Input Button">
</div>
<div class="mb1">
<button class="button-blue-outline">Button</button>
<a href="#!" class="button button-blue-outline">Link Button</a>
<input type="button" class="button button-blue-outline" value="Input Button">
</div>
<div class="mb1">
<button class="button-gray">Button</button>
<a href="#!" class="button button-gray">Link Button</a>
<input type="button" class="button button-gray" value="Input Button">
</div>
<div class="mb1">
<button class="button-light-gray">Button</button>
<a href="#!" class="button button-light-gray">Link Button</a>
<input type="button" class="button button-light-gray" value="Input Button">
</div>
<div class="mb1">
<button class="button-red">Button</button>
<a href="#!" class="button button-red">Link Button</a>
<input type="button" class="button button-red" value="Input Button">
</div>
<div class="mb1">
<button class="button-nav-light">Button</button>
<a href="#!" class="button button-nav-light">Link Button</a>
<input type="button" class="button button-nav-light" value="Input Button">
</div>
<div class="mb1 bg-dark-gray">
<button class="button-nav-dark">Button</button>
<a href="#!" class="button button-nav-dark">Link Button</a>
<input type="button" class="button button-nav-dark" value="Input Button">
</div>
<div class="mb1 bg-blue">
<button class="button-nav-dark">Button</button>
<a href="#!" class="button button-nav-dark">Link Button</a>
<input type="button" class="button button-nav-dark" value="Input Button">
</div>
<div class="clearfix mb1">
<button class="left button-nav-tab">Button</button>
<a href="#!" class="left button button-nav-tab">Link Button</a>
<input type="button" class="left button button-nav-tab" value="Input Button">
<a href="#!" class="left button button-nav-tab is-active">Active</a>
</div>
Use this suite of color and background color utilities to directly style elements.
<h3 class="center">
<span class="dark-gray">.dark-gray</span>
<span class="mid-gray">.mid-gray</span>
<span class="light-gray">.light-gray</span>
<span class="lighter-gray">.lighter-gray</span>
<span class="white">.white</span>
<span class="blue">.blue</span>
<span class="red">.red</span>
<span class="yellow">.yellow</span>
<span class="green">.green</span>
</h3>
<div class="center p1 white bg-dark-gray">.bg-dark-gray</div>
<div class="center p1 bg-mid-gray">.bg-mid-gray</div>
<div class="center p1 bg-light-gray">.bg-light-gray</div>
<div class="center p1 bg-lighter-gray">.bg-lighter-gray</div>
<div class="center p1 bg-white">.bg-white</div>
<div class="center p1 bg-blue">.bg-blue</div>
<div class="center p1 bg-red">.bg-red</div>
<div class="center p1 bg-yellow">.bg-yellow</div>
<div class="center p1 bg-green">.bg-green</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="p1 m1 border bg-lighter-gray">.border</div>
<div class="p1 m1 border-top bg-lighter-gray">.border-top</div>
<div class="p1 m1 border-right bg-lighter-gray">.border-right</div>
<div class="p1 m1 border-bottom bg-lighter-gray">.border-bottom</div>
<div class="p1 m1 border-left bg-lighter-gray">.border-left</div>
Utility styles for border radii can be used to style images and other elements.
<img src="/docs/placeholder-square.svg" class="rounded" width="64" height="64" />
<img src="/docs/placeholder-square.svg" class="circle" width="64" height="64" />
<img src="/docs/placeholder-square.svg" class="rounded-top" width="64" height="64" />
<img src="/docs/placeholder-square.svg" class="rounded-right" width="64" height="64" />
<img src="/docs/placeholder-square.svg" class="rounded-bottom" width="64" height="64" />
<img src="/docs/placeholder-square.svg" class="rounded-left" width="64" height="64" />
The .not-rounded
utility can be used to override default radii.
This is useful for things like input and button groups.
<button class="button-blue not-rounded">Not Rounded</button>
CSS layout module using flexbox
jxnblk.com/flex-objectThe flex-object is a powerful suite of utilities based on the flexible box layout module. These utilities can replace the need for a grid system in many instances, but can also be combined with the Basscss grid for even more possibilities.
Note: browser support for the flexible box layout module is limited. See http://caniuse.com/#feat=flexbox
To begin, add the .flex
class to a parent element.
This sets the element to display: flex
and enables a flex context for all direct child elements.
<div class="flex">
<a href="#" class="button">Link</a>
<a href="#" class="button">Link</a>
</div>
To wrap elements, use the .flex-wrap
utility.
<div class="flex flex-wrap">
<a href="#" class="button">Home</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
<a href="#" class="button">Nav Item</a>
</div>
To arrange items vertically, use the .flex-column
utility.
<div class="flex flex-column">
<div class="p1 blue border">Row</div>
<div class="p1 blue border">Row</div>
<div class="p1 blue border">Row</div>
</div>
Use these utilities to control vertical alignment of child elements.
To vertically center child elements, add the .flex-center
class to the parent element.
<div class="flex flex-center">
<div class="flex-auto px2 py4 blue border">
<h1 class="m0">Big</h1>
</div>
<div class="px2 blue border">Small</div>
</div>
To stretch all elements to fill the height of the parent, use the .flex-stretch
utility.
<div class="flex flex-stretch">
<div class="flex-auto px2 py4 blue border">
<h1 class="m0">Big</h1>
</div>
<div class="px2 blue border">Small</div>
</div>
To ensure nested elements stretch as well, add the .flex
class to relevant elements.
<div class="flex flex-stretch">
<div class="flex-auto px2 py4 blue border">
<h1 class="m0">Big</h1>
</div>
<div class="flex blue border">
<div class="px2 white bg-blue">
Small
</div>
</div>
</div>
To align child elements to their baseline, use the .flex-baseline
utility.
<div class="flex flex-baseline blue border-bottom">
<div class="flex-auto px2">
<h1 class="m0">Big</h1>
</div>
<div class="px2">Small</div>
</div>
To align child elements to the top, use the .flex-start
utility.
<div class="flex flex-start blue border-top">
<div class="flex-auto px2">
<h1 class="m0">Big</h1>
</div>
<div class="px2">Small</div>
</div>
To align child elements to the bottom, use the .flex-end
utility.
<div class="flex flex-end blue border-bottom">
<div class="flex-auto px2">
<h1 class="m0">Big</h1>
</div>
<div class="px2">Small</div>
</div>
To set display flex only at certain breakpoints and up,
use the breakpoint-prefixed versions of .flex
.
All other utilities will only work at the set breakpoint.
<div class="sm-flex flex-center mb2 blue">
<div class="border">
<h2 class="m0">.sm-flex</h2>
</div>
<div class="flex-auto border">Div</div>
<div class="border">Div</div>
</div>
<div class="md-flex flex-center mb2 blue">
<div class="border">
<h2 class="m0">.md-flex</h2>
</div>
<div class="flex-auto border">Div</div>
<div class="border">Div</div>
</div>
<div class="lg-flex flex-center mb2 blue">
<div class="border">
<h2 class="m0">.lg-flex</h2>
</div>
<div class="flex-auto border">Div</div>
<div class="border">Div</div>
</div>
To control the size and behavior of child elements, use these utilities.
To make an element grow or shrink as needed, use the .flex-auto
utility.
<div class="flex">
<a href="#" class="button button-nav-light">Nav Item</a>
<a href="#" class="button button-nav-light">Nav Item</a>
<div class="flex-auto blue border"></div>
<a href="#" class="button button-nav-light">Nav Item</a>
</div>
To make an element grow, but not shrink, use the .flex-grow
utility.
<div class="flex">
<a href="#" class="button button-nav-light">Nav Item</a>
<a href="#" class="button button-nav-light">Nav Item</a>
<div class="flex-grow blue border"></div>
<a href="#" class="button button-nav-light">Nav Item</a>
</div>
To prevent an element from growing or shrinking, use the .flex-none
utility.
<div class="flex">
<a href="#" class="flex-auto m1 button button-blue">Nav Item</a>
<a href="#" class="flex-auto m1 button button-blue">Nav Item</a>
<a href="#" class="flex-none m1 button button-blue">Nav Item</a>
</div>
To change the order of child elements, use the .flex-first
and .flex-last
utilities.
<div class="flex">
<a href="#" class="button button-blue">Nav Item</a>
<a href="#" class="flex-first button button-blue">Nav Item First</a>
<a href="#" class="button button-blue">Nav Item</a>
</div>
<div class="flex">
<a href="#" class="button button-blue">Nav Item</a>
<a href="#" class="flex-last button button-blue">Nav Item Last</a>
<a href="#" class="button button-blue">Nav Item</a>
</div>
.flex { display: flex }
.flex-column { flex-direction: column }
.flex-wrap { flex-wrap: wrap }
.flex-center { align-items: center }
.flex-baseline { align-items: baseline }
.flex-stretch { align-items: stretch }
.flex-start { align-items: flex-start }
.flex-end { align-items: flex-end }
.flex-first { order: -1 }
.flex-last { order: 1024 }
.flex-auto { flex: 1 1 auto }
.flex-grow { flex: 1 0 auto }
.flex-none { flex: none }
Adjust these custom media query values to change the breakpoints.
@custom-media --breakpoint-sm (min-width: 40em);
@custom-media --breakpoint-md (min-width: 52em);
@custom-media --breakpoint-lg (min-width: 64em);
Use .h0
and .h00
to create headings larger than the default h1.
Add .h0-responsive
or h00-responsive
to use vw based sizes at larger viewports.
Adjust the width of the browser to see the difference.
<h1 class="h00 h00-responsive">Hamburger 00</h1>
<h1 class="h0 h0-responsive">Hamburger 0</h1>
<h1 class="h1 h1-responsive">Hamburger 1</h1>
Use the .bg-cover
or .bg-contain
utilities to control background size.
.bg-cover
<div class="p4 bg-cover" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-cover</code>
</div>
Use background position utilities to control position.
.bg-center
<div class="p4 bg-cover bg-center" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-center</code>
</div>
.bg-top
<div class="p4 bg-cover bg-top" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-top</code>
</div>
.bg-right
<div class="p4 bg-cover bg-right" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-right</code>
</div>
.bg-bottom
<div class="p4 bg-cover bg-bottom" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-bottom</code>
</div>
.bg-left
<div class="p4 bg-cover bg-left" style="background-image: url(/docs/placeholder.svg)">
<code>.bg-left</code>
</div>