<a href="/" class="">Home</a>
<a href="/docs" class="active">Docs</a>
<a href="/docs/guide" class="">Guide</a>
<a href="//github.com/jxnblk/basscss" class="">Github</a>
Download Source or clone from Github:
git clone https://github.com/jxnblk/basscss.git
Include basscss.min.css
out-of-the-box or use the unminified basscss.css
and edit it how you see fit.
For lighter-weight projects use basscss-lite.min.css
, which only includes base type and layout styles.
Manually adjust the font stack and theme styles to customize the look and feel.
Include the files found in the /scss
folder and adjust the variables and styles.
Base type elements are normalized to a simple type scale that works well across devices.
<h1>Hamburger 1</h1>
<h2>Hamburger 2</h2>
<h3>Hamburger 3</h3>
<h4>Hamburger 4</h4>
<h5>Hamburger 5</h5>
<h6>Hamburger 6</h6>
Use the .h1
– .h6
classes to adjust type sizes that respond to large screen sizes.
To turn off media-query-based responsive type styles, set the $responsive-type
variable to false
.
<h1 class="h1">Hamburger 1</h1>
<h1 class="h2">Hamburger 2</h1>
<h1 class="h3">Hamburger 3</h1>
<h1 class="h4">Hamburger 4</h1>
<h1 class="h5">Hamburger 5</h1>
<h1 class="h6">Hamburger 6</h1>
Bold
Regular
Italic
Caps
Left align
Center
Right align
Justified 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="justified">Justified Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
Use these basic layout utilities to change the default document flow.
Class | Description |
---|---|
.inline | display: inline |
.block | display: block |
.block | display: inline-block |
.oh | overflow: hidden |
.clearfix | Clears floated child elements |
.left | float: left |
.right | float: right |
.fit | max-width: 100% |
.full-width | width: 100% |
.half-width | width: 50% |
Use these styles to adjust white space around elements.
Shorthand | Description |
---|---|
m | margin |
p | padding |
t | top |
r | right |
b | bottom |
l | left |
x | x-axis (i.e. left and right) |
y | y-axis (i.e. top and bottom) |
1 – 4 | White space scale from 1 to 4 |
Class | Description |
---|---|
.m0 | margin: 0 |
.mb0 | margin-bottom: 0 |
.m1 | margin: 1 |
.mt1 | margin-top: 1 |
.mr1 | margin-right: 1 |
.mb1 | margin-bottom: 1 |
.ml1 | margin-left: 1 |
... | ... |
.m4 | margin: 4 |
.mt4 | margin-top: 4 |
.mr4 | margin-right: 4 |
.mb4 | margin-bottom: 4 |
.ml4 | margin-left: 4 |
Class | Description |
---|---|
.p1 | padding: 1 |
.px1 | padding-right: 1; padding-left: 1 |
.py1 | padding-top: 1; padding-bottom: 1 |
.p2 | padding: 2 |
.px2 | padding-right: 2; padding-left: 2 |
.py2 | padding-top: 2; padding-bottom: 2 |
.p3 | padding: 3 |
.px3 | padding-right: 3; padding-left: 3 |
.py3 | padding-top: 3; padding-bottom: 3 |
.p4 | padding: 4 |
.px4 | padding-right: 4; padding-left: 4 |
.py4 | padding-top: 4; padding-bottom: 4 |
Class | Description |
---|---|
.mobile-show | Only visibile on mobile |
.mobile-hide | Not visibile on mobile |
.mobile-block | Full width display block on mobile |
.mobile-center | Center aligned on mobile |
The default grid only switches to columns above the desktop breakpoint $breakpoint-desktop
.
Start with a .container
to limit the width of the page.
The .container
is optional if you wish to span the full width of the viewport.
Wrap each row of columns with the .row
class.
Use the .col
to float columns left, then add a .col-X
class to control width.
Make sure the total number of columns in a row adds up to 12 or less.
Note: nested divs are added for demonstration only.
<div class="container">
<div class="row">
<div class="col col-6"> <div>.col .col-6</div> </div>
<div class="col col-6"> <div>.col .col-6</div> </div>
</div>
<div class="row">
<div class="col col-4"> <div>.col .col-4</div> </div>
<div class="col col-4"> <div>.col .col-4</div> </div>
<div class="col col-4"> <div>.col .col-4</div> </div>
</div>
</div>
To nest grids, add another .row
container within a column.
<div class="row">
<div class="col col-4"> <div>.col .col-4</div> </div>
<div class="col col-8">
<div>.col .col-8</div>
<div class="row">
<div class="col col-6"> <div>.col .col-6</div> </div>
<div class="col col-6"> <div>.col .col-6</div> </div>
</div>
</div>
</div>
Use the .col-offset-X
classes to add margin to the left of a column.
<div class="row">
<div class="col col-4"> <div>.col .col-4</div> </div>
<div class="col col-6 col-offset-2"> <div>.col .col-6 .col-offset-2</div> </div>
</div>
Use the .col-center
in place of .col
to center a column
<div class="row">
<div class="col-center col-6"> <div>.col-center .col-6</div> </div>
</div>
Use the .col-right
class in place of .col
to reverse order of columns.
<div class="row">
<div class="col-right col-6"> <div>First</div> </div>
<div class="col-right col-6"> <div>Second</div> </div>
</div>
Use the mobile grid classes to use the grid at all screen sizes.
<div class="row">
<div class="mobile-col mobile-col-6"> <div>.mobile-col .mobile-col-6</div> </div>
<div class="mobile-col mobile-col-6"> <div>.mobile-col .mobile-col-6</div> </div>
</div>
Use the mobile grid as a base, then add desktop grid width utilities to adjust the grid layout for desktop
<div class="row">
<div class="mobile-col mobile-col-6 col-7"> <div>Half width on mobile, 7 columns on desktop</div> </div>
<div class="mobile-col mobile-col-6 col-5"> <div>Half width on mobile, 5 columns on desktop</div> </div>
</div>
To split columns differently on mobile and desktop, use a .clearfix
element with the .mobile-show
state.
<div class="row">
<div class="mobile-col mobile-col-6 col-3">
<div>.mobile-col-6 .col-3<br> Resize the viewport to a small size to see how the mobile-show clearfix works.</div>
</div>
<div class="mobile-col mobile-col-6 col-3"> <div>.mobile-col-6 .col-3</div> </div>
<div class="clearfix mobile-show"></div>
<div class="mobile-col mobile-col-6 col-3"> <div>.mobile-col-6 .col-3</div> </div>
<div class="mobile-col mobile-col-6 col-3"> <div>.mobile-col-6 .col-3</div> </div>
</div>
A similar layout can also be acheived with nesting.
<div class="row">
<div class="col col-6">
<div class="row">
<div class="mobile-col mobile-col-6"><div>Nested mobile column</div></div>
<div class="mobile-col mobile-col-6"><div>Nested mobile column</div></div>
</div>
</div>
<div class="col col-6">
<div class="row">
<div class="mobile-col mobile-col-6"><div>Nested mobile column</div></div>
<div class="mobile-col mobile-col-6"><div>Nested mobile column</div></div>
</div>
</div>
</div>
To aligned single centered columns with other grid elements, use the .container-col-X
classes. These set a max-width based on 6, 8, and 10 columns.
<div class="container-col-10">
<div>.container-col-10</div>
</div>
<div class="container-col-8">
<div>.container-col-8</div>
</div>
<div class="container-col-6">
<div>.container-col-6</div>
</div>
Use this to vertically center elements.
Apply the .table
class to an element, then add .table-cell
to its children.
The default table collapses on mobile.
<div class="table">
<div class="table-cell">
<h1 class="mb0">.table-cell<br> This side is taller.</h1>
</div>
<div class="table-cell">.table-cell</div>
</div>
To control width, use the table object in conjunction with grid width utilities.
<div class="table">
<div class="table-cell col-4"> <h1 class="mb0">.table-cell</h1> </div>
<div class="table-cell col-8">.table-cell</div>
</div>
Use the .table-fixed
extension to keep cells equal width.
<div class="table table-fixed">
<div class="table-cell"> <h1 class="mb0">.table-cell</h1> </div>
<div class="table-cell">.table-cell</div>
<div class="table-cell">.table-cell</div>
</div>
Add padding to any .table-cell
.
<div class="table">
<div class="table-cell p2"> <h1 class="mb0">.table-cell</h1> </div>
<div class="table-cell p4">.table-cell</div>
</div>
Use the .mobile-table
and .mobile-table-cell
classes for use at all breakpoints.
<div class="mobile-table">
<div class="mobile-table-cell"> <h1 class="mb0">.mobile-table-cell</h1> </div>
<div class="mobile-table-cell">.mobile-table-cell</div>
</div>
Replicate the
flag object
by adding .full-width
to one of the cells.
<div class="mobile-table">
<div class="mobile-table-cell p1"> <h1 class="mb0">Flag</h1> </div>
<div class="mobile-table-cell full-width">.mobile-table-cell</div>
</div>
Forms run inline by default. Use the .form
class to set basic structural styles.
Use the .form-light
class to style the form's theme.
<form class="form form-light">
<label class="mr1">Input:</label>
<input type="text" class="input mr1">
<input type="submit" class="button button-blue" value="Go">
</form>
Use the .form-stacked
class to make forms stack vertically.
<form class="form form-stacked form-light">
<label>Email Address</label>
<input type="text" class="input" placeholder="Email Address">
<label>Password</label>
<input type="text" class="input" placeholder="Password">
<label class="checkbox">
<input type="checkbox"> Remember Me
</label>
<input type="submit" class="button button-blue" value="Sign In">
</form>
Use the .field-big
and .field-small
classes to adjust the size of form elements.
These will align with button sizes.
<form class="form form-light">
<label class="mr1">.field-big</label>
<input type="text" class="input field-big mr1">
<input type="submit" class="button button-big button-blue" value="Go">
</form>
<form class="form form-light">
<label class="mr1">.field-small</label>
<input type="text" class="input field-small mr1">
<input type="submit" class="button button-small button-blue" value="Go">
</form>
Use the .table-reset
style to set default structural styles.
Add the .table-light
thematic extension to add borders to the bottom of each row.
Artist | Album | Released |
---|---|---|
Phil Collins | No Jacket Required | 1985 |
Peter Gabriel | So | 1986 |
Huey Lewis and the News | Sports | 1983 |
<table class="table-reset table-light">
<thead>
<tr> <th>Artist</th> <th>Album</th> <th>Released</th> </tr>
</thead>
<tbody>
<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>
<tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
</tbody>
</table>
Create custom theme extensions or use thematic utilities to adjust the look.
Artist | Album | Released |
---|---|---|
Phil Collins | No Jacket Required | 1985 |
Peter Gabriel | So | 1986 |
Huey Lewis and the News | Sports | 1983 |
<table class="table-reset table-light border">
<thead class="bold bg-light-gray">
<tr> <th>Artist</th> <th>Album</th> <th>Released</th> </tr>
</thead>
<tbody>
<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>
<tr> <td>Huey Lewis and the News</td> <td>Sports</td> <td>1983</td> </tr>
</tbody>
</table>
Create a variety of components without writing any new CSS.
Use the media object for things like activity feeds.
Paragraph
<div data-component="media-object" class="clearfix">
<img src="http://placehold.it/128x128" alt="Placeholder image" class="left mr2" />
<div class="oh">
<h2 class="h3">Username</h2>
<p>Paragraph</p>
</div>
</div>
You can also add an element to the right for a flexible center.
<div data-component="double-media-object" class="clearfix">
<img src="http://placehold.it/64x64" alt="Placeholder image" class="left mr2" />
<img src="http://placehold.it/64x64" alt="Placeholder image" class="right ml2" />
<div class="oh">
<h2 class="h3">Double Sided Media Object with a Flexible Center</h2>
</div>
</div>
Create a basic navbar with a combination of layout and nav utilities.
<div data-component="navbar" class="clearfix white bg-dark-gray">
<div class="left">
<div class="bold nav mobile-nav-table nav-big nav-dark">
<a href="#!">Home</a>
<a href="#!">Categories</a>
</div>
</div>
<div class="right">
<div class="bold nav nav-big nav-dark">
<a href="#!">Sign In</a>
</div>
</div>
<div class="oh mobile-hide">
<div class="nav nav-big">
<form class="nav-item right-align form form-light">
<input type="text" class="inline-block input" placeholder="Search">
</form>
</div>
</div>
</div>
Adjust the Sass variables and theme files to customize colors, borders, and other non-structural styles.
<span class="dark-gray">.dark-gray</span>
<span class="mid-gray">.mid-gray</span>
<span class="light-gray">.light-gray</span>
<span class="white">.white</span>
<span class="blue">.blue</span>
<span class="green">.green</span>
<span class="yellow">.yellow</span>
<span class="red">.red</span>
<div class="center white">
<div class="bg-dark-gray">.bg-dark-gray</div>
<div class="bg-mid-gray">.bg-mid-gray</div>
<div class="bg-light-gray">.bg-light-gray</div>
<div class="bg-white">.bg-white</div>
<div class="bg-blue">.bg-blue</div>
<div class="bg-green">.bg-green</div>
<div class="bg-yellow">.bg-yellow</div>
<div class="bg-red">.bg-red</div>
</div>
Adjust the $border-color
, $border-width
, and $border-radius
variables to customize default border styles.
<div class="p1 m1 border bg-light-gray">.border</div>
<div class="p1 m1 border-top bg-light-gray">.border-top</div>
<div class="p1 m1 border-right bg-light-gray">.border-right</div>
<div class="p1 m1 border-bottom bg-light-gray">.border-bottom</div>
<div class="p1 m1 border-left bg-light-gray">.border-left</div>
<div class="p2 mb2 white bg-blue rounded">.rounded</div>
<div class="center p2 mb2 white bg-blue circle" style="width:64px;height:64px">.circle</div>
Add new styles to build upon BASSCSS. Creating reusable styles and keeping a separation of structure and skin will help keep code readable, scalable, and generally easier to maintain.