https://github.com/steinathan/helper-css
Common CSS helper classes. Needed often with plain Bootstrap.
https://github.com/steinathan/helper-css
Last synced: 4 months ago
JSON representation
Common CSS helper classes. Needed often with plain Bootstrap.
- Host: GitHub
- URL: https://github.com/steinathan/helper-css
- Owner: steinathan
- License: gpl-3.0
- Created: 2020-07-09T18:48:53.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2017-06-02T19:58:25.000Z (almost 9 years ago)
- Last Synced: 2025-04-12T02:39:04.247Z (about 1 year ago)
- Size: 24.4 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Helper CSS
Common CSS helper classes. Focus on missing padding and margin styles in Bootstrap 3.
## Install
Install with Npm or Bower
### npm
To install with npm run
```
$ npm install helper-css --save
```
### Bower
To install with Bower run
```
$ bower install helper-css --save
```
## Usage
Include `helper-css.min.css` style in your page and start using css helper classes.
### CSS Helper Classes
CSS helper classes cover four areas - margin, padding, text and general.
#### CSS Helpers for margin and Padding
All _margin_ and _padding_ have properties for distances 0, 5, 10, 15, 20, 30, 40, 50, 60, 80, 100, 150 and 200 px.
Margin classes starts with `m`, padding classes starts `p`.
Following is the number that represents space in pixels and (optional) direction. Direction can be `top`, `lft`, `rgt` and `btm`.
Example:
* `m0`: assigns `margin: 0` property
* `m50lft`: assigns `margin-left: 50px` property
* `p10`: assigns `padding: 10px` property
* `p20btm`: assigns `padding-bottom: 20px` property
* `p10top p10btm m20rgt`: assigns `padding-top: 10px; padding-bottom: 10px; margin-right: 20px` property
#### CSS Helpers for Text
Text CSS Helpers contain set of text styling classes for text display and size.
*Text Display*
* `text-strong`: assigns `font-weight: bold` property
* `text-strike`: assigns `text-decoration: line-through` property
*Text Size*
Text size can be adjusted by using `text-` where `` can take _t-shirt_ value: xs, s, m, l, xl, xxl.
* `text-xs`: assigns `font-size: 70%` property
* `text-s`: assigns `font-size: 85%` property
* `text-m`: assigns `font-size: 100%` property
* `text-l`: assigns `font-size: 115%` property
* `text-xl`: assigns `font-size: 130%` property
* `text-xxl`: assigns `font-size: 145%` property
---
As any other classes, helper classes can be combined together.
### Usage example:
For given `div` element:
```
...
```
output would be the same as:
```
...
```