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.
Things behave exactly as expected with immutable utilities and styles that do one thing well to help prevent common pitfalls with CSS.
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.
Basscss strikes a balance between consistency and flexibility to allow for rapid prototyping and quick iterative changes when designing in the browser.
Basscss provides lightweight, performant styles and flexible utilities to design for any device and to help reduce boilerplate in stylesheets.
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
npm install basscss@8.0.2
Or use the CDN Link
<link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
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.
<h2 class="h1">Larger than default h2 style, but semantically correct</h2>
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>
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>
Change the default document flow with these display, float, and other utilities.
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>
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.
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>
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>
Use .border-box
to set box-sizing border-box per element.
<div class="col-6 p2 border-box border">.border-box</div>
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>
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>
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.
<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>
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.
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; }
To increase information density and to better align elements, remove default margins from typographic elements using the margin utilities.
<h1 class="m0">No margin</h1>
<h1 class="mt0">No margin top</h1>
<h1 class="mb0">No margin bottom</h1>
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>
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" />
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.
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.
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) }
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.
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>
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>
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>
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>
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>
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>
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>
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>
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>
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.
<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.
<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.
<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>
This module controls borders and border radii.
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" />
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>
Use these utilities to conditionally hide elements based on viewport width.
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 |
Resize the browser window to see the effect.
<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>
Control wrapping at different screen widths.
<h1>
Responsive Line Break
<br class="xs-hide">
To Control Wrapping
</h1>
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>
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>
There are several optional modules not included in the core Basscss package, including responsive margin and padding, colors, and button styles.
basscss/addons