drops

Primitive CSS classes to replace most commonly used styles

Usage no npm install needed!

<script type="module">
  import drops from 'https://cdn.skypack.dev/drops';
</script>

README

DevOps By Rultor.com

Build Status PDD status License NPM version Hits-of-Code

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":

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;

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:

$ npm install
$ npm test