Skip to content

yegor256/drops

Repository files navigation

DevOps By Rultor.com

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

$ npm install
$ npm test