3.7.0 • Published 4 years ago

cocktailcss v3.7.0

Weekly downloads
13
License
MIT
Repository
github
Last release
4 years ago

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 :heavy_check_mark: symbol in Breakpoint support table column. These classes have a specific suffix to enable style at given viewport breakpoint.

DeviceSuffixMedia query
Smartphonesm@media screen and (min-width: 576px)
Tabletmd@media screen and (min-width: 768px)
Netbooklg@media screen and (min-width: 992px)
Notebookxl@media screen and (min-width: 1200px)
Desktopxxl@media screen and (min-width: 1600px)

Usage examples:

ClassDescription
flex--xxl1600px and above set display: flex
hidden--md768px and above set display: none
text-left--lg992px and above set text-align: left

Contents

FlowSpacingAppearanceText
DisplayFlexGridOverflowPositionZ-indexFloatTriggerWidthHeightMarginPaddingBorderBackgroundCursorFontTextColor

Display

↑ Back to contents

ClassStyleBreakpoint support
blockdisplay: block:heavy_check_mark:
inline-blockdisplay: inline-block:heavy_check_mark:
inlinedisplay: inline: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:
transparentopacity: 0:heavy_check_mark:
opaqueopacity: 1:heavy_check_mark:
invisiblevisibility: hidden:heavy_check_mark:
visiblevisibility: visible: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-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-start-1grid-column-start: 1:heavy_check_mark:
grid-column-start-2grid-column-start: 2:heavy_check_mark:
grid-column-start-3grid-column-start: 3:heavy_check_mark:
grid-column-start-4grid-column-start: 4:heavy_check_mark:
grid-column-start-5grid-column-start: 5:heavy_check_mark:
grid-column-start-6grid-column-start: 6:heavy_check_mark:
grid-column-start-7grid-column-start: 7:heavy_check_mark:
grid-column-start-8grid-column-start: 8:heavy_check_mark:
grid-column-start-9grid-column-start: 9:heavy_check_mark:
grid-column-start-10grid-column-start: 10:heavy_check_mark:
grid-column-start-11grid-column-start: 11:heavy_check_mark:
grid-column-start-12grid-column-start: 12:heavy_check_mark:
grid-column-gap-0grid-column-gap: 0: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-row-gap-0grid-row-gap: 0: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-gap-0grid-gap: 0: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:

Overflow

↑ Back to contents

ClassStyleBreakpoint support
overflow-hiddenoverflow: hidden:heavy_check_mark:
overflow-autooverflow: auto:heavy_check_mark:

Position

↑ Back to contents

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

Z-index

↑ Back to contents

ClassStyleBreakpoint support
z-index-1z-index: 1:x:
z-index-2z-index: 2:x:
z-index-3z-index: 3:x:
z-index-4z-index: 4:x:
z-index-5z-index: 5:x:

Float

↑ Back to contents

ClassStyleBreakpoint support
float-leftfloat: left:x:
float-rightfloat: right:x:

Trigger

↑ Back to contents

ClassStyleBreakpoint support
toggle-triggerToggle display for toggle-content general sibling 1:x:
hover-triggerHover display for hover-content child 2:x:
/*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

ClassStyleBreakpoint support
max-width-fullmax-width: 100%:heavy_check_mark:
max-width-full-viewmax-width: 100vw:heavy_check_mark:
min-width-fullmin-width: 100%:heavy_check_mark:
min-width-full-viewmin-width: 100vw:heavy_check_mark:
width-fullwidth: 100%:heavy_check_mark:
width-autowidth: auto:heavy_check_mark:

Height

↑ Back to contents

ClassStyleBreakpoint support
max-height-fullmax-height: 100%:heavy_check_mark:
max-height-full-viewmax-height: 100vh:heavy_check_mark:
min-height-fullmin-height: 100%:heavy_check_mark:
min-height-full-viewmin-height: 100vh:heavy_check_mark:
height-fullheight: 100%:heavy_check_mark:
height-full-viewheight: 100vh: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-0margin-top: 0margin-right: 0margin-bottom: 0margin-left: 0:heavy_check_mark:
margin-1margin-top: 0.25remmargin-right: 0.25remmargin-bottom: 0.25remmargin-left: 0.25rem:heavy_check_mark:
margin-2margin-top: 0.5remmargin-right: 0.5remmargin-bottom: 0.5remmargin-left: 0.5rem:heavy_check_mark:
margin-3margin-top: 1remmargin-right: 1remmargin-bottom: 1remmargin-left: 1rem:heavy_check_mark:
margin-4margin-top: 2remmargin-right: 2remmargin-bottom: 2remmargin-left: 2rem:heavy_check_mark:
margin-5margin-top: 4remmargin-right: 4remmargin-bottom: 4remmargin-left: 4rem:heavy_check_mark:
margin-6margin-top: 8remmargin-right: 8remmargin-bottom: 8remmargin-left: 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:
padding-0padding-top: 0padding-right: 0padding-bottom: 0padding-left: 0:heavy_check_mark:
padding-1padding-top: 0.25rempadding-right: 0.25rempadding-bottom: 0.25rempadding-left: 0.25rem:heavy_check_mark:
padding-2padding-top: 0.5rempadding-right: 0.5rempadding-bottom: 0.5rempadding-left: 0.5rem:heavy_check_mark:
padding-3padding-top: 1rempadding-right: 1rempadding-bottom: 1rempadding-left: 1rem:heavy_check_mark:
padding-4padding-top: 2rempadding-right: 2rempadding-bottom: 2rempadding-left: 2rem:heavy_check_mark:
padding-5padding-top: 4rempadding-right: 4rempadding-bottom: 4rempadding-left: 4rem:heavy_check_mark:
padding-6padding-top: 8rempadding-right: 8rempadding-bottom: 8rempadding-left: 8rem:heavy_check_mark:

Border

↑ 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-4border-radius: 1rem:x:
border-rounded-5border-radius: 2rem:x:
border-rounded-maxborder-radius: 9999px:x:

Background

↑ 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:
bg-coverbackground-size: cover:x:
bg-containbackground-size: contain:x:
bg-width-fullbackground-size: 100% auto:x:
bg-height-fullbackground-size: auto 100%:x:
bg-no-repeatbackground-repeat: no-repeat:x:
bg-fixedbackground-attachment: fixed:x:
bg-whitebackground-color: white:x:

Cursor

↑ Back to contents

ClassStyleBreakpoint support
cursor-defaultcursor: default:x:
cursor-pointercursor: pointer:x:
cursor-waitcursor: wait:x:
cursor-progresscursor: progress:x:
cursor-notcursor: not-allowed:x:
cursor-helpcursor: help:x:
cursor-zoom-incursor: zoom-in:x:
no-selectuser-select: none:x:
no-pointer-eventspointer-events: none:x:

Font

↑ Back to contents

ClassStyleBreakpoint support
font-xsfont-size: 0.75rem:heavy_check_mark:
font-smfont-size: 0.875rem:heavy_check_mark:
font-nlfont-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-lightfont-weight: 300:x:
font-normalfont-weight: normal:x:
font-mediumfont-weight: 500:x:
font-boldfont-weight: bold:x:
font-blackfont-weight: 900:x:
font-italicfont-style: italic:x:

Text

↑ 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:
text-topvertical-align: top:x:
text-middlevertical-align: middle:x:
text-bottomvertical-align: bottom:x:
text-baselinevertical-align: baseline:x:
text-nowrapwhite-space: nowrap:x:
text-breakword-break: break-all:x:
text-dotstext-overflow: ellipsis:x:
text-tightline-height: 1.25:x:
text-averageline-height: 1.5:x:
text-looseline-height: 2:x:
text-uppertext-transform: uppercase:x:
text-lowertext-transform: lowercase:x:
no-listlist-style: none:x:

Color

↑ Back to contents

ClassStyleBreakpoint support
color-whitecolor: white:x:
color-blackcolor: black:x:

Reference

License

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

responsivecssstyleutilitymodularhelperfunctionalperformance
browser-syncgulpgulp-autoprefixergulp-clean-cssgulp-group-css-media-queriesgulp-puggulp-renamegulp-sassgulp-size
@everything-registry/sub-chunk-1347
3.7.0

4 years ago

3.6.0

4 years ago

3.5.0

4 years ago

3.4.0

4 years ago

3.3.0

4 years ago

3.2.1

4 years ago

3.1.0

4 years ago

3.0.0

5 years ago

2.0.4

5 years ago

2.0.3

5 years ago

2.0.2

5 years ago

2.0.1

5 years ago

2.0.0

6 years ago

1.1.5

6 years ago

1.1.4

6 years ago

1.1.3

6 years ago

1.1.2

6 years ago

1.0.2

6 years ago

1.0.1

6 years ago

1.0.0

6 years ago