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.
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