“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
<link href=" https://unpkg.com/basscss @8.0.2/css/basscss.min.css" rel="stylesheet">
< 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 >
< h2 class = "h1" > Larger than default h2 style, but semantically correct </ h2 >
< 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 >
< ul class = "list-reset" >
< li > List Reset </ li >
< li > Removes bullets </ li >
< li > Removes numbers </ li >
< li > Removes padding </ li >
</ ul >
< 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 >
< 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 >
< div class = "clearfix border" >
< div class = "left border" > .left </ div >
< div class = "right border" > .right </ div >
</ div >
< div class = "col-3" >
< img class = "fit" src = " http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder.svg " />
</ div >
< 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 >
< div class = "col-6 p2 border-box border" > .border-box </ div >
< 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 >
< 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 >
< 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 >
| |
---|---|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
.m0 { margin : zero } .mt0 { margin-top : zero } .mr0 { margin-right : zero } .mb0 { margin-bottom : zero } .ml0 { margin-left : zero } .mx0 { margin-left : zero ; margin-right : zero } .my0 { margin-top : zero ; margin-bottom : zero } .m1 { margin : var (--space- one ) } .mt1 { margin-top : var (--space- one ) } .mr1 { margin-right : var (--space- one ) } .mb1 { margin-bottom : var (--space- one ) } .ml1 { margin-left : var (--space- one ) } .mx1 { margin-left : var (--space- one ) ; margin-right : var (--space- one ) } .my1 { margin-top : var (--space- one ) ; margin-bottom : var (--space- one ) } .m2 { margin : var (--space- two ) } .mt2 { margin-top : var (--space- two ) } .mr2 { margin-right : var (--space- two ) } .mb2 { margin-bottom : var (--space- two ) } .ml2 { margin-left : var (--space- two ) } .mx2 { margin-left : var (--space- two ) ; margin-right : var (--space- two ) } .my2 { margin-top : var (--space- two ) ; margin-bottom : var (--space- two ) } .m3 { margin : var (--space- three ) } .mt3 { margin-top : var (--space- three ) } .mr3 { margin-right : var (--space- three ) } .mb3 { margin-bottom : var (--space- three ) } .ml3 { margin-left : var (--space- three ) } .mx3 { margin-left : var (--space- three ) ; margin-right : var (--space- three ) } .my3 { margin-top : var (--space- three ) ; margin-bottom : var (--space- three ) } .m4 { margin : var (--space- four ) } .mt4 { margin-top : var (--space- four ) } .mr4 { margin-right : var (--space- four ) } .mb4 { margin-bottom : var (--space- four ) } .ml4 { margin-left : var (--space- four ) } .mx4 { margin-left : var (--space- four ) ; margin-right : var (--space- four ) } .my4 { margin-top : var (--space- four ) ; margin-bottom : var (--space- four ) } .mxn1 { margin-left : -var (--space- one ) ; margin-right : -var (--space- one ) ; }
.mxn2 { margin-left : -var (--space- two ) ; margin-right : -var (--space- two ) ; }
.mxn3 { margin-left : -var (--space- three ) ; margin-right : -var (--space- three ) ; }
.mxn4 { margin-left : -var (--space- four ) ; margin-right : -var (--space- four ) ; }
.ml-auto { margin-left : auto } .mr-auto { margin-right : auto } .mx-auto { margin-left : auto ; margin-right : auto ; }
< h1 class = "m0" > No margin </ h1 >
< h1 class = "mt0" > No margin top </ h1 >
< h1 class = "mb0" > No margin bottom </ h1 >
< div class = "mxn1" >
< div class = "m1" > Hamburger </ div >
< div class = "m1" > Hamburger </ div >
< div class = "m1" > Hamburger </ div >
</ div >
< div class = "border" >
< div class = "mxn2" >
< div class = "px2 border" > Padded div </ div >
</ div >
</ div >
< img src = " http://d2v52k3cl9vedd.cloudfront.net/assets/images/placeholder-square.svg "
width = "96"
height = "96"
class = "block mx-auto" />
< div class = "flex" >
< div class = "ml-auto" > Hamburger </ div >
< div > Hot Dog </ div >
</ div >
| |
---|---|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
.p0 { padding : zero } .pt0 { padding-top : zero } .pr0 { padding-right : zero } .pb0 { padding-bottom : zero } .pl0 { padding-left : zero } .px0 { padding-left : zero ; padding-right : zero } .py0 { padding-top : zero ; padding-bottom : zero } .p1 { padding : var (--space- one ) } .pt1 { padding-top : var (--space- one ) } .pr1 { padding-right : var (--space- one ) } .pb1 { padding-bottom : var (--space- one ) } .pl1 { padding-left : var (--space- one ) } .py1 { padding-top : var (--space- one ) ; padding-bottom : var (--space- one ) } .px1 { padding-left : var (--space- one ) ; padding-right : var (--space- one ) } .p2 { padding : var (--space- two ) } .pt2 { padding-top : var (--space- two ) } .pr2 { padding-right : var (--space- two ) } .pb2 { padding-bottom : var (--space- two ) } .pl2 { padding-left : var (--space- two ) } .py2 { padding-top : var (--space- two ) ; padding-bottom : var (--space- two ) } .px2 { padding-left : var (--space- two ) ; padding-right : var (--space- two ) } .p3 { padding : var (--space- three ) } .pt3 { padding-top : var (--space- three ) } .pr3 { padding-right : var (--space- three ) } .pb3 { padding-bottom : var (--space- three ) } .pl3 { padding-left : var (--space- three ) } .py3 { padding-top : var (--space- three ) ; padding-bottom : var (--space- three ) } .px3 { padding-left : var (--space- three ) ; padding-right : var (--space- three ) } .p4 { padding : var (--space- four ) } .pt4 { padding-top : var (--space- four ) } .pr4 { padding-right : var (--space- four ) } .pb4 { padding-bottom : var (--space- four ) } .pl4 { padding-left : var (--space- four ) } .py4 { padding-top : var (--space- four ) ; padding-bottom : var (--space- four ) } .px4 { padding-left : var (--space- four ) ; padding-right : var (--space- four ) }
< 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 >
< div class = "relative" >
< div > Hamburger </ div >
</ div >
< 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 >
< div class = "fixed" > Hamburger </ div >
< div class = "fixed top-0 right-0 m2" > Hamburger </ div >
< div class = "fixed top-0 left-0 right-0 p2 white bg-black" > Fixed bar </ div >
< div class = "fixed z2 top-0 left-0 right-0 p2 white bg-black" > Fixed bar </ div >
< div class = "clearfix" >
</ div >
< div class = "max-width-4 mx-auto" >
< div class = "clearfix" >
</ div >
</ div >
< div class = "clearfix border" >
< div class = "col border" > .col </ div >
< div class = "col border" > .col </ div >
</ div >
< 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 >
| |
---|---|
| |
| |
| |
| |
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< div class = "clearfix mxn2 border" >
< div class = "col-8 px2 mx-auto" >
< div class = "border" > Centered Column </ div >
</ div >
</ div >
< div class = "clearfix border" >
< div class = "sm-col p2 border" > .sm-col </ div >
< div class = "overflow-hidden border" > .overflow-hidden </ div >
</ div >
< 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 >
< div class = "flex" >
< div > Hamburger </ div >
< div > Hot Dog </ div >
</ div >
< 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 >
< div class = "flex flex-column" >
< span > Hamburger </ span >
< span > Hot Dog </ span >
</ div >
< 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 >
< div class = "flex border" >
< div class = "flex-auto border" > Hamburger </ div >
< div class = "border" > Hot Dog </ div >
</ div >
< div class = "flex border" >
< div class = "flex-none border" > Hamburger </ div >
< div class = "border" > Hot Dog </ div >
</ div >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< 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 >
< input type = "text" class = "border-none" placeholder = ".border-none" />
< 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" />
< button class = "btn not-rounded" > Not Rounded </ button >
| |
---|---|
| |
| |
| |
| |
< 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 >
< h1 > Responsive Line Break < br class = "xs-hide" > To Control Wrapping </ h1 >
< form >
< label for = "search" class = "hide" > Search </ label >
< input id = "search" type = "search" class = "input" >
</ form >
< div > Visible </ div >
< div class = "display-none" > Hidden </ div >