5.0.4 • Published 6 years ago

turbo-scss v5.0.4

Weekly downloads
7
License
MIT
Repository
github
Last release
6 years ago

⚠️ Project has been discontinued in favor of Cocktail

logo

turbo-scss is a helper set of composable human-readable CSS classes. Stay calm and don’t ever repeat those frequent declarations.

Features

:sunglasses: Modular and build-agnostic with SCSS. Grab what you need and be good to go.
:sunglasses: Standalone with no third-party dependencies like normalize, sanitize, reset etc.
:sunglasses: Handful of utility-classes. This is not a whole set of every CSS rule, just most useful ones.
:sunglasses: Mobile-first breakpoints for vital classes: 576px, 768px, 992px, 1200px and 1600px.
:sunglasses: New era with 12 column CSS grid and flexbox.
:sunglasses: Prefixed for browsers with >1% of usage.

:sweat_smile: No old junk tweaks like clearfix, IE filter etc.
:sweat_smile: No any !important statement on any rule (except of 2 debug classes). So if you want to, you can handle styling the hard way in some cases.
:sweat_smile: No styling of basic HTML elements.
:sweat_smile: No ugly unreadable class name abbreviations like mb1, fz4, ws-n etc. Put the clarity over the brevity.

Getting started

  • Just drop turbo.css or minified turbo.min.css in your project like so:
<head>
	<link rel="stylesheet" href="turbo.min.css">
</head>
  • You can get it right away via CDN:
<head>
	<link rel="stylesheet" href="https://unpkg.com/turbo-scss@5.0.2/dist/turbo.min.css">
</head>
  • To customize the build, install it via npm:
npm install turbo-scss

Docs

Breakpoint support

↑ Back to contents

Certain classes have mobile-first breakpoint trigger to activate the rule. Such classes are marked with :heavy_check_mark: symbol in according table column. That means class can have a specific suffix, indicating from which breakpoint it should work.

Breakpoint list:

SuffixDescriptionMedia query
smSmartphone@media screen and (min-width: 576px)
mdTablet@media screen and (min-width: 768px)
lgDesktop@media screen and (min-width: 992px)
xlWide desktop@media screen and (min-width: 1200px)
xxlHuge desktop@media screen and (min-width: 1600px)

Usage examples:

ClassDescription
grid-gap-4--xxlWith 1600px viewport width and above, set grid-gap: 2rem
width-50--lgWith 992px viewport width and above, set width: 50%
hidden--mdWith 768px viewport width and above, set display: none

Box sizing

↑ Back to contents

ClassStyleBreakpoint support
border-boxbox-sizing: border-box:x:
content-boxbox-sizing: content-box:x:

Display

↑ Back to contents

ClassStyleBreakpoint support
blockdisplay: block:heavy_check_mark:
inline-blockdisplay: inline-block:heavy_check_mark:
inlinedisplay: inline:heavy_check_mark:
tabledisplay: table:heavy_check_mark:
table-celldisplay: table-cell:heavy_check_mark:
flexdisplay: flex:heavy_check_mark:
inline-flexdisplay: inline-flex:heavy_check_mark:
griddisplay: gridgrid-template-columns: repeat(12, 1fr):heavy_check_mark:
hiddendisplay: none;:heavy_check_mark:

Flex

↑ Back to contents

ClassStyleBreakpoint support
justify-startjustify-content: flex-start:heavy_check_mark:
justify-endjustify-content: flex-end:heavy_check_mark:
justify-centerjustify-content: center:heavy_check_mark:
justify-betweenjustify-content: space-between:heavy_check_mark:
justify-aroundjustify-content: space-around:heavy_check_mark:
items-startalign-items: flex-start:heavy_check_mark:
items-endalign-items: flex-end:heavy_check_mark:
items-centeralign-items: center:heavy_check_mark:
items-baselinealign-items: baseline:heavy_check_mark:
items-stretchalign-items: stretch:heavy_check_mark:
flex-columnflex-direction: column:heavy_check_mark:
flex-rowflex-direction: row:heavy_check_mark:
flex-wrapflex-wrap: wrap:heavy_check_mark:
flex-nowrapflex-wrap: nowrap:heavy_check_mark:
flex-wrap-reverseflex-wrap: wrap-reverse:heavy_check_mark:
flex-column-reverseflex-direction: column-reverse:heavy_check_mark:
flex-row-reverseflex-direction: row-reverse:heavy_check_mark:
self-startalign-self: flex-start:heavy_check_mark:
self-endalign-self: flex-end:heavy_check_mark:
self-centeralign-self: center:heavy_check_mark:
self-baselinealign-self: baseline:heavy_check_mark:
self-stretchalign-self: stretch;:heavy_check_mark:
content-startalign-content: flex-start:heavy_check_mark:
content-endalign-content: flex-end:heavy_check_mark:
content-centeralign-content: center:heavy_check_mark:
content-betweenalign-content: space-between:heavy_check_mark:
content-aroundalign-content: space-around:heavy_check_mark:
content-stretchalign-content: stretch:heavy_check_mark:
flex-no-growflex-grow: 0:heavy_check_mark:
flex-growflex-grow: 1:heavy_check_mark:
flex-no-shrinkflex-shrink: 0:heavy_check_mark:
flex-shrinkflex-shrink: 1:heavy_check_mark:
flex-basis-autoflex-basis: auto:heavy_check_mark:
flex-no-basisflex-basis: 0:heavy_check_mark:

Grid

↑ Back to contents

ClassStyleBreakpoint support
grid-column-1grid-column: span 1 / span 1:heavy_check_mark:
grid-column-2grid-column: span 2 / span 2:heavy_check_mark:
grid-column-3grid-column: span 3 / span 3:heavy_check_mark:
grid-column-4grid-column: span 4 / span 4:heavy_check_mark:
grid-column-5grid-column: span 5 / span 5:heavy_check_mark:
grid-column-6grid-column: span 6 / span 6:heavy_check_mark:
grid-column-7grid-column: span 7 / span 7:heavy_check_mark:
grid-column-8grid-column: span 8 / span 8:heavy_check_mark:
grid-column-9grid-column: span 9 / span 9:heavy_check_mark:
grid-column-10grid-column: span 10 / span 10:heavy_check_mark:
grid-column-11grid-column: span 11 / span 11:heavy_check_mark:
grid-column-12grid-column: span 12 / span 12:heavy_check_mark:
grid-column-gap-1grid-column-gap: 0.25rem:heavy_check_mark:
grid-column-gap-2grid-column-gap: 0.5rem:heavy_check_mark:
grid-column-gap-3grid-column-gap: 1rem:heavy_check_mark:
grid-column-gap-4grid-column-gap: 2rem:heavy_check_mark:
grid-column-gap-5grid-column-gap: 3rem:heavy_check_mark:
grid-column-gap-6grid-column-gap: 4rem:heavy_check_mark:
grid-column-gap-7grid-column-gap: 5rem:heavy_check_mark:
grid-column-gap-8grid-column-gap: 6rem:heavy_check_mark:
grid-row-gap-1grid-row-gap: 0.25rem:heavy_check_mark:
grid-row-gap-2grid-row-gap: 0.5rem:heavy_check_mark:
grid-row-gap-3grid-row-gap: 1rem:heavy_check_mark:
grid-row-gap-4grid-row-gap: 2rem:heavy_check_mark:
grid-row-gap-5grid-row-gap: 3rem:heavy_check_mark:
grid-row-gap-6grid-row-gap: 4rem:heavy_check_mark:
grid-row-gap-7grid-row-gap: 5rem:heavy_check_mark:
grid-row-gap-8grid-row-gap: 6rem:heavy_check_mark:
grid-gap-1grid-gap: 0.25rem:heavy_check_mark:
grid-gap-2grid-gap: 0.5rem:heavy_check_mark:
grid-gap-3grid-gap: 1rem:heavy_check_mark:
grid-gap-4grid-gap: 2rem:heavy_check_mark:
grid-gap-5grid-gap: 3rem:heavy_check_mark:
grid-gap-6grid-gap: 4rem:heavy_check_mark:
grid-gap-7grid-gap: 5rem:heavy_check_mark:
grid-gap-8grid-gap: 6rem:heavy_check_mark:

Overflow

↑ Back to contents

ClassStyleBreakpoint support
overflow-hiddenoverflow: hidden:heavy_check_mark:
overflow-scrolloverflow: scroll:heavy_check_mark:
overflow-autooverflow: auto:heavy_check_mark:
overflow-x-hiddenoverflow-x: hidden:heavy_check_mark:
overflow-x-scrolloverflow-x: scroll:heavy_check_mark:
overflow-x-autooverflow-x: auto:heavy_check_mark:
overflow-y-hiddenoverflow-y: hidden:heavy_check_mark:
overflow-y-scrolloverflow-y: scroll:heavy_check_mark:
overflow-y-autooverflow-y: auto:heavy_check_mark:

Float

↑ Back to contents

ClassStyleBreakpoint support
float-leftfloat: left:heavy_check_mark:
float-rightfloat: right:heavy_check_mark:
float-nonefloat: none:heavy_check_mark:

Position

↑ Back to contents

ClassStyleBreakpoint support
relativeposition: relative:heavy_check_mark:
absoluteposition: absolute:heavy_check_mark:
top-0top: 0:heavy_check_mark:
right-0right: 0:heavy_check_mark:
bottom-0bottom: 0:heavy_check_mark:
left-0left: 0:heavy_check_mark:
top-fulltop: 100%:heavy_check_mark:
right-fullright: 100%:heavy_check_mark:
bottom-fullbottom: 100%:heavy_check_mark:
left-fullleft: 100%:heavy_check_mark:
fixedposition: fixed:heavy_check_mark:
filltop: 0right: 0bottom: 0left: 0:heavy_check_mark:
center-xleft: 50%transform: translateX(-50%):heavy_check_mark:
center-ytop: 50%transform: translateY(-50%):heavy_check_mark:
centertop: 50%left: 50%transform: translate(-50%, -50%):heavy_check_mark:

Z-index

↑ Back to contents

ClassStyleBreakpoint support
z-0z-index: 0:x:
z-1z-index: 1:x:
z-2z-index: 2:x:
z-3z-index: 3:x:
z-4z-index: 4:x:
z-5z-index: 5:x:
z-6z-index: 6:x:
z-7z-index: 7:x:
z-8z-index: 8:x:
z-9z-index: 9:x:
z-10z-index: 10:x:
z-maxz-index: 2147483647:x:

Toggle

↑ Back to contents

ClassStyleBreakpoint support
toggle-controlToggle toggle-content somewhere after it 1:x:

1.

.toggle-control:checked ~ .toggle-content {
display: block;
}

Width

↑ Back to contents

ClassStyleBreakpoint support
max-width-fullmax-width: 100%:heavy_check_mark:
min-width-nonemin-width: 0:heavy_check_mark:
min-width-fullmin-width: 100%:heavy_check_mark:
width-fullwidth: 100%:heavy_check_mark:
width-autowidth: auto:heavy_check_mark:
width-5width: 5%:heavy_check_mark:
width-10width: 10%:heavy_check_mark:
width-15width: 15%:heavy_check_mark:
width-20width: 20%:heavy_check_mark:
width-25width: 25%:heavy_check_mark:
width-30width: 30%:heavy_check_mark:
width-35width: 35%:heavy_check_mark:
width-40width: 40%:heavy_check_mark:
width-45width: 45%:heavy_check_mark:
width-50width: 50%:heavy_check_mark:
width-55width: 55%:heavy_check_mark:
width-60width: 60%:heavy_check_mark:
width-65width: 65%:heavy_check_mark:
width-70width: 70%:heavy_check_mark:
width-75width: 75%:heavy_check_mark:
width-80width: 80%:heavy_check_mark:
width-85width: 85%:heavy_check_mark:
width-90width: 90%:heavy_check_mark:
width-95width: 95%:heavy_check_mark:

Height

↑ Back to contents

ClassStyleBreakpoint support
max-height-fullmax-height: 100%:heavy_check_mark:
min-height-fullmin-height: 100%:heavy_check_mark:
height-fullheight: 100%:heavy_check_mark:

Margin

↑ Back to contents

ClassStyleBreakpoint support
margin-top-0margin-top: 0:heavy_check_mark:
margin-top-1margin-top: 0.25rem:heavy_check_mark:
margin-top-2margin-top: 0.5rem:heavy_check_mark:
margin-top-3margin-top: 1rem:heavy_check_mark:
margin-top-4margin-top: 2rem:heavy_check_mark:
margin-top-5margin-top: 4rem:heavy_check_mark:
margin-top-6margin-top: 8rem:heavy_check_mark:
margin-right-0margin-right: 0:heavy_check_mark:
margin-right-1margin-right: 0.25rem:heavy_check_mark:
margin-right-2margin-right: 0.5rem:heavy_check_mark:
margin-right-3margin-right: 1rem:heavy_check_mark:
margin-right-4margin-right: 2rem:heavy_check_mark:
margin-right-5margin-right: 4rem:heavy_check_mark:
margin-right-6margin-right: 8rem:heavy_check_mark:
margin-bottom-0margin-bottom: 0:heavy_check_mark:
margin-bottom-1margin-bottom: 0.25rem:heavy_check_mark:
margin-bottom-2margin-bottom: 0.5rem:heavy_check_mark:
margin-bottom-3margin-bottom: 1rem:heavy_check_mark:
margin-bottom-4margin-bottom: 2rem:heavy_check_mark:
margin-bottom-5margin-bottom: 4rem:heavy_check_mark:
margin-bottom-6margin-bottom: 8rem:heavy_check_mark:
margin-left-0margin-left: 0:heavy_check_mark:
margin-left-1margin-left: 0.25rem:heavy_check_mark:
margin-left-2margin-left: 0.5rem:heavy_check_mark:
margin-left-3margin-left: 1rem:heavy_check_mark:
margin-left-4margin-left: 2rem:heavy_check_mark:
margin-left-5margin-left: 4rem:heavy_check_mark:
margin-left-6margin-left: 8rem:heavy_check_mark:
margin-x-0margin-left: 0margin-right: 0:heavy_check_mark:
margin-x-1margin-left: 0.25remmargin-right: 0.25rem:heavy_check_mark:
margin-x-2margin-left: 0.5remmargin-right: 0.5rem:heavy_check_mark:
margin-x-3margin-left: 1remmargin-right: 1rem:heavy_check_mark:
margin-x-4margin-left: 2remmargin-right: 2rem:heavy_check_mark:
margin-x-5margin-left: 4remmargin-right: 4rem:heavy_check_mark:
margin-x-6margin-left: 8remmargin-right: 8rem:heavy_check_mark:
margin-y-0margin-top: 0margin-bottom: 0:heavy_check_mark:
margin-y-1margin-top: 0.25remmargin-bottom: 0.25rem:heavy_check_mark:
margin-y-2margin-top: 0.5remmargin-bottom: 0.5rem:heavy_check_mark:
margin-y-3margin-top: 1remmargin-bottom: 1rem:heavy_check_mark:
margin-y-4margin-top: 2remmargin-bottom: 2rem:heavy_check_mark:
margin-y-5margin-top: 4remmargin-bottom: 4rem:heavy_check_mark:
margin-y-6margin-top: 8remmargin-bottom: 8rem:heavy_check_mark:
margin-x-automargin-left: automargin-right: auto:heavy_check_mark:
margin-y-automargin-top: automargin-bottom: auto:heavy_check_mark:

Padding

↑ Back to contents

ClassStyleBreakpoint support
padding-top-0padding-top: 0:heavy_check_mark:
padding-top-1padding-top: 0.25rem:heavy_check_mark:
padding-top-2padding-top: 0.5rem:heavy_check_mark:
padding-top-3padding-top: 1rem:heavy_check_mark:
padding-top-4padding-top: 2rem:heavy_check_mark:
padding-top-5padding-top: 4rem:heavy_check_mark:
padding-top-6padding-top: 8rem:heavy_check_mark:
padding-right-0padding-right: 0:heavy_check_mark:
padding-right-1padding-right: 0.25rem:heavy_check_mark:
padding-right-2padding-right: 0.5rem:heavy_check_mark:
padding-right-3padding-right: 1rem:heavy_check_mark:
padding-right-4padding-right: 2rem:heavy_check_mark:
padding-right-5padding-right: 4rem:heavy_check_mark:
padding-right-6padding-right: 8rem:heavy_check_mark:
padding-bottom-0padding-bottom: 0:heavy_check_mark:
padding-bottom-1padding-bottom: 0.25rem:heavy_check_mark:
padding-bottom-2padding-bottom: 0.5rem:heavy_check_mark:
padding-bottom-3padding-bottom: 1rem:heavy_check_mark:
padding-bottom-4padding-bottom: 2rem:heavy_check_mark:
padding-bottom-5padding-bottom: 4rem:heavy_check_mark:
padding-bottom-6padding-bottom: 8rem:heavy_check_mark:
padding-left-0padding-left: 0:heavy_check_mark:
padding-left-1padding-left: 0.25rem:heavy_check_mark:
padding-left-2padding-left: 0.5rem:heavy_check_mark:
padding-left-3padding-left: 1rem:heavy_check_mark:
padding-left-4padding-left: 2rem:heavy_check_mark:
padding-left-5padding-left: 4rem:heavy_check_mark:
padding-left-6padding-left: 8rem:heavy_check_mark:
padding-x-0padding-left: 0padding-right: 0:heavy_check_mark:
padding-x-1padding-left: 0.25rempadding-right: 0.25rem:heavy_check_mark:
padding-x-2padding-left: 0.5rempadding-right: 0.5rem:heavy_check_mark:
padding-x-3padding-left: 1rempadding-right: 1rem:heavy_check_mark:
padding-x-4padding-left: 2rempadding-right: 2rem:heavy_check_mark:
padding-x-5padding-left: 4rempadding-right: 4rem:heavy_check_mark:
padding-x-6padding-left: 8rempadding-right: 8rem:heavy_check_mark:
padding-y-0padding-top: 0padding-bottom: 0:heavy_check_mark:
padding-y-1padding-top: 0.25rempadding-bottom: 0.25rem:heavy_check_mark:
padding-y-2padding-top: 0.5rempadding-bottom: 0.5rem:heavy_check_mark:
padding-y-3padding-top: 1rempadding-bottom: 1rem:heavy_check_mark:
padding-y-4padding-top: 2rempadding-bottom: 2rem:heavy_check_mark:
padding-y-5padding-top: 4rempadding-bottom: 4rem:heavy_check_mark:
padding-y-6padding-top: 8rempadding-bottom: 8rem:heavy_check_mark:

Hover

↑ Back to contents

ClassStyleBreakpoint support
dimChange opacity on hover/focus/active 1:x:
shadeDarken background color on hover/focus/active 2:x:

1.

.dim:hover,
.dim:focus {
	opacity: 0.75;
}

.dim:active {
	opacity: 1;
}

2.

.shade:hover,
.shade:focus {
	background-color: rgba(0, 0, 0, 0.05);
}

.shade:active {
	background-color: transparent;
}

Cursor

↑ Back to contents

ClassStyleBreakpoint support
cursor-autocursor: auto:x:
cursor-defaultcursor: default:x:
cursor-pointercursor: pointer:x:
cursor-waitcursor: wait:x:
cursor-progresscursor: progress:x:
cursor-not-allowedcursor: not-allowed:x:
cursor-helpcursor: help:x:
cursor-nonecursor: none:x:

Pointer events

↑ Back to contents

ClassStyleBreakpoint support
pointer-events-autopointer-events: auto:x:
pointer-events-nonepointer-events: none:x:

User select

↑ Back to contents

ClassStyleBreakpoint support
user-select-noneuser-select: none:x:

Opacity

↑ Back to contents

ClassStyleBreakpoint support
transparentopacity: 0:x:
opacity-5opacity: 0.05:x:
opacity-10opacity: 0.1:x:
opacity-15opacity: 0.15:x:
opacity-20opacity: 0.2:x:
opacity-25opacity: 0.25:x:
opacity-30opacity: 0.35:x:
opacity-35opacity: 0.35:x:
opacity-40opacity: 0.4:x:
opacity-45opacity: 0.45:x:
opacity-50opacity: 0.5:x:
opacity-55opacity: 0.55:x:
opacity-60opacity: 0.6:x:
opacity-65opacity: 0.65:x:
opacity-70opacity: 0.7:x:
opacity-75opacity: 0.75:x:
opacity-80opacity: 0.8:x:
opacity-85opacity: 0.85:x:
opacity-90opacity: 0.9:x:
opacity-95opacity: 0.95:x:
opacity-100opacity: 1:x:

Background position

↑ Back to contents

ClassStyleBreakpoint support
bg-centerbackground-position: center center:x:
bg-topbackground-position: center top:x:
bg-rightbackground-position: right center:x:
bg-bottombackground-position: center bottom:x:
bg-leftbackground-position: left center:x:

Background size

↑ Back to contents

ClassStyleBreakpoint support
bg-coverbackground-size: cover:x:
bg-containbackground-size: contain:x:
bg-width-fullbackground-size: 100% auto:x:
bg-height-fullbackground-size: auto 100%:x:

Background repeat

↑ Back to contents

ClassStyleBreakpoint support
bg-no-repeatbackground-repeat: no-repeat:x:

Background color

↑ Back to contents

ClassStyleBreakpoint support
bg-blackbackground-color: black:x:
bg-black-95background-color: rgba(0, 0, 0, 0.95):x:
bg-black-90background-color: rgba(0, 0, 0, 0.9):x:
bg-black-85background-color: rgba(0, 0, 0, 0.85):x:
bg-black-80background-color: rgba(0, 0, 0, 0.8):x:
bg-black-75background-color: rgba(0, 0, 0, 0.75):x:
bg-black-70background-color: rgba(0, 0, 0, 0.7):x:
bg-black-65background-color: rgba(0, 0, 0, 0.65):x:
bg-black-60background-color: rgba(0, 0, 0, 0.6):x:
bg-black-55background-color: rgba(0, 0, 0, 0.55):x:
bg-black-50background-color: rgba(0, 0, 0, 0.5):x:
bg-black-45background-color: rgba(0, 0, 0, 0.45):x:
bg-black-40background-color: rgba(0, 0, 0, 0.4):x:
bg-black-35background-color: rgba(0, 0, 0, 0.35):x:
bg-black-30background-color: rgba(0, 0, 0, 0.35):x:
bg-black-25background-color: rgba(0, 0, 0, 0.25):x:
bg-black-20background-color: rgba(0, 0, 0, 0.2):x:
bg-black-15background-color: rgba(0, 0, 0, 0.15):x:
bg-black-10background-color: rgba(0, 0, 0, 0.1):x:
bg-black-5background-color: rgba(0, 0, 0, 0.05):x:
bg-whitebackground-color: white:x:
bg-white-95background-color: rgba(255, 255, 255, 0.95):x:
bg-white-90background-color: rgba(255, 255, 255, 0.9):x:
bg-white-85background-color: rgba(255, 255, 255, 0.85):x:
bg-white-80background-color: rgba(255, 255, 255, 0.8):x:
bg-white-75background-color: rgba(255, 255, 255, 0.75):x:
bg-white-70background-color: rgba(255, 255, 255, 0.7):x:
bg-white-65background-color: rgba(255, 255, 255, 0.65):x:
bg-white-60background-color: rgba(255, 255, 255, 0.6):x:
bg-white-55background-color: rgba(255, 255, 255, 0.55):x:
bg-white-50background-color: rgba(255, 255, 255, 0.5):x:
bg-white-45background-color: rgba(255, 255, 255, 0.45):x:
bg-white-40background-color: rgba(255, 255, 255, 0.4):x:
bg-white-35background-color: rgba(255, 255, 255, 0.35):x:
bg-white-30background-color: rgba(255, 255, 255, 0.35):x:
bg-white-25background-color: rgba(255, 255, 255, 0.25):x:
bg-white-20background-color: rgba(255, 255, 255, 0.2):x:
bg-white-15background-color: rgba(255, 255, 255, 0.15):x:
bg-white-10background-color: rgba(255, 255, 255, 0.1):x:
bg-white-5background-color: rgba(255, 255, 255, 0.05):x:

Background attachment

↑ Back to contents

ClassStyleBreakpoint support
bg-fixedbackground-attachment: fixed:x:

Border radius

↑ Back to contents

ClassStyleBreakpoint support
border-roundborder-radius: 100%:x:
border-rounded-1border-radius: 0.125rem:x:
border-rounded-2border-radius: 0.25rem:x:
border-rounded-3border-radius: 0.5rem:x:
border-rounded-maxborder-radius: 9999px:x:

Border width

↑ Back to contents

ClassStyleBreakpoint support
border-1border-width: 1px:x:
border-2border-width: 2px:x:
border-3border-width: 3px:x:
border-bottom-1border-top-width: 0;border-right-width: 0;border-bottom-width: 1px;border-left-width: 0;:x:
border-bottom-2border-top-width: 0;border-right-width: 0;border-bottom-width: 2px;border-left-width: 0;:x:
border-bottom-3border-top-width: 0;border-right-width: 0;border-bottom-width: 3px;border-left-width: 0;:x:

Border style

↑ Back to contents

ClassStyleBreakpoint support
border-solidborder-style: solid:x:
border-dashedborder-style: dashed:x:
border-dottedborder-style: dotted:x:

Border color

↑ Back to contents

ClassStyleBreakpoint support
border-blackborder-color: black:x:
border-black-95border-color: rgba(0, 0, 0, 0.95):x:
border-black-90border-color: rgba(0, 0, 0, 0.9):x:
border-black-85border-color: rgba(0, 0, 0, 0.85):x:
border-black-80border-color: rgba(0, 0, 0, 0.8):x:
border-black-75border-color: rgba(0, 0, 0, 0.75):x:
border-black-70border-color: rgba(0, 0, 0, 0.7):x:
border-black-65border-color: rgba(0, 0, 0, 0.65):x:
border-black-60border-color: rgba(0, 0, 0, 0.6):x:
border-black-55border-color: rgba(0, 0, 0, 0.55):x:
border-black-50border-color: rgba(0, 0, 0, 0.5):x:
border-black-45border-color: rgba(0, 0, 0, 0.45):x:
border-black-40border-color: rgba(0, 0, 0, 0.4):x:
border-black-35border-color: rgba(0, 0, 0, 0.35):x:
border-black-30border-color: rgba(0, 0, 0, 0.35):x:
border-black-25border-color: rgba(0, 0, 0, 0.25):x:
border-black-20border-color: rgba(0, 0, 0, 0.2):x:
border-black-15border-color: rgba(0, 0, 0, 0.15):x:
border-black-10border-color: rgba(0, 0, 0, 0.1):x:
border-black-5border-color: rgba(0, 0, 0, 0.05):x:
border-whiteborder-color: white:x:
border-white-95border-color: rgba(255, 255, 255, 0.95):x:
border-white-90border-color: rgba(255, 255, 255, 0.9):x:
border-white-85border-color: rgba(255, 255, 255, 0.85):x:
border-white-80border-color: rgba(255, 255, 255, 0.8):x:
border-white-75border-color: rgba(255, 255, 255, 0.75):x:
border-white-70border-color: rgba(255, 255, 255, 0.7):x:
border-white-65border-color: rgba(255, 255, 255, 0.65):x:
border-white-60border-color: rgba(255, 255, 255, 0.6):x:
border-white-55border-color: rgba(255, 255, 255, 0.55):x:
border-white-50border-color: rgba(255, 255, 255, 0.5):x:
border-white-45border-color: rgba(255, 255, 255, 0.45):x:
border-white-40border-color: rgba(255, 255, 255, 0.4):x:
border-white-35border-color: rgba(255, 255, 255, 0.35):x:
border-white-30border-color: rgba(255, 255, 255, 0.35):x:
border-white-25border-color: rgba(255, 255, 255, 0.25):x:
border-white-20border-color: rgba(255, 255, 255, 0.2):x:
border-white-15border-color: rgba(255, 255, 255, 0.15):x:
border-white-10border-color: rgba(255, 255, 255, 0.1):x:
border-white-5border-color: rgba(255, 255, 255, 0.05):x:

Transform

↑ Back to contents

ClassStyleBreakpoint support
flip-xtransform: scaleX(-1):x:
flip-ytransform: scaleY(-1):x:

Font family

↑ Back to contents

ClassStyleBreakpoint support
font-seriffont-family: serif:x:
font-sansfont-family: sans-serif:x:
font-monofont-family: monospace:x:

Font size

↑ Back to contents

ClassStyleBreakpoint support
font-xsfont-size: 0.75rem:heavy_check_mark:
font-smfont-size: 0.875rem:heavy_check_mark:
font-normalfont-size: 1rem:heavy_check_mark:
font-lgfont-size: 1.25rem:heavy_check_mark:
font-xlfont-size: 1.5rem:heavy_check_mark:
font-2xlfont-size: 1.875rem:heavy_check_mark:
font-3xlfont-size: 2.25rem:heavy_check_mark:
font-4xlfont-size: 3rem:heavy_check_mark:
font-5xlfont-size: 4rem:heavy_check_mark:

Font style

↑ Back to contents

ClassStyleBreakpoint support
font-style-normalfont-style: normal:x:
font-italicfont-style: italic:x:

Font weight

↑ Back to contents

ClassStyleBreakpoint support
font-weight-normalfont-weight: normal:x:
font-boldfont-weight: bold:x:
font-weight-100font-weight: 100:x:
font-weight-200font-weight: 200:x:
font-weight-300font-weight: 300:x:
font-weight-400font-weight: 400:x:
font-weight-500font-weight: 500:x:
font-weight-600font-weight: 600:x:
font-weight-700font-weight: 700:x:
font-weight-800font-weight: 800:x:
font-weight-900font-weight: 900:x:

Letter spacing

↑ Back to contents

ClassStyleBreakpoint support
tracking-tightletter-spacing: -0.05em:x:
tracking-normalletter-spacing: 0:x:
tracking-wideletter-spacing: 0.05em:x:
tracking-hugeletter-spacing: 0.1em:x:

Line height

↑ Back to contents

ClassStyleBreakpoint support
leading-noneline-height: 1:x:
leading-tightline-height: 1.25:x:
leading-normalline-height: 1.5:x:
leading-looseline-height: 2:x:

Vertical align

↑ Back to contents

ClassStyleBreakpoint support
vertical-topvertical-align: top:x:
vertical-middlevertical-align: middle:x:
vertical-bottomvertical-align: bottom:x:
vertical-baselinevertical-align: baseline:x:

White space

↑ Back to contents

ClassStyleBreakpoint support
space-normalwhite-space: normal:x:
space-nowrapwhite-space: nowrap:x:
space-prewhite-space: pre:x:

Word break

↑ Back to contents

ClassStyleBreakpoint support
word-normalword-break: normal:x:
word-breakword-break: break-all:x:
word-keepword-break: keep-all:x:

Text transform

↑ Back to contents

ClassStyleBreakpoint support
text-uppertext-transform: uppercase:x:
text-lowertext-transform: lowercase:x:
text-transform-nonetext-transform: none:x:

Text decoration

↑ Back to contents

ClassStyleBreakpoint support
text-underlinetext-decoration: underline:x:
text-overlinetext-decoration: overline:x:
text-decoration-nonetext-decoration: none:x:

Text align

↑ Back to contents

ClassStyleBreakpoint support
text-centertext-align: center:heavy_check_mark:
text-lefttext-align: left:heavy_check_mark:
text-righttext-align: right:heavy_check_mark:

Color

↑ Back to contents

ClassStyleBreakpoint support
color-blackcolor: black:x:
color-black-95color: rgba(0, 0, 0, 0.95):x:
color-black-90color: rgba(0, 0, 0, 0.9):x:
color-black-85color: rgba(0, 0, 0, 0.85):x:
color-black-80color: rgba(0, 0, 0, 0.8):x:
color-black-75color: rgba(0, 0, 0, 0.75):x:
color-black-70color: rgba(0, 0, 0, 0.7):x:
color-black-65color: rgba(0, 0, 0, 0.65):x:
color-black-60color: rgba(0, 0, 0, 0.6):x:
color-black-55color: rgba(0, 0, 0, 0.55):x:
color-black-50color: rgba(0, 0, 0, 0.5):x:
color-black-45color: rgba(0, 0, 0, 0.45):x:
color-black-40color: rgba(0, 0, 0, 0.4):x:
color-black-35color: rgba(0, 0, 0, 0.35):x:
color-black-30color: rgba(0, 0, 0, 0.35):x:
color-black-25color: rgba(0, 0, 0, 0.25):x:
color-black-20color: rgba(0, 0, 0, 0.2):x:
color-black-15color: rgba(0, 0, 0, 0.15):x:
color-black-10color: rgba(0, 0, 0, 0.1):x:
color-black-5color: rgba(0, 0, 0, 0.05):x:
color-whitecolor: white:x:
color-white-95color: rgba(255, 255, 255, 0.95):x:
color-white-90color: rgba(255, 255, 255, 0.9):x:
color-white-85color: rgba(255, 255, 255, 0.85):x:
color-white-80color: rgba(255, 255, 255, 0.8):x:
color-white-75color: rgba(255, 255, 255, 0.75):x:
color-white-70color: rgba(255, 255, 255, 0.7):x:
color-white-65color: rgba(255, 255, 255, 0.65):x:
color-white-60color: rgba(255, 255, 255, 0.6):x:
color-white-55color: rgba(255, 255, 255, 0.55):x:
color-white-50color: rgba(255, 255, 255, 0.5):x:
color-white-45color: rgba(255, 255, 255, 0.45):x:
color-white-40color: rgba(255, 255, 255, 0.4):x:
color-white-35color: rgba(255, 255, 255, 0.35):x:
color-white-30color: rgba(255, 255, 255, 0.35):x:
color-white-25color: rgba(255, 255, 255, 0.25):x:
color-white-20color: rgba(255, 255, 255, 0.2):x:
color-white-15color: rgba(255, 255, 255, 0.15):x:
color-white-10color: rgba(255, 255, 255, 0.1):x:
color-white-5color: rgba(255, 255, 255, 0.05):x:

Typography

↑ Back to contents

ClassStyleBreakpoint support
text-indentIndent first letter with no block margin or padding 1:x:
text-small-capsfont-variant: small-caps:x:
text-truncateShow trailing dots on text overflow 2:x:

1.

.text-indent {
	text-indent: 1em;
	margin-top: 0;
	margin-bottom: 0;
}

2.

.text-truncate {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

Table

↑ Back to contents

ClassStyleBreakpoint support
table-fixedtable-layout: fixed:x:
table-collapseborder-collapse: collapseborder-spacing: 0:x:

List

↑ Back to contents

ClassStyleBreakpoint support
list-style-nonelist-style: none:x:

Debug

↑ Back to contents

ClassStyleBreakpoint support
debugoutline: 1px solid red !important:x:
debug-gridbackground: url("data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7") !important:x:

Reference

responsivecssscssutilitymodulehelperfunctionalperformancedesign
@infinitebrahmanuniverse/nolb-tur@everything-registry/sub-chunk-2986
5.0.4

6 years ago

5.0.3

6 years ago

5.0.2

6 years ago

5.0.1

6 years ago

5.0.0

6 years ago

4.3.1

6 years ago

4.2.1

6 years ago

4.1.1

6 years ago

4.0.1

6 years ago

3.0.0

6 years ago

2.3.0

6 years ago

2.2.0

6 years ago

2.1.0

6 years ago

2.0.0

6 years ago

1.5.2

6 years ago

1.4.2

6 years ago

1.3.2

6 years ago

1.3.1

6 years ago

1.3.0

6 years ago

1.2.0

6 years ago

1.1.0

6 years ago

1.0.0

6 years ago