Licence
MIT
Version
5.0.4
Deps
0
Size
1.8 MB
Vulns
0
Weekly
0
Project has been discontinued in favor of Cocktail
turbo-scss is a helper set of composable human-readable CSS classes. Stay calm and don’t ever repeat those frequent declarations.
Features
Modular and build-agnostic with SCSS. Grab what you need and be good to go.
Standalone with no third-party dependencies like normalize, sanitize, reset etc.
Handful of utility-classes. This is not a whole set of every CSS rule, just most useful ones.
Mobile-first breakpoints for vital classes: 576px, 768px, 992px, 1200px and 1600px.
New era with 12 column CSS grid and flexbox.
Prefixed for browsers with >1% of usage.
No old junk tweaks like clearfix, IE filter etc.
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.
No styling of basic HTML elements.
No ugly unreadable class name abbreviations like mb1, fz4, ws-n etc. Put the clarity over the brevity.
Getting started
- Just drop
turbo.cssor minifiedturbo.min.cssin 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-scssDocs
- Responsiveness: Breakpoint support
- Content flow: Box sizing, Display, Flex, Grid, Overflow, Float, Position, Z-index, Toggle
- Sizing: Width, Height
- Spacing: Margin, Padding
- Interaction: Hover, Cursor, Pointer events, User select
- Appearance: Opacity, Background position, Background size, Background repeat, Background color, Background attachment, Border radius, Border width, Border style, Border color, Transform
- Text: Font family, Font size, Font style, Font weight, Letter spacing, Line height, Vertical align, White space, Word break, Text transform, Text decoration, Text align, Color, Typography
- Misc: Table, List, Debug
Breakpoint support
Certain classes have mobile-first breakpoint trigger to activate the rule. Such classes are marked with symbol in according table column. That means class can have a specific suffix, indicating from which breakpoint it should work.
Breakpoint list:
| Suffix | Description | Media query |
|---|---|---|
sm |
Smartphone | @media screen and (min-width: 576px) |
md |
Tablet | @media screen and (min-width: 768px) |
lg |
Desktop | @media screen and (min-width: 992px) |
xl |
Wide desktop | @media screen and (min-width: 1200px) |
xxl |
Huge desktop | @media screen and (min-width: 1600px) |
Usage examples:
| Class | Description |
|---|---|
grid-gap-4--xxl |
With 1600px viewport width and above, set grid-gap: 2rem |
width-50--lg |
With 992px viewport width and above, set width: 50% |
hidden--md |
With 768px viewport width and above, set display: none |
Box sizing
| Class | Style | Breakpoint support |
|---|---|---|
border-box |
box-sizing: border-box |
|
content-box |
box-sizing: content-box |
Display
| Class | Style | Breakpoint support |
|---|---|---|
block |
display: block |
|
inline-block |
display: inline-block |
|
inline |
display: inline |
|
table |
display: table |
|
table-cell |
display: table-cell |
|
flex |
display: flex |
|
inline-flex |
display: inline-flex |
|
grid |
display: gridgrid-template-columns: repeat(12, 1fr) |
|
hidden |
display: none; |
Flex
| Class | Style | Breakpoint support |
|---|---|---|
justify-start |
justify-content: flex-start |
|
justify-end |
justify-content: flex-end |
|
justify-center |
justify-content: center |
|
justify-between |
justify-content: space-between |
|
justify-around |
justify-content: space-around |
|
items-start |
align-items: flex-start |
|
items-end |
align-items: flex-end |
|
items-center |
align-items: center |
|
items-baseline |
align-items: baseline |
|
items-stretch |
align-items: stretch |
|
flex-column |
flex-direction: column |
|
flex-row |
flex-direction: row |
|
flex-wrap |
flex-wrap: wrap |
|
flex-nowrap |
flex-wrap: nowrap |
|
flex-wrap-reverse |
flex-wrap: wrap-reverse |
|
flex-column-reverse |
flex-direction: column-reverse |
|
flex-row-reverse |
flex-direction: row-reverse |
|
self-start |
align-self: flex-start |
|
self-end |
align-self: flex-end |
|
self-center |
align-self: center |
|
self-baseline |
align-self: baseline |
|
self-stretch |
align-self: stretch; |
|
content-start |
align-content: flex-start |
|
content-end |
align-content: flex-end |
|
content-center |
align-content: center |
|
content-between |
align-content: space-between |
|
content-around |
align-content: space-around |
|
content-stretch |
align-content: stretch |
|
flex-no-grow |
flex-grow: 0 |
|
flex-grow |
flex-grow: 1 |
|
flex-no-shrink |
flex-shrink: 0 |
|
flex-shrink |
flex-shrink: 1 |
|
flex-basis-auto |
flex-basis: auto |
|
flex-no-basis |
flex-basis: 0 |
Grid
| Class | Style | Breakpoint support |
|---|---|---|
grid-column-1 |
grid-column: span 1 / span 1 |
|
grid-column-2 |
grid-column: span 2 / span 2 |
|
grid-column-3 |
grid-column: span 3 / span 3 |
|
grid-column-4 |
grid-column: span 4 / span 4 |
|
grid-column-5 |
grid-column: span 5 / span 5 |
|
grid-column-6 |
grid-column: span 6 / span 6 |
|
grid-column-7 |
grid-column: span 7 / span 7 |
|
grid-column-8 |
grid-column: span 8 / span 8 |
|
grid-column-9 |
grid-column: span 9 / span 9 |
|
grid-column-10 |
grid-column: span 10 / span 10 |
|
grid-column-11 |
grid-column: span 11 / span 11 |
|
grid-column-12 |
grid-column: span 12 / span 12 |
|
grid-column-gap-1 |
grid-column-gap: 0.25rem |
|
grid-column-gap-2 |
grid-column-gap: 0.5rem |
|
grid-column-gap-3 |
grid-column-gap: 1rem |
|
grid-column-gap-4 |
grid-column-gap: 2rem |
|
grid-column-gap-5 |
grid-column-gap: 3rem |
|
grid-column-gap-6 |
grid-column-gap: 4rem |
|
grid-column-gap-7 |
grid-column-gap: 5rem |
|
grid-column-gap-8 |
grid-column-gap: 6rem |
|
grid-row-gap-1 |
grid-row-gap: 0.25rem |
|
grid-row-gap-2 |
grid-row-gap: 0.5rem |
|
grid-row-gap-3 |
grid-row-gap: 1rem |
|
grid-row-gap-4 |
grid-row-gap: 2rem |
|
grid-row-gap-5 |
grid-row-gap: 3rem |
|
grid-row-gap-6 |
grid-row-gap: 4rem |
|
grid-row-gap-7 |
grid-row-gap: 5rem |
|
grid-row-gap-8 |
grid-row-gap: 6rem |
|
grid-gap-1 |
grid-gap: 0.25rem |
|
grid-gap-2 |
grid-gap: 0.5rem |
|
grid-gap-3 |
grid-gap: 1rem |
|
grid-gap-4 |
grid-gap: 2rem |
|
grid-gap-5 |
grid-gap: 3rem |
|
grid-gap-6 |
grid-gap: 4rem |
|
grid-gap-7 |
grid-gap: 5rem |
|
grid-gap-8 |
grid-gap: 6rem |
Overflow
| Class | Style | Breakpoint support |
|---|---|---|
overflow-hidden |
overflow: hidden |
|
overflow-scroll |
overflow: scroll |
|
overflow-auto |
overflow: auto |
|
overflow-x-hidden |
overflow-x: hidden |
|
overflow-x-scroll |
overflow-x: scroll |
|
overflow-x-auto |
overflow-x: auto |
|
overflow-y-hidden |
overflow-y: hidden |
|
overflow-y-scroll |
overflow-y: scroll |
|
overflow-y-auto |
overflow-y: auto |
Float
| Class | Style | Breakpoint support |
|---|---|---|
float-left |
float: left |
|
float-right |
float: right |
|
float-none |
float: none |
Position
| Class | Style | Breakpoint support |
|---|---|---|
relative |
position: relative |
|
absolute |
position: absolute |
|
top-0 |
top: 0 |
|
right-0 |
right: 0 |
|
bottom-0 |
bottom: 0 |
|
left-0 |
left: 0 |
|
top-full |
top: 100% |
|
right-full |
right: 100% |
|
bottom-full |
bottom: 100% |
|
left-full |
left: 100% |
|
fixed |
position: fixed |
|
fill |
top: 0right: 0bottom: 0left: 0 |
|
center-x |
left: 50%transform: translateX(-50%) |
|
center-y |
top: 50%transform: translateY(-50%) |
|
center |
top: 50%left: 50%transform: translate(-50%, -50%) |
Z-index
| Class | Style | Breakpoint support |
|---|---|---|
z-0 |
z-index: 0 |
|
z-1 |
z-index: 1 |
|
z-2 |
z-index: 2 |
|
z-3 |
z-index: 3 |
|
z-4 |
z-index: 4 |
|
z-5 |
z-index: 5 |
|
z-6 |
z-index: 6 |
|
z-7 |
z-index: 7 |
|
z-8 |
z-index: 8 |
|
z-9 |
z-index: 9 |
|
z-10 |
z-index: 10 |
|
z-max |
z-index: 2147483647 |
Toggle
| Class | Style | Breakpoint support |
|---|---|---|
toggle-control |
Toggle toggle-content somewhere after it 1 |
.toggle-control:checked ~ .toggle-content {
display: block;
}Width
| Class | Style | Breakpoint support |
|---|---|---|
max-width-full |
max-width: 100% |
|
min-width-none |
min-width: 0 |
|
min-width-full |
min-width: 100% |
|
width-full |
width: 100% |
|
width-auto |
width: auto |
|
width-5 |
width: 5% |
|
width-10 |
width: 10% |
|
width-15 |
width: 15% |
|
width-20 |
width: 20% |
|
width-25 |
width: 25% |
|
width-30 |
width: 30% |
|
width-35 |
width: 35% |
|
width-40 |
width: 40% |
|
width-45 |
width: 45% |
|
width-50 |
width: 50% |
|
width-55 |
width: 55% |
|
width-60 |
width: 60% |
|
width-65 |
width: 65% |
|
width-70 |
width: 70% |
|
width-75 |
width: 75% |
|
width-80 |
width: 80% |
|
width-85 |
width: 85% |
|
width-90 |
width: 90% |
|
width-95 |
width: 95% |
Height
| Class | Style | Breakpoint support |
|---|---|---|
max-height-full |
max-height: 100% |
|
min-height-full |
min-height: 100% |
|
height-full |
height: 100% |
Margin
| Class | Style | Breakpoint support |
|---|---|---|
margin-top-0 |
margin-top: 0 |
|
margin-top-1 |
margin-top: 0.25rem |
|
margin-top-2 |
margin-top: 0.5rem |
|
margin-top-3 |
margin-top: 1rem |
|
margin-top-4 |
margin-top: 2rem |
|
margin-top-5 |
margin-top: 4rem |
|
margin-top-6 |
margin-top: 8rem |
|
margin-right-0 |
margin-right: 0 |
|
margin-right-1 |
margin-right: 0.25rem |
|
margin-right-2 |
margin-right: 0.5rem |
|
margin-right-3 |
margin-right: 1rem |
|
margin-right-4 |
margin-right: 2rem |
|
margin-right-5 |
margin-right: 4rem |
|
margin-right-6 |
margin-right: 8rem |
|
margin-bottom-0 |
margin-bottom: 0 |
|
margin-bottom-1 |
margin-bottom: 0.25rem |
|
margin-bottom-2 |
margin-bottom: 0.5rem |
|
margin-bottom-3 |
margin-bottom: 1rem |
|
margin-bottom-4 |
margin-bottom: 2rem |
|
margin-bottom-5 |
margin-bottom: 4rem |
|
margin-bottom-6 |
margin-bottom: 8rem |
|
margin-left-0 |
margin-left: 0 |
|
margin-left-1 |
margin-left: 0.25rem |
|
margin-left-2 |
margin-left: 0.5rem |
|
margin-left-3 |
margin-left: 1rem |
|
margin-left-4 |
margin-left: 2rem |
|
margin-left-5 |
margin-left: 4rem |
|
margin-left-6 |
margin-left: 8rem |
|
margin-x-0 |
margin-left: 0margin-right: 0 |
|
margin-x-1 |
margin-left: 0.25remmargin-right: 0.25rem |
|
margin-x-2 |
margin-left: 0.5remmargin-right: 0.5rem |
|
margin-x-3 |
margin-left: 1remmargin-right: 1rem |
|
margin-x-4 |
margin-left: 2remmargin-right: 2rem |
|
margin-x-5 |
margin-left: 4remmargin-right: 4rem |
|
margin-x-6 |
margin-left: 8remmargin-right: 8rem |
|
margin-y-0 |
margin-top: 0margin-bottom: 0 |
|
margin-y-1 |
margin-top: 0.25remmargin-bottom: 0.25rem |
|
margin-y-2 |
margin-top: 0.5remmargin-bottom: 0.5rem |
|
margin-y-3 |
margin-top: 1remmargin-bottom: 1rem |
|
margin-y-4 |
margin-top: 2remmargin-bottom: 2rem |
|
margin-y-5 |
margin-top: 4remmargin-bottom: 4rem |
|
margin-y-6 |
margin-top: 8remmargin-bottom: 8rem |
|
margin-x-auto |
margin-left: automargin-right: auto |
|
margin-y-auto |
margin-top: automargin-bottom: auto |
Padding
| Class | Style | Breakpoint support |
|---|---|---|
padding-top-0 |
padding-top: 0 |
|
padding-top-1 |
padding-top: 0.25rem |
|
padding-top-2 |
padding-top: 0.5rem |
|
padding-top-3 |
padding-top: 1rem |
|
padding-top-4 |
padding-top: 2rem |
|
padding-top-5 |
padding-top: 4rem |
|
padding-top-6 |
padding-top: 8rem |
|
padding-right-0 |
padding-right: 0 |
|
padding-right-1 |
padding-right: 0.25rem |
|
padding-right-2 |
padding-right: 0.5rem |
|
padding-right-3 |
padding-right: 1rem |
|
padding-right-4 |
padding-right: 2rem |
|
padding-right-5 |
padding-right: 4rem |
|
padding-right-6 |
padding-right: 8rem |
|
padding-bottom-0 |
padding-bottom: 0 |
|
padding-bottom-1 |
padding-bottom: 0.25rem |
|
padding-bottom-2 |
padding-bottom: 0.5rem |
|
padding-bottom-3 |
padding-bottom: 1rem |
|
padding-bottom-4 |
padding-bottom: 2rem |
|
padding-bottom-5 |
padding-bottom: 4rem |
|
padding-bottom-6 |
padding-bottom: 8rem |
|
padding-left-0 |
padding-left: 0 |
|
padding-left-1 |
padding-left: 0.25rem |
|
padding-left-2 |
padding-left: 0.5rem |
|
padding-left-3 |
padding-left: 1rem |
|
padding-left-4 |
padding-left: 2rem |
|
padding-left-5 |
padding-left: 4rem |
|
padding-left-6 |
padding-left: 8rem |
|
padding-x-0 |
padding-left: 0padding-right: 0 |
|
padding-x-1 |
padding-left: 0.25rempadding-right: 0.25rem |
|
padding-x-2 |
padding-left: 0.5rempadding-right: 0.5rem |
|
padding-x-3 |
padding-left: 1rempadding-right: 1rem |
|
padding-x-4 |
padding-left: 2rempadding-right: 2rem |
|
padding-x-5 |
padding-left: 4rempadding-right: 4rem |
|
padding-x-6 |
padding-left: 8rempadding-right: 8rem |
|
padding-y-0 |
padding-top: 0padding-bottom: 0 |
|
padding-y-1 |
padding-top: 0.25rempadding-bottom: 0.25rem |
|
padding-y-2 |
padding-top: 0.5rempadding-bottom: 0.5rem |
|
padding-y-3 |
padding-top: 1rempadding-bottom: 1rem |
|
padding-y-4 |
padding-top: 2rempadding-bottom: 2rem |
|
padding-y-5 |
padding-top: 4rempadding-bottom: 4rem |
|
padding-y-6 |
padding-top: 8rempadding-bottom: 8rem |
Hover
| Class | Style | Breakpoint support |
|---|---|---|
dim |
Change opacity on hover/focus/active 1 |
|
shade |
Darken background color on hover/focus/active 2 |
.dim:hover,
.dim:focus {
opacity: 0.75;
}
.dim:active {
opacity: 1;
}.shade:hover,
.shade:focus {
background-color: rgba(0, 0, 0, 0.05);
}
.shade:active {
background-color: transparent;
}Cursor
| Class | Style | Breakpoint support |
|---|---|---|
cursor-auto |
cursor: auto |
|
cursor-default |
cursor: default |
|
cursor-pointer |
cursor: pointer |
|
cursor-wait |
cursor: wait |
|
cursor-progress |
cursor: progress |
|
cursor-not-allowed |
cursor: not-allowed |
|
cursor-help |
cursor: help |
|
cursor-none |
cursor: none |
Pointer events
| Class | Style | Breakpoint support |
|---|---|---|
pointer-events-auto |
pointer-events: auto |
|
pointer-events-none |
pointer-events: none |
User select
| Class | Style | Breakpoint support |
|---|---|---|
user-select-none |
user-select: none |
Opacity
| Class | Style | Breakpoint support |
|---|---|---|
transparent |
opacity: 0 |
|
opacity-5 |
opacity: 0.05 |
|
opacity-10 |
opacity: 0.1 |
|
opacity-15 |
opacity: 0.15 |
|
opacity-20 |
opacity: 0.2 |
|
opacity-25 |
opacity: 0.25 |
|
opacity-30 |
opacity: 0.35 |
|
opacity-35 |
opacity: 0.35 |
|
opacity-40 |
opacity: 0.4 |
|
opacity-45 |
opacity: 0.45 |
|
opacity-50 |
opacity: 0.5 |
|
opacity-55 |
opacity: 0.55 |
|
opacity-60 |
opacity: 0.6 |
|
opacity-65 |
opacity: 0.65 |
|
opacity-70 |
opacity: 0.7 |
|
opacity-75 |
opacity: 0.75 |
|
opacity-80 |
opacity: 0.8 |
|
opacity-85 |
opacity: 0.85 |
|
opacity-90 |
opacity: 0.9 |
|
opacity-95 |
opacity: 0.95 |
|
opacity-100 |
opacity: 1 |
Background position
| Class | Style | Breakpoint support |
|---|---|---|
bg-center |
background-position: center center |
|
bg-top |
background-position: center top |
|
bg-right |
background-position: right center |
|
bg-bottom |
background-position: center bottom |
|
bg-left |
background-position: left center |
Background size
| Class | Style | Breakpoint support |
|---|---|---|
bg-cover |
background-size: cover |
|
bg-contain |
background-size: contain |
|
bg-width-full |
background-size: 100% auto |
|
bg-height-full |
background-size: auto 100% |
Background repeat
| Class | Style | Breakpoint support |
|---|---|---|
bg-no-repeat |
background-repeat: no-repeat |
Background color
| Class | Style | Breakpoint support |
|---|---|---|
bg-black |
background-color: black |
|
bg-black-95 |
background-color: rgba(0, 0, 0, 0.95) |
|
bg-black-90 |
background-color: rgba(0, 0, 0, 0.9) |
|
bg-black-85 |
background-color: rgba(0, 0, 0, 0.85) |
|
bg-black-80 |
background-color: rgba(0, 0, 0, 0.8) |
|
bg-black-75 |
background-color: rgba(0, 0, 0, 0.75) |
|
bg-black-70 |
background-color: rgba(0, 0, 0, 0.7) |
|
bg-black-65 |
background-color: rgba(0, 0, 0, 0.65) |
|
bg-black-60 |
background-color: rgba(0, 0, 0, 0.6) |
|
bg-black-55 |
background-color: rgba(0, 0, 0, 0.55) |
|
bg-black-50 |
background-color: rgba(0, 0, 0, 0.5) |
|
bg-black-45 |
background-color: rgba(0, 0, 0, 0.45) |
|
bg-black-40 |
background-color: rgba(0, 0, 0, 0.4) |
|
bg-black-35 |
background-color: rgba(0, 0, 0, 0.35) |
|
bg-black-30 |
background-color: rgba(0, 0, 0, 0.35) |
|
bg-black-25 |
background-color: rgba(0, 0, 0, 0.25) |
|
bg-black-20 |
background-color: rgba(0, 0, 0, 0.2) |
|
bg-black-15 |
background-color: rgba(0, 0, 0, 0.15) |
|
bg-black-10 |
background-color: rgba(0, 0, 0, 0.1) |
|
bg-black-5 |
background-color: rgba(0, 0, 0, 0.05) |
|
bg-white |
background-color: white |
|
bg-white-95 |
background-color: rgba(255, 255, 255, 0.95) |
|
bg-white-90 |
background-color: rgba(255, 255, 255, 0.9) |
|
bg-white-85 |
background-color: rgba(255, 255, 255, 0.85) |
|
bg-white-80 |
background-color: rgba(255, 255, 255, 0.8) |
|
bg-white-75 |
background-color: rgba(255, 255, 255, 0.75) |
|
bg-white-70 |
background-color: rgba(255, 255, 255, 0.7) |
|
bg-white-65 |
background-color: rgba(255, 255, 255, 0.65) |
|
bg-white-60 |
background-color: rgba(255, 255, 255, 0.6) |
|
bg-white-55 |
background-color: rgba(255, 255, 255, 0.55) |
|
bg-white-50 |
background-color: rgba(255, 255, 255, 0.5) |
|
bg-white-45 |
background-color: rgba(255, 255, 255, 0.45) |
|
bg-white-40 |
background-color: rgba(255, 255, 255, 0.4) |
|
bg-white-35 |
background-color: rgba(255, 255, 255, 0.35) |
|
bg-white-30 |
background-color: rgba(255, 255, 255, 0.35) |
|
bg-white-25 |
background-color: rgba(255, 255, 255, 0.25) |
|
bg-white-20 |
background-color: rgba(255, 255, 255, 0.2) |
|
bg-white-15 |
background-color: rgba(255, 255, 255, 0.15) |
|
bg-white-10 |
background-color: rgba(255, 255, 255, 0.1) |
|
bg-white-5 |
background-color: rgba(255, 255, 255, 0.05) |
Background attachment
| Class | Style | Breakpoint support |
|---|---|---|
bg-fixed |
background-attachment: fixed |
Border radius
| Class | Style | Breakpoint support |
|---|---|---|
border-round |
border-radius: 100% |
|
border-rounded-1 |
border-radius: 0.125rem |
|
border-rounded-2 |
border-radius: 0.25rem |
|
border-rounded-3 |
border-radius: 0.5rem |
|
border-rounded-max |
border-radius: 9999px |
Border width
| Class | Style | Breakpoint support |
|---|---|---|
border-1 |
border-width: 1px |
|
border-2 |
border-width: 2px |
|
border-3 |
border-width: 3px |
|
border-bottom-1 |
border-top-width: 0;border-right-width: 0;border-bottom-width: 1px;border-left-width: 0; |
|
border-bottom-2 |
border-top-width: 0;border-right-width: 0;border-bottom-width: 2px;border-left-width: 0; |
|
border-bottom-3 |
border-top-width: 0;border-right-width: 0;border-bottom-width: 3px;border-left-width: 0; |
Border style
| Class | Style | Breakpoint support |
|---|---|---|
border-solid |
border-style: solid |
|
border-dashed |
border-style: dashed |
|
border-dotted |
border-style: dotted |
Border color
| Class | Style | Breakpoint support |
|---|---|---|
border-black |
border-color: black |
|
border-black-95 |
border-color: rgba(0, 0, 0, 0.95) |
|
border-black-90 |
border-color: rgba(0, 0, 0, 0.9) |
|
border-black-85 |
border-color: rgba(0, 0, 0, 0.85) |
|
border-black-80 |
border-color: rgba(0, 0, 0, 0.8) |
|
border-black-75 |
border-color: rgba(0, 0, 0, 0.75) |
|
border-black-70 |
border-color: rgba(0, 0, 0, 0.7) |
|
border-black-65 |
border-color: rgba(0, 0, 0, 0.65) |
|
border-black-60 |
border-color: rgba(0, 0, 0, 0.6) |
|
border-black-55 |
border-color: rgba(0, 0, 0, 0.55) |
|
border-black-50 |
border-color: rgba(0, 0, 0, 0.5) |
|
border-black-45 |
border-color: rgba(0, 0, 0, 0.45) |
|
border-black-40 |
border-color: rgba(0, 0, 0, 0.4) |
|
border-black-35 |
border-color: rgba(0, 0, 0, 0.35) |
|
border-black-30 |
border-color: rgba(0, 0, 0, 0.35) |
|
border-black-25 |
border-color: rgba(0, 0, 0, 0.25) |
|
border-black-20 |
border-color: rgba(0, 0, 0, 0.2) |
|
border-black-15 |
border-color: rgba(0, 0, 0, 0.15) |
|
border-black-10 |
border-color: rgba(0, 0, 0, 0.1) |
|
border-black-5 |
border-color: rgba(0, 0, 0, 0.05) |
|
border-white |
border-color: white |
|
border-white-95 |
border-color: rgba(255, 255, 255, 0.95) |
|
border-white-90 |
border-color: rgba(255, 255, 255, 0.9) |
|
border-white-85 |
border-color: rgba(255, 255, 255, 0.85) |
|
border-white-80 |
border-color: rgba(255, 255, 255, 0.8) |
|
border-white-75 |
border-color: rgba(255, 255, 255, 0.75) |
|
border-white-70 |
border-color: rgba(255, 255, 255, 0.7) |
|
border-white-65 |
border-color: rgba(255, 255, 255, 0.65) |
|
border-white-60 |
border-color: rgba(255, 255, 255, 0.6) |
|
border-white-55 |
border-color: rgba(255, 255, 255, 0.55) |
|
border-white-50 |
border-color: rgba(255, 255, 255, 0.5) |
|
border-white-45 |
border-color: rgba(255, 255, 255, 0.45) |
|
border-white-40 |
border-color: rgba(255, 255, 255, 0.4) |
|
border-white-35 |
border-color: rgba(255, 255, 255, 0.35) |
|
border-white-30 |
border-color: rgba(255, 255, 255, 0.35) |
|
border-white-25 |
border-color: rgba(255, 255, 255, 0.25) |
|
border-white-20 |
border-color: rgba(255, 255, 255, 0.2) |
|
border-white-15 |
border-color: rgba(255, 255, 255, 0.15) |
|
border-white-10 |
border-color: rgba(255, 255, 255, 0.1) |
|
border-white-5 |
border-color: rgba(255, 255, 255, 0.05) |
Transform
| Class | Style | Breakpoint support |
|---|---|---|
flip-x |
transform: scaleX(-1) |
|
flip-y |
transform: scaleY(-1) |
Font family
| Class | Style | Breakpoint support |
|---|---|---|
font-serif |
font-family: serif |
|
font-sans |
font-family: sans-serif |
|
font-mono |
font-family: monospace |
Font size
| Class | Style | Breakpoint support |
|---|---|---|
font-xs |
font-size: 0.75rem |
|
font-sm |
font-size: 0.875rem |
|
font-normal |
font-size: 1rem |
|
font-lg |
font-size: 1.25rem |
|
font-xl |
font-size: 1.5rem |
|
font-2xl |
font-size: 1.875rem |
|
font-3xl |
font-size: 2.25rem |
|
font-4xl |
font-size: 3rem |
|
font-5xl |
font-size: 4rem |
Font style
| Class | Style | Breakpoint support |
|---|---|---|
font-style-normal |
font-style: normal |
|
font-italic |
font-style: italic |
Font weight
| Class | Style | Breakpoint support |
|---|---|---|
font-weight-normal |
font-weight: normal |
|
font-bold |
font-weight: bold |
|
font-weight-100 |
font-weight: 100 |
|
font-weight-200 |
font-weight: 200 |
|
font-weight-300 |
font-weight: 300 |
|
font-weight-400 |
font-weight: 400 |
|
font-weight-500 |
font-weight: 500 |
|
font-weight-600 |
font-weight: 600 |
|
font-weight-700 |
font-weight: 700 |
|
font-weight-800 |
font-weight: 800 |
|
font-weight-900 |
font-weight: 900 |
Letter spacing
| Class | Style | Breakpoint support |
|---|---|---|
tracking-tight |
letter-spacing: -0.05em |
|
tracking-normal |
letter-spacing: 0 |
|
tracking-wide |
letter-spacing: 0.05em |
|
tracking-huge |
letter-spacing: 0.1em |
Line height
| Class | Style | Breakpoint support |
|---|---|---|
leading-none |
line-height: 1 |
|
leading-tight |
line-height: 1.25 |
|
leading-normal |
line-height: 1.5 |
|
leading-loose |
line-height: 2 |
Vertical align
| Class | Style | Breakpoint support |
|---|---|---|
vertical-top |
vertical-align: top |
|
vertical-middle |
vertical-align: middle |
|
vertical-bottom |
vertical-align: bottom |
|
vertical-baseline |
vertical-align: baseline |
White space
| Class | Style | Breakpoint support |
|---|---|---|
space-normal |
white-space: normal |
|
space-nowrap |
white-space: nowrap |
|
space-pre |
white-space: pre |
Word break
| Class | Style | Breakpoint support |
|---|---|---|
word-normal |
word-break: normal |
|
word-break |
word-break: break-all |
|
word-keep |
word-break: keep-all |
Text transform
| Class | Style | Breakpoint support |
|---|---|---|
text-upper |
text-transform: uppercase |
|
text-lower |
text-transform: lowercase |
|
text-transform-none |
text-transform: none |
Text decoration
| Class | Style | Breakpoint support |
|---|---|---|
text-underline |
text-decoration: underline |
|
text-overline |
text-decoration: overline |
|
text-decoration-none |
text-decoration: none |
Text align
| Class | Style | Breakpoint support |
|---|---|---|
text-center |
text-align: center |
|
text-left |
text-align: left |
|
text-right |
text-align: right |
Color
| Class | Style | Breakpoint support |
|---|---|---|
color-black |
color: black |
|
color-black-95 |
color: rgba(0, 0, 0, 0.95) |
|
color-black-90 |
color: rgba(0, 0, 0, 0.9) |
|
color-black-85 |
color: rgba(0, 0, 0, 0.85) |
|
color-black-80 |
color: rgba(0, 0, 0, 0.8) |
|
color-black-75 |
color: rgba(0, 0, 0, 0.75) |
|
color-black-70 |
color: rgba(0, 0, 0, 0.7) |
|
color-black-65 |
color: rgba(0, 0, 0, 0.65) |
|
color-black-60 |
color: rgba(0, 0, 0, 0.6) |
|
color-black-55 |
color: rgba(0, 0, 0, 0.55) |
|
color-black-50 |
color: rgba(0, 0, 0, 0.5) |
|
color-black-45 |
color: rgba(0, 0, 0, 0.45) |
|
color-black-40 |
color: rgba(0, 0, 0, 0.4) |
|
color-black-35 |
color: rgba(0, 0, 0, 0.35) |
|
color-black-30 |
color: rgba(0, 0, 0, 0.35) |
|
color-black-25 |
color: rgba(0, 0, 0, 0.25) |
|
color-black-20 |
color: rgba(0, 0, 0, 0.2) |
|
color-black-15 |
color: rgba(0, 0, 0, 0.15) |
|
color-black-10 |
color: rgba(0, 0, 0, 0.1) |
|
color-black-5 |
color: rgba(0, 0, 0, 0.05) |
|
color-white |
color: white |
|
color-white-95 |
color: rgba(255, 255, 255, 0.95) |
|
color-white-90 |
color: rgba(255, 255, 255, 0.9) |
|
color-white-85 |
color: rgba(255, 255, 255, 0.85) |
|
color-white-80 |
color: rgba(255, 255, 255, 0.8) |
|
color-white-75 |
color: rgba(255, 255, 255, 0.75) |
|
color-white-70 |
color: rgba(255, 255, 255, 0.7) |
|
color-white-65 |
color: rgba(255, 255, 255, 0.65) |
|
color-white-60 |
color: rgba(255, 255, 255, 0.6) |
|
color-white-55 |
color: rgba(255, 255, 255, 0.55) |
|
color-white-50 |
color: rgba(255, 255, 255, 0.5) |
|
color-white-45 |
color: rgba(255, 255, 255, 0.45) |
|
color-white-40 |
color: rgba(255, 255, 255, 0.4) |
|
color-white-35 |
color: rgba(255, 255, 255, 0.35) |
|
color-white-30 |
color: rgba(255, 255, 255, 0.35) |
|
color-white-25 |
color: rgba(255, 255, 255, 0.25) |
|
color-white-20 |
color: rgba(255, 255, 255, 0.2) |
|
color-white-15 |
color: rgba(255, 255, 255, 0.15) |
|
color-white-10 |
color: rgba(255, 255, 255, 0.1) |
|
color-white-5 |
color: rgba(255, 255, 255, 0.05) |
Typography
| Class | Style | Breakpoint support |
|---|---|---|
text-indent |
Indent first letter with no block margin or padding 1 |
|
text-small-caps |
font-variant: small-caps |
|
text-truncate |
Show trailing dots on text overflow 2 |
.text-indent {
text-indent: 1em;
margin-top: 0;
margin-bottom: 0;
}.text-truncate {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}Table
| Class | Style | Breakpoint support |
|---|---|---|
table-fixed |
table-layout: fixed |
|
table-collapse |
border-collapse: collapseborder-spacing: 0 |
List
| Class | Style | Breakpoint support |
|---|---|---|
list-style-none |
list-style: none |
Debug
| Class | Style | Breakpoint support |
|---|---|---|
debug |
outline: 1px solid red !important |
|
debug-grid |
background: url("data:image/gif;base64,R0lGODdhEAAQAPEAAADw/wDx/xXy/////ywAAAAAEAAQAAACIZyPKckYDQFsb6ZqD85jZ2+BkwiRFKehhqQCQgDHcgwEBQA7") !important |
Reference
turbo-scssis heavily inspired by tachyons, tailwind, basscss and blueprint.- Fan vector object in logo by Stan Diers.