What is Cocktail
Cocktail is a helper set of CSS utility classes for most frequently used styles. It's modular, human-readable and easy to use as building blocks for your layout, elements spacing, text alignment, etc.
Provided styles are well enough for most basic styling use cases. It helps you develop much faster if you don't aim for pixel perfect design.
- Standalone with no dependencies
- Flexbox and 12-column grid
remunits for scalable layouts- No
!importantrules - Mobile-first breakpoints where it matters
6.7 kBgziped
Difference from others
Tools like Tachyons, Tailwind, Basscss and Blueprint provide great functionality with similar approach. But they might be quite overwhelming and bloated with redunant or rarely used styles, old-fashion tweaks like clearfixes, float grids, etc. Also they are known for violating simple CSS class name conventions, making them hard to read and to use with some tools (e.g. Pug templating).
Cocktail aims for modern standard. It utilizes most frequently used styles and adheres KISS principle to create a solid ground for basic styling. The rest you can (and should) write on your own.
Getting started
Link Cocktail CSS stylesheet in your project before all other stylesheets with one of the options below.
CDN
The latest minified production-ready stylesheet is available via https://unpkg.com/cocktailcss:
Download
Download cocktail.css or cocktail.min.css and link it.
NPM
Install package with npm install cocktailcss.
Source
Cocktail is built with Sass (SCSS) and Gulp. You can customize your build the way you want. First, clone repository and install dependencies:
git clone https://github.com/cocktailcss/cocktail.git && cd cocktail && npm iRun npm start to start gulp task watcher. It will watch for .scss files changes and update cocktail.css and cocktail.min.css.
Docs
Breakpoints
Classes that support mobile-first breakpoints are marked with ✔️ symbol in Breakpoint support table column. These classes have a specific suffix to enable style at given viewport breakpoint.
| Device | Suffix | Media query |
|---|---|---|
| Smartphone | sm |
@media screen and (min-width: 576px) |
| Tablet | md |
@media screen and (min-width: 768px) |
| Netbook | lg |
@media screen and (min-width: 992px) |
| Notebook | xl |
@media screen and (min-width: 1200px) |
| Desktop | xxl |
@media screen and (min-width: 1600px) |
Usage examples:
| Class | Description |
|---|---|
flex--xxl |
1600px and above set display: flex |
hidden--md |
768px and above set display: none |
text-left--lg |
992px and above set text-align: left |
Contents
| Flow | Spacing | Appearance | Text |
|---|---|---|---|
| Display Flex Grid Overflow Position Z-index Float Trigger |
Width Height Margin Padding |
Border Background Cursor |
Font Text Color |
Display
| Class | Style | Breakpoint support |
|---|---|---|
block |
display: block |
✔️ |
inline-block |
display: inline-block |
✔️ |
inline |
display: inline |
✔️ |
flex |
display: flex |
✔️ |
inline-flex |
display: inline-flex |
✔️ |
grid |
display: gridgrid-template-columns: repeat(12, 1fr) |
✔️ |
hidden |
display: none |
✔️ |
transparent |
opacity: 0 |
✔️ |
opaque |
opacity: 1 |
✔️ |
invisible |
visibility: hidden |
✔️ |
visible |
visibility: visible |
✔️ |
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-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-start-1 |
grid-column-start: 1 |
✔️ |
grid-column-start-2 |
grid-column-start: 2 |
✔️ |
grid-column-start-3 |
grid-column-start: 3 |
✔️ |
grid-column-start-4 |
grid-column-start: 4 |
✔️ |
grid-column-start-5 |
grid-column-start: 5 |
✔️ |
grid-column-start-6 |
grid-column-start: 6 |
✔️ |
grid-column-start-7 |
grid-column-start: 7 |
✔️ |
grid-column-start-8 |
grid-column-start: 8 |
✔️ |
grid-column-start-9 |
grid-column-start: 9 |
✔️ |
grid-column-start-10 |
grid-column-start: 10 |
✔️ |
grid-column-start-11 |
grid-column-start: 11 |
✔️ |
grid-column-start-12 |
grid-column-start: 12 |
✔️ |
grid-column-gap-0 |
grid-column-gap: 0 |
✔️ |
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-row-gap-0 |
grid-row-gap: 0 |
✔️ |
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-gap-0 |
grid-gap: 0 |
✔️ |
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 |
✔️ |
Overflow
| Class | Style | Breakpoint support |
|---|---|---|
overflow-hidden |
overflow: hidden |
✔️ |
overflow-auto |
overflow: auto |
✔️ |
Position
| Class | Style | Breakpoint support |
|---|---|---|
static |
position: static |
✔️ |
relative |
position: relative |
✔️ |
absolute |
position: absolute |
✔️ |
fixed |
position: fixed |
✔️ |
sticky |
position: sticky |
✔️ |
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% |
❌ |
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-index-1 |
z-index: 1 |
❌ |
z-index-2 |
z-index: 2 |
❌ |
z-index-3 |
z-index: 3 |
❌ |
z-index-4 |
z-index: 4 |
❌ |
z-index-5 |
z-index: 5 |
❌ |
Float
| Class | Style | Breakpoint support |
|---|---|---|
float-left |
float: left |
❌ |
float-right |
float: right |
❌ |
Trigger
| Class | Style | Breakpoint support |
|---|---|---|
toggle-trigger |
Toggle display for toggle-content general sibling 1 |
❌ |
hover-trigger |
Hover display for hover-content child 2 |
❌ |
/*1*//*2*/Width
| Class | Style | Breakpoint support |
|---|---|---|
max-width-full |
max-width: 100% |
✔️ |
max-width-full-view |
max-width: 100vw |
✔️ |
min-width-full |
min-width: 100% |
✔️ |
min-width-full-view |
min-width: 100vw |
✔️ |
width-full |
width: 100% |
✔️ |
width-auto |
width: auto |
✔️ |
Height
| Class | Style | Breakpoint support |
|---|---|---|
max-height-full |
max-height: 100% |
✔️ |
max-height-full-view |
max-height: 100vh |
✔️ |
min-height-full |
min-height: 100% |
✔️ |
min-height-full-view |
min-height: 100vh |
✔️ |
height-full |
height: 100% |
✔️ |
height-full-view |
height: 100vh |
✔️ |
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-0 |
margin-top: 0margin-right: 0margin-bottom: 0margin-left: 0 |
✔️ |
margin-1 |
margin-top: 0.25remmargin-right: 0.25remmargin-bottom: 0.25remmargin-left: 0.25rem |
✔️ |
margin-2 |
margin-top: 0.5remmargin-right: 0.5remmargin-bottom: 0.5remmargin-left: 0.5rem |
✔️ |
margin-3 |
margin-top: 1remmargin-right: 1remmargin-bottom: 1remmargin-left: 1rem |
✔️ |
margin-4 |
margin-top: 2remmargin-right: 2remmargin-bottom: 2remmargin-left: 2rem |
✔️ |
margin-5 |
margin-top: 4remmargin-right: 4remmargin-bottom: 4remmargin-left: 4rem |
✔️ |
margin-6 |
margin-top: 8remmargin-right: 8remmargin-bottom: 8remmargin-left: 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 |
✔️ |
padding-0 |
padding-top: 0padding-right: 0padding-bottom: 0padding-left: 0 |
✔️ |
padding-1 |
padding-top: 0.25rempadding-right: 0.25rempadding-bottom: 0.25rempadding-left: 0.25rem |
✔️ |
padding-2 |
padding-top: 0.5rempadding-right: 0.5rempadding-bottom: 0.5rempadding-left: 0.5rem |
✔️ |
padding-3 |
padding-top: 1rempadding-right: 1rempadding-bottom: 1rempadding-left: 1rem |
✔️ |
padding-4 |
padding-top: 2rempadding-right: 2rempadding-bottom: 2rempadding-left: 2rem |
✔️ |
padding-5 |
padding-top: 4rempadding-right: 4rempadding-bottom: 4rempadding-left: 4rem |
✔️ |
padding-6 |
padding-top: 8rempadding-right: 8rempadding-bottom: 8rempadding-left: 8rem |
✔️ |
Border
| 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-4 |
border-radius: 1rem |
❌ |
border-rounded-5 |
border-radius: 2rem |
❌ |
border-rounded-max |
border-radius: 9999px |
❌ |
Background
| 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 |
❌ |
bg-cover |
background-size: cover |
❌ |
bg-contain |
background-size: contain |
❌ |
bg-width-full |
background-size: 100% auto |
❌ |
bg-height-full |
background-size: auto 100% |
❌ |
bg-no-repeat |
background-repeat: no-repeat |
❌ |
bg-fixed |
background-attachment: fixed |
❌ |
bg-white |
background-color: white |
❌ |
Cursor
| Class | Style | Breakpoint support |
|---|---|---|
cursor-default |
cursor: default |
❌ |
cursor-pointer |
cursor: pointer |
❌ |
cursor-wait |
cursor: wait |
❌ |
cursor-progress |
cursor: progress |
❌ |
cursor-not |
cursor: not-allowed |
❌ |
cursor-help |
cursor: help |
❌ |
cursor-zoom-in |
cursor: zoom-in |
❌ |
no-select |
user-select: none |
❌ |
no-pointer-events |
pointer-events: none |
❌ |
Font
| Class | Style | Breakpoint support |
|---|---|---|
font-xs |
font-size: 0.75rem |
✔️ |
font-sm |
font-size: 0.875rem |
✔️ |
font-nl |
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-light |
font-weight: 300 |
❌ |
font-normal |
font-weight: normal |
❌ |
font-medium |
font-weight: 500 |
❌ |
font-bold |
font-weight: bold |
❌ |
font-black |
font-weight: 900 |
❌ |
font-italic |
font-style: italic |
❌ |
Text
| Class | Style | Breakpoint support |
|---|---|---|
text-center |
text-align: center |
✔️ |
text-left |
text-align: left |
✔️ |
text-right |
text-align: right |
✔️ |
text-top |
vertical-align: top |
❌ |
text-middle |
vertical-align: middle |
❌ |
text-bottom |
vertical-align: bottom |
❌ |
text-baseline |
vertical-align: baseline |
❌ |
text-nowrap |
white-space: nowrap |
❌ |
text-break |
word-break: break-all |
❌ |
text-dots |
text-overflow: ellipsis |
❌ |
text-tight |
line-height: 1.25 |
❌ |
text-average |
line-height: 1.5 |
❌ |
text-loose |
line-height: 2 |
❌ |
text-upper |
text-transform: uppercase |
❌ |
text-lower |
text-transform: lowercase |
❌ |
no-list |
list-style: none |
❌ |
Color
| Class | Style | Breakpoint support |
|---|---|---|
color-white |
color: white |
❌ |
color-black |
color: black |
❌ |
Reference
- Cocktail is heavily inspired by tachyons, tailwind, basscss and blueprint.
- Svg icon by Stefan Mihaylov.
License
This project is licensed under the MIT License - see the LICENSE file for details.