https://github.com/yegor256/drops

Primitive CSS classes to replace most commonly used CSS styles
https://github.com/yegor256/drops

css css-framework html html-css

Last synced: 5 days ago
JSON representation

Primitive CSS classes to replace most commonly used CSS styles

• Host: GitHub
• URL: https://github.com/yegor256/drops
• Owner: yegor256
• License: mit
• Created: 2019-09-23T13:23:48.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-05-22T00:45:52.000Z (6 months ago)
• Last Synced: 2024-05-22T01:39:39.657Z (6 months ago)
• Topics: css, css-framework, html, html-css
• Language: SCSS
• Homepage: https://www.npmjs.com/package/drops
• Size: 67.4 KB
• Stars: 11
• Watchers: 6
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• Awesome-CSS-Resources - drops:

README

        
[![DevOps By Rultor.com](http://www.rultor.com/b/yegor256/drops)](http://www.rultor.com/p/yegor256/drops)

[![grunt](https://github.com/yegor256/drops/actions/workflows/grunt.yml/badge.svg)](https://github.com/yegor256/drops/actions/workflows/grunt.yml)

[![PDD status](http://www.0pdd.com/svg?name=yegor256/drops)](http://www.0pdd.com/p?name=teamed/yegor256/drops)

[![License](https://img.shields.io/badge/license-MIT-green.svg)](https://github.com/yegor256/drops/blob/master/LICENSE.txt)

[![NPM version](https://badge.fury.io/js/drops.svg)](http://badge.fury.io/js/drops)

[![Hits-of-Code](https://hitsofcode.com/github/yegor256/drops)](https://hitsofcode.com/view/github/yegor256/drops)

First, you add it to your HTML:

```html

  

    

  

```

And then, instead of this:

```html

Hello

```


You do this:

```html

Hello

```


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](https://en.wikipedia.org/wiki/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

```