Skip to content

cocktailcss/cocktail

Repository files navigation

logo

npm version



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
  • rem units for scalable layouts
  • No !important rules
  • Mobile-first breakpoints where it matters
  • 6.7 kB gziped

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:

<head>
  <link rel="stylesheet" href="https://unpkg.com/cocktailcss">
</head>

Download

Download cocktail.css or cocktail.min.css and link it.

<head>
  <link rel="stylesheet" href="style/cocktail.min.css">
</head>

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 i

Run 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

↑ Back to contents

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: grid
grid-template-columns: repeat(12, 1fr)
✔️
hidden display: none ✔️
transparent opacity: 0 ✔️
opaque opacity: 1 ✔️
invisible visibility: hidden ✔️
visible visibility: visible ✔️

Flex

↑ Back to contents

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

↑ Back to contents

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

↑ Back to contents

Class Style Breakpoint support
overflow-hidden overflow: hidden ✔️
overflow-auto overflow: auto ✔️

Position

↑ Back to contents

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: 0
right: 0
bottom: 0
left: 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

↑ Back to contents

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

↑ Back to contents

Class Style Breakpoint support
float-left float: left
float-right float: right

Trigger

↑ Back to contents

Class Style Breakpoint support
toggle-trigger Toggle display for toggle-content general sibling 1
hover-trigger Hover display for hover-content child 2
/*1*/
.toggle-trigger:checked ~ .toggle-content {
  display: block;
}
/*2*/
.hover-trigger:hover .hover-content,
.hover-trigger:focus .hover-content {
  display: block;
}

Width

↑ Back to contents

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

↑ Back to contents

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

↑ Back to contents

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: 0
margin-right: 0
✔️
margin-x-1 margin-left: 0.25rem
margin-right: 0.25rem
✔️
margin-x-2 margin-left: 0.5rem
margin-right: 0.5rem
✔️
margin-x-3 margin-left: 1rem
margin-right: 1rem
✔️
margin-x-4 margin-left: 2rem
margin-right: 2rem
✔️
margin-x-5 margin-left: 4rem
margin-right: 4rem
✔️
margin-x-6 margin-left: 8rem
margin-right: 8rem
✔️
margin-y-0 margin-top: 0
margin-bottom: 0
✔️
margin-y-1 margin-top: 0.25rem
margin-bottom: 0.25rem
✔️
margin-y-2 margin-top: 0.5rem
margin-bottom: 0.5rem
✔️
margin-y-3 margin-top: 1rem
margin-bottom: 1rem
✔️
margin-y-4 margin-top: 2rem
margin-bottom: 2rem
✔️
margin-y-5 margin-top: 4rem
margin-bottom: 4rem
✔️
margin-y-6 margin-top: 8rem
margin-bottom: 8rem
✔️
margin-0 margin-top: 0
margin-right: 0
margin-bottom: 0
margin-left: 0
✔️
margin-1 margin-top: 0.25rem
margin-right: 0.25rem
margin-bottom: 0.25rem
margin-left: 0.25rem
✔️
margin-2 margin-top: 0.5rem
margin-right: 0.5rem
margin-bottom: 0.5rem
margin-left: 0.5rem
✔️
margin-3 margin-top: 1rem
margin-right: 1rem
margin-bottom: 1rem
margin-left: 1rem
✔️
margin-4 margin-top: 2rem
margin-right: 2rem
margin-bottom: 2rem
margin-left: 2rem
✔️
margin-5 margin-top: 4rem
margin-right: 4rem
margin-bottom: 4rem
margin-left: 4rem
✔️
margin-6 margin-top: 8rem
margin-right: 8rem
margin-bottom: 8rem
margin-left: 8rem
✔️
margin-x-auto margin-left: auto
margin-right: auto
✔️
margin-y-auto margin-top: auto
margin-bottom: auto
✔️

Padding

↑ Back to contents

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: 0
padding-right: 0
✔️
padding-x-1 padding-left: 0.25rem
padding-right: 0.25rem
✔️
padding-x-2 padding-left: 0.5rem
padding-right: 0.5rem
✔️
padding-x-3 padding-left: 1rem
padding-right: 1rem
✔️
padding-x-4 padding-left: 2rem
padding-right: 2rem
✔️
padding-x-5 padding-left: 4rem
padding-right: 4rem
✔️
padding-x-6 padding-left: 8rem
padding-right: 8rem
✔️
padding-y-0 padding-top: 0
padding-bottom: 0
✔️
padding-y-1 padding-top: 0.25rem
padding-bottom: 0.25rem
✔️
padding-y-2 padding-top: 0.5rem
padding-bottom: 0.5rem
✔️
padding-y-3 padding-top: 1rem
padding-bottom: 1rem
✔️
padding-y-4 padding-top: 2rem
padding-bottom: 2rem
✔️
padding-y-5 padding-top: 4rem
padding-bottom: 4rem
✔️
padding-y-6 padding-top: 8rem
padding-bottom: 8rem
✔️
padding-0 padding-top: 0
padding-right: 0
padding-bottom: 0
padding-left: 0
✔️
padding-1 padding-top: 0.25rem
padding-right: 0.25rem
padding-bottom: 0.25rem
padding-left: 0.25rem
✔️
padding-2 padding-top: 0.5rem
padding-right: 0.5rem
padding-bottom: 0.5rem
padding-left: 0.5rem
✔️
padding-3 padding-top: 1rem
padding-right: 1rem
padding-bottom: 1rem
padding-left: 1rem
✔️
padding-4 padding-top: 2rem
padding-right: 2rem
padding-bottom: 2rem
padding-left: 2rem
✔️
padding-5 padding-top: 4rem
padding-right: 4rem
padding-bottom: 4rem
padding-left: 4rem
✔️
padding-6 padding-top: 8rem
padding-right: 8rem
padding-bottom: 8rem
padding-left: 8rem
✔️

Border

↑ Back to contents

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

↑ Back to contents

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

↑ Back to contents

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

↑ Back to contents

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

↑ Back to contents

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

↑ Back to contents

Class Style Breakpoint support
color-white color: white
color-black color: black

Reference

License

This project is licensed under the MIT License - see the LICENSE file for details.