Drops NPM | npm.io

First, you add it to your HTML:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/yegor256/drops@gh-pages/drops.min.css"/>
  </head>
</html>

And then, instead of this:

<p style="color: tomato; font-weight: bold; text-align: right;">Hello</p>

You do this:

<p class="tomato bold right">Hello</p>

Here is a full list of "drops" (excluding the colors):

CSS class	Style
`bold`	`font-weight: bold;`
`italic`	`font-style: italic;`
`underline`	`text-decoration: underline;`
`monospace`	`font-family: monospace;`
`serif`	`font-family: serif;`
`sans-serif`	`font-family: sans-serif;`
`right`	`text-align: right;`
`left`	`text-align: left;`
`center`	`text-align: center;`
`smaller`	`font-size: .8em;`
`larger`	`font-size: 1.2em;`
`invisible`	`display: none;`
`block`	`display: block;`
`inline`	`display: inline;`
`inline-block`	`display: inline-block;`
`position-static`	`position: static;`
`position-relative`	`position: relative;`
`position-absolute`	`position: absolute;`
`position-fixed`	`position: fixed;`
`position-sticky`	`position: sticky;`

There is also a set of drops for responsive design, like desktop-only and no-printer for desktop, printer, mobile, and tablet.

Also, all 140 web colors are supported, like tomato or blueviolet.

How to contribute

Fork repository, make changes, send us a pull request. We will review your changes and apply them to the master branch shortly, provided they don't violate our quality standards. To avoid frustration, before sending us your pull request please run full Grunt build: