Lightning Fast Modular CSS with No Side Effects
Code with Confidence
Using clear, humanized naming conventions, Basscss is quick to internalize and easy to reason about while speeding up development time with more scalable, more readable code.
No Side Effects
Things behave exactly as expected with immutable utilities and styles that do one thing well to help prevent common pitfalls with CSS.
Composable
Reusable, interoperable styles work like building blocks to lay the foundation for any stylesheet and can be mixed and matched in any number of combinations.
Designed for Design
Basscss strikes a balance between consistency and flexibility to allow for rapid prototyping and quick iterative changes when designing in the browser.
Responsive by Default
Basscss provides lightweight, performant styles and flexible utilities to design for any device and to help reduce boilerplate in stylesheets.
Unassuming
Modular and customizable typography and layout styles don’t dictate what things should look like and play well with other stylesheets and frameworks.
“Basscss is an atomic class based CSS library... A very good one! But I really hated it at the time. But I don’t hate it anymore!”
– Sam Thurman
“I used Basscss for http://nodeconf.com and it was such a pleasure to work with. I think I’ll use it for my personal site too!”
– Karolina Szczur
“Writing CSS is easy. Writing long lived maintainable CSS in a real webapp is hard. Until Jon Gold introduced me to [Basscss]”
– Joe Walnes
“Basscss is so good it’s worth losing sleep over tonight.”
– Justin Maxwell
“Probably does everything you use Bootstrap for, but in 3.5kb”
– Michael Martin
“Been using Basscss to rapidly prototype ideas for BuzzFeed. So good.”
– Cap Watkins
Getting Started
npm install [email protected]
Or use the CDN Link
<link href="https://unpkg.com/[email protected]/css/basscss.min.css" rel="stylesheet">
Type Scale
This module provides utilities for adjusting font-size.
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>
These are especially useful for altering the visual appearance of semantically correct headings.
Larger than default h2 style, but semantically correct
<h2 class="h1">Larger than default h2 style, but semantically correct</h2>
Typography
Change typographic weights, styles, and alignment with these utility styles.
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.
No wrap
Underline
Truncate
Font Family Inherit
Font Size Inherit
Text Decoration None<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>
<p class="nowrap">No wrap</p>
<p class="underline">Underline</p>
<p class="truncate">Truncate</p>
<p class="font-family-inherit">Font Family Inherit</p>
<p class="font-size-inherit">Font Size Inherit</p>
<a class="text-decoration-none">Text Decoration None</a>
Lists
To remove default list styling, use .list-reset.
- List Reset
- Removes bullets
- Removes numbers
- Removes padding
<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.
- Half-Smoke
- Kielbasa
- Bologna
- Prosciutto
<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>
Layout
Change the default document flow with these display, float, and other utilities.
Display
To adjust the display of an element, use the .block, .inline, .inline-block, .table, and .table-cell utilities.
<div class="inline">inline</div>
<div class="inline-block">inline-block</div>
<a href="#" class="block">block</a>
<div class="table">
<div class="table-cell">table-cell</div>
<div class="table-cell">table-cell</div>
</div>
Overflow
To adjust element overflow, use .overflow-hidden, .overflow-scroll, and .overflow-auto.
.overflow-hidden can also be used to create a new block formatting context or clear floats.
Floats
Use .clearfix, .left, and .right to clear and set floats.
<div class="clearfix border">
<div class="left border">.left</div>
<div class="right border">.right</div>
</div>
Max Width
Use .fit to set max-width 100%.
<div class="col-3">
<img class="fit" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder.svg" />
</div>
Use max-width utilities to control the width of containers.
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.
Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.
<p class="max-width-1">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
<p class="max-width-2">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
<p class="max-width-3">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
<p class="max-width-4">Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.</p>
Box-Sizing Border-Box
Use .border-box to set box-sizing border-box per element.
<div class="col-6 p2 border-box border">.border-box</div>
Media Object
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 border">
<div class="left p2 mr1 border">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.
Body Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.
<div class="clearfix mb2 border">
<div class="left p2 mr1 border">Image</div>
<div class="right p2 ml1 border">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>
Align
Adjust vertical alignment with these utilities.
To adjust the alignment of an element, use .align-baseline, .align-top, .align-middle or .align-bottom.
The vertical-align property only applies to inline or table-cell boxes.
Hamburger
<div class="overflow-auto">
<div class="table">
<div class="table-cell"><h1>Hamburger</h1></div>
<div class="table-cell align-baseline">.align-baseline</div>
<div class="table-cell align-top">.align-top</div>
<div class="table-cell align-middle">.align-middle</div>
<div class="table-cell align-bottom">.align-bottom</div>
</div>
</div>
Margin
Immutable margin utilities are based on a global white space scale defined with custom properties. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.
Naming Convention
Due to the ubiquitous nature of setting margin, these utilities use a shorthand naming convention.
| Shorthand | Description |
|---|---|
| m | Margin |
| t | Top |
| r | Right |
| b | Bottom |
| l | Left |
| x | X-axis (left and right) |
| y | Y-axis (top and bottom) |
| n | Negative |
| 0 | 0 reset |
| 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 white space scale. Negative x-axis margins are used to offset margins and padding of child elements. 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 }
.mx0 { margin-left: 0; margin-right: 0 }
.my0 { margin-top: 0; margin-bottom: 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) }
.mx1 { margin-left: var(--space-1); margin-right: var(--space-1) }
.my1 { margin-top: var(--space-1); margin-bottom: 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) }
.mx2 { margin-left: var(--space-2); margin-right: var(--space-2) }
.my2 { margin-top: var(--space-2); margin-bottom: 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) }
.mx3 { margin-left: var(--space-3); margin-right: var(--space-3) }
.my3 { margin-top: var(--space-3); margin-bottom: 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) }
.mx4 { margin-left: var(--space-4); margin-right: var(--space-4) }
.my4 { margin-top: var(--space-4); margin-bottom: 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); }
.ml-auto { margin-left: auto }
.mr-auto { margin-right: auto }
.mx-auto { margin-left: auto; margin-right: auto; }Resetting Margins
To increase information density and to better align elements, remove default margins from typographic elements using the margin utilities.
No margin
No margin top
No margin bottom
<h1 class="m0">No margin</h1>
<h1 class="mt0">No margin top</h1>
<h1 class="mb0">No margin bottom</h1>
Add Spacing
Add spacing around elements using a combination of margin utilities.
<div class="mxn1">
<div class="m1">Hamburger</div>
<div class="m1">Hamburger</div>
<div class="m1">Hamburger</div>
</div>
The negative margin utilities also work with padded children.
<div class="border">
<div class="mxn2">
<div class="px2 border">Padded div</div>
</div>
</div>
Center Elements
Block elements with a set width can be centered with .mx-auto.
<img src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg"
width="96"
height="96"
class="block mx-auto" />
Space Flexbox Items
The .ml-auto and .mr-auto utilities can be used to add spacing around flexbox items.
<div class="flex">
<div class="ml-auto">Hamburger</div>
<div>Hot Dog</div>
</div>
Margins should never be declared outside of these utilities. This is meant to help create consistency and avoid magic numbers. If, for some reason, the default white space scale does not suit your design, customize and extend it before using it.
Padding
Immutable padding utilities are based on a global white space scale defined with custom properties. These can dramatically help reduce the size of large stylesheets and allow for greater flexibility and quicker iteration when designing in the browser.
Naming Convention
Due to the ubiquitous nature of setting padding, these utilities use a shorthand naming convention.
| Shorthand | Description |
|---|---|
| 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) |
| 0 | 0 reset |
| 1 | --space-1 (default .5rem) |
| 2 | --space-2 (default 1rem) |
| 3 | --space-3 (default 2rem) |
| 4 | --space-4 (default 4rem) |
Padding utilities are only available in symmetrical orientations. This is to normalize the spacing used around elements and maintain a consistent visual rhythm.
.p0 { padding: 0 }
.pt0 { padding-top: 0 }
.pr0 { padding-right: 0 }
.pb0 { padding-bottom: 0 }
.pl0 { padding-left: 0 }
.px0 { padding-left: 0; padding-right: 0 }
.py0 { padding-top: 0; padding-bottom: 0 }
.p1 { padding: var(--space-1) }
.pt1 { padding-top: var(--space-1) }
.pr1 { padding-right: var(--space-1) }
.pb1 { padding-bottom: var(--space-1) }
.pl1 { padding-left: 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) }
.pt2 { padding-top: var(--space-2) }
.pr2 { padding-right: var(--space-2) }
.pb2 { padding-bottom: var(--space-2) }
.pl2 { padding-left: 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) }
.pt3 { padding-top: var(--space-3) }
.pr3 { padding-right: var(--space-3) }
.pb3 { padding-bottom: var(--space-3) }
.pl3 { padding-left: 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) }
.pt4 { padding-top: var(--space-4) }
.pr4 { padding-right: var(--space-4) }
.pb4 { padding-bottom: var(--space-4) }
.pl4 { padding-left: 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) }Box
To create a simple box component, use padding along with color utilities.
<div class="p2 bg-white border rounded">
A simple box
</div>
<div class="overflow-hidden border rounded">
<div class="p2 bold white bg-blue">
Panel Header
</div>
<div class="p2">
Panel Body
</div>
<div class="p2 bg-silver">
Panel Footer
</div>
</div>
Padding should never be declared outside of these utilities. This is meant to help create consistency and avoid magic numbers. If, for some reason, the default white space scale does not suit your design, customize and extend it before use.
Position
This module includes basic positioning utilities to alter the default document flow.
Use positions with caution. They are often unnecessary and commonly misused.
Use .relative to create a new stacking context.
<div class="relative">
<div>Hamburger</div>
</div>
Use .absolute to move elements out of the default document flow.
<div class="relative mb4">
<div>Hamburger</div>
<div class="absolute bg-white border rounded">
<a href="#" class="block p1">Dropdown Action</a>
<a href="#" class="block p1">Action</a>
</div>
</div>
Use .fixed to position an element relative to the viewport. Fixed positioning is notoriously tricky to use well and can lead to inaccessible content and unwanted side effects. Use fixed positioning with caution.
<div class="fixed">
Hamburger
</div>
Note: fixed positioning has been disabled here for demonstration only.
To anchor to a particular side, use .top-0, .right-0, .bottom-0, or .left-0. Margin and padding utilities can be used to space elements apart.
<div class="fixed top-0 right-0 m2">
Hamburger
</div>
To fill an entire width or height, use opposing directions.
<div class="fixed top-0 left-0 right-0 p2 white bg-black">
Fixed bar
</div>
To ensure the desired stacking order, use z-index utilities.
<div class="fixed z2 top-0 left-0 right-0 p2 white bg-black">
Fixed bar
</div>
Grid
This module contains responsive float and width utilities to create a variety of grid layouts. Use this module in combination with layout, white space, and other utilities.
Start by using a .clearfix container.
<div class="clearfix">
</div>
To optionally set a max-width, use a utility from the basscss-layout module.
The .mx-auto utility sets margin left and right auto to center the container.
<div class="max-width-4 mx-auto">
<div class="clearfix">
</div>
</div>
Float columns using the .col style. This also sets box-sizing border-box for each column.
<div class="clearfix border">
<div class="col border">.col</div>
<div class="col border">.col</div>
</div>
Add column width utilities. The total column-width number should add up to 12.
<div class="clearfix border">
<div class="col col-6 border">.col.col-6</div>
<div class="col col-6 border">.col.col-6</div>
</div>
Responsive Grid
Use breakpoint-prefixed column utilities to change the grid at different screen widths.
All breakpoint-based styles in Basscss follow the same 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) |
Apply the grid from the small breakpoint and up with the .sm-col and .sm-col-6 utilities.
<div class="clearfix border">
<div class="sm-col sm-col-6 border">.sm-col.sm-col-6</div>
<div class="sm-col sm-col-6 border">.sm-col.sm-col-6</div>
</div>
Add width adjustments for larger breakpoints. Resize the viewport width of the browser to see the effect.
<div class="clearfix border">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 border">.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 border">.sm-col.sm-col-6.md-col-7.lg-col-8</div>
</div>
Gutters
Use padding and negative margin utilities to create gutters based on the white space scale. The negative margin ensures content inside each column lines up with content outside of the grid. 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.
Create gutters with a width of 2 units using .mxn2 and .px2.
<div class="clearfix mxn2 border">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div class="border">.px2</div></div>
<div class="sm-col sm-col-6 md-col-7 lg-col-8 px2"><div class="border">.px2</div></div>
</div>
For larger or smaller gutters, use any other step on the white space scale.
<div class="clearfix mxn1 border">
<div class="col col-6 px1"><div class="border">.px1</div></div>
<div class="col col-6 px1"><div class="border">.px1</div></div>
</div>
<div class="clearfix mxn3 border">
<div class="col col-6 px3"><div class="border">.px3</div></div>
<div class="col col-6 px3"><div class="border">.px3</div></div>
</div>
Nesting
Nest entire grid structures within columns to created nested grids.
<div class="clearfix mxn2 border">
<div class="sm-col sm-col-6 md-col-5 lg-col-4 px2"><div class="border">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 class="border">Nested</div></div>
<div class="col col-6 px2"><div class="border">Nested</div></div>
</div>
</div>
</div>
Reversed
To reverse the order of columns, use the .col-right class to float columns right.
<div class="clearfix border">
<div class="col-right col-6 border">.col-right.col-6</div>
<div class="col col-6 border">.col.col-6</div>
</div>
Centering Columns
Use the .mx-auto class to center columns within their containers.
<div class="clearfix mxn2 border">
<div class="col-8 px2 mx-auto">
<div class="border">Centered Column</div>
</div>
</div>
Breakpoint Based Floats
Column float utilities can be used independently of width utilities to control floating at different breakpoints. This example demonstrates a responsive media object.
<div class="clearfix border">
<div class="sm-col p2 border">.sm-col</div>
<div class="overflow-hidden border">.overflow-hidden</div>
</div>
Width Utilities
Column width utilities can also be used independently to add percentage based widths to any block or inline-block element.
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.
<div class="border">
<div class="right sm-col-6 md-col-4 p2 border">.sm-col-6.md-col-4</div>
<p>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.</p>
</div>
Flexbox
These flexbox-based utilities can replace the need for a grid system in many instances, and provide powerful constraint-based micro-layout solutions. To learn more about the flexbox module, see Using CSS flexible boxes and the CSS Flexible Box Layout Module Specification.
To set a container to display flex, add the .flex class.
<div class="flex">
<div>Hamburger</div>
<div>Hot Dog</div>
</div>
To set a container to display flex at certain breakpoints, use the .sm-flex, .md-flex, and .lg-flex styles.
<div class="sm-flex">
<div>Hamburger</div>
<div>Hot Dog</div>
</div>
<div class="md-flex">
<div>Hamburger</div>
<div>Hot Dog</div>
</div>
<div class="lg-flex">
<div>Hamburger</div>
<div>Hot Dog</div>
</div>
To set a flexbox container to column direction, use .flex-column.
<div class="flex flex-column">
<span>Hamburger</span>
<span>Hot Dog</span>
</div>
To enable wrapping of flexbox containers, use .flex-wrap.
<div class="flex flex-wrap">
<div class="col-4">Hamburger</div>
<div class="col-4">Hamburger</div>
<div class="col-4">Hamburger</div>
<div class="col-4">Hamburger</div>
<div class="col-4">Hamburger</div>
</div>
To set a flexbox item to automatically fill the available space, use the flex-auto utility.
<div class="flex border">
<div class="flex-auto border">Hamburger</div>
<div class="border">Hot Dog</div>
</div>
To prevent a flexbox item from growing or shrinking, use the flex-none utility.
<div class="flex border">
<div class="flex-none border">Hamburger</div>
<div class="border">Hot Dog</div>
</div>
To control alignment of flexbox items, use the align-items utilities. These styles uses a shorthand naming convention. items for the align-items property and start and end for the flex-start and flex-end values.
Hamburger
Hamburger
Hamburger
Hamburger
Hamburger
<div class="flex items-start border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-end border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-baseline border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-stretch border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
To align flexbox items on an item-by-item basis, use the align-self utilities. These override values set by the align-items property. A shorthand naming convention of self for the align-self property is used.
Hamburger
Hamburger
Hamburger
Hamburger
Hamburger
<div class="flex items-center border">
<h1 class="self-start border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
<h1 class="self-end border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-start border">
<h1 class="self-center border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
<h1 class="self-baseline border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex items-center border">
<h1 class="self-stretch border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
To control the spacing for items on the main axis, use the justify-content utilities. These styles use a shorhand naming convention. justify for the justify-content property and around and between for the space-around and space-between values.
Hamburger
Hamburger
Hamburger
Hamburger
Hamburger
<div class="flex justify-start border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex justify-end border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex justify-center border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex justify-between border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
<div class="flex justify-around border">
<h1 class="border">Hamburger</h1>
<div class="border">Hot Dog</div>
</div>
To align items along the cross-axis, use the align-content utilities. A shorthand naming convention content is used for the align-content property.
<div class="flex flex-wrap content-start border" style="min-height: 128px">
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
</div>
<div class="flex flex-wrap content-end border" style="min-height: 128px">
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
</div>
<div class="flex flex-wrap content-center border" style="min-height: 128px">
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
</div>
<div class="flex flex-wrap content-between border" style="min-height: 128px">
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
</div>
<div class="flex flex-wrap content-around border" style="min-height: 128px">
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
</div>
<div class="flex flex-wrap content-stretch border" style="min-height: 128px">
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
<div class="col-6 border">Hamburger</div>
</div>
To change the order of flexbox items, use the order utilities.
<div class="flex">
<div class="order-2">.order-2</div>
<div class="order-1">.order-1</div>
<div class="order-last">.order-last</div>
<div class="order-3">.order-3</div>
<div class="order-0">.order-0</div>
</div>
Border
This module controls borders and border radii.
Borders
Add borders with these border utilities.
<div class="p1 m1 border">.border</div>
<div class="p1 m1 border-top">.border-top</div>
<div class="p1 m1 border-right">.border-right</div>
<div class="p1 m1 border-bottom">.border-bottom</div>
<div class="p1 m1 border-left">.border-left</div>
Remove borders with the .border-none utility.
<input type="text" class="border-none" placeholder=".border-none" />
Border Radii
Utility styles for border radii can be used to style images and other elements.
<img class="rounded" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />
<img class="circle" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />
<img class="rounded-top" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />
<img class="rounded-right" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />
<img class="rounded-bottom" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" width="64" height="64" />
<img class="rounded-left" src="http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg" 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="btn not-rounded">Not Rounded</button>
Hide
Use these utilities to conditionally hide elements based on viewport width.
Prefix Naming Convention
Hide utilities differ from other breakpoint-based styles in Basscss. Each hide utility only applies to one breakpoint range.
| Prefix | Description |
|---|---|
| xs- | below 40em |
| sm- | 40em – 52em |
| md- | 52em – 64em |
| lg- | above 64em |
Hide content
Resize the browser window to see the effect.
Hidden below 40em
Hidden between 40 and 52em
Hidden between 52 and 64em
Hidden above 64em
<h3 class="xs-hide">Hidden below 40em</h3>
<h3 class="sm-hide red">Hidden between 40 and 52em</h3>
<h3 class="md-hide red">Hidden between 52 and 64em</h3>
<h3 class="lg-hide red">Hidden above 64em</h3>
Responsive Line Break
Control wrapping at different screen widths.
Responsive Line Break
To Control Wrapping
<h1>
Responsive Line Break
<br class="xs-hide">
To Control Wrapping
</h1>
Accessible Hide
To visually hide things like form labels in an accessible way, use the .hide utility.
<form>
<label for="search" class="hide">Search</label>
<input id="search" type="search" class="input">
</form>
Display None
Set display none with this utility. Use this with caution as it might cause accessibility issues depending on where it’s used.
<div>Visible</div>
<div class="display-none">Hidden</div>
Extend Basscss
There are several optional modules not included in the core Basscss package, including responsive margin and padding, colors, and button styles.
basscss/addons