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.
Responsive by Default
Basscss provides lightweight, performant styles and flexible utilities to design for any device and to help reduce boilerplate in stylesheets.
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.
Unassuming
Modular and customizable typography and layout styles don’t dictate what things should look like and play well with other stylesheets and frameworks.
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.
Getting Started
$ npm install basscss@8.0.2Or use the CDN Link
<link href="https://unpkg.com/basscss@8.0.2/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.
<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>Typography
Change typographic weights, styles, and alignment with these utility styles.
<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.
<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>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>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.
<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.
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; }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.
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) }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>Extend Basscss
There are several optional modules not included in the core Basscss package, including responsive margin and padding, colors, and button styles.
0 Comments