Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/brunocarvalhodearaujo/helper.css

css classes allow you to build your custom layout without touching any CSS code
https://github.com/brunocarvalhodearaujo/helper.css

bootstrap css helper

Last synced: 9 days ago
JSON representation

css classes allow you to build your custom layout without touching any CSS code

Host: GitHub
URL: https://github.com/brunocarvalhodearaujo/helper.css
Owner: brunocarvalhodearaujo
License: mit
Created: 2017-07-20T16:11:29.000Z (over 7 years ago)
Default Branch: master
Last Pushed: 2018-07-08T19:37:19.000Z (over 6 years ago)
Last Synced: 2024-09-18T10:43:24.415Z (about 2 months ago)
Topics: bootstrap, css, helper
Language: CSS
Homepage:
Size: 56.6 KB
Stars: 0
Watchers: 2
Forks: 0
Open Issues: 0
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

        # helper.css

[![npm version](https://badge.fury.io/js/helper.css.svg)](http://badge.fury.io/js/helper.css)

[![License](https://img.shields.io/npm/l/helper.css.svg)](https://www.npmjs.com/package/helper.css) 

[![devDependency Status](https://david-dm.org/brunocarvalhodearaujo/helper.css/dev-status.svg?style=flat-square)](https://david-dm.org/brunocarvalhodearaujo/helper.css#info=devDependencies)

helper css classes allow you to build your custom layout without touching any CSS code

these classes are generic helper classes predifined in the CSS of pages, here is quick view what they can do

  - Set margins - Available for all directions from 5 - 90 px stepping value 5px

  - Set padding - Available for all directions from 5 - 90 px stepping value 5px

  - Set border - Available for all sides, default pages border color

  - Border Radius - Option to set border radius, size sm / md / lg

## Margins

You can add this helper class to any element in your HTML code to set Margins

FIRST PREFIX ( M-*) | SECOND PREFIX(M-T/B/L/R-*) | LAST PREFIX(M-T-$VALUE)

|-------------------|-----------------------------|--------------------------|

m for margin |	t : top, b : bottom, l : left, r : right |	5,10,15,20, ... 90

### EXAMPLE

  - `m-t-10` which means Margin Top 10px

  - `m-b-20` which means Margin Bottom 20px

  - `m-l-5` which means Margin Left 5px

  - `m-r-35` which means Margin Right 35px

### RULE

Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15

### OTHER OPTIONS

To remove margin from a HTML element add the class `no-margin`

`````html



  I have a 10px margin in bottom



`````

## Padding

You can add this helper class to any element in your HTML code to set Padding

FIRST PREFIX ( P-*) | SECOND PREFIX(P-T/B/L/R-*) |	LAST PREFIX(P-T-$VALUE)

|-------------------|-----------------------------|--------------------------|

p for padding |	t : top, b : bottom, l : left, r : right |	5,10,15,20,... 90

### EXAMPLE :

  - `p-t-10` which means Padding Top 10px

  - `p-b-20` which means Padding Bottom 20px

  - `p-l-5` which means Padding Left 5px

  - `p-r-35` which means Padding Right 35px

### RULE

Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15

### OTHER OPTIONS

To remove padding from a HTML element add the class `no-padding`

### EXAMPLE :

`````html



  I have a 10px padding in bottom



`````

## Border

You can add this helper class to any element in your HTML code to set Border, border currently supports one pixel

FIRST PREFIX ( B-*)	| SECOND PREFIX(B-T/B/L/R/A-*)

|-------------------|-----------------------------|

b for border | t : top, b : bottom, l : left, r : right, a : all

### Border Style

  - `b-dashed` - change the border style to 'dashed'

  - `b-thick` - change the border width to 2px

### Border Radius

Helpy class to apply quick border radius.

  - `b-rad-sm` 3px border radius

  - `b-rad-md` 5px border radius

  - `b-rad-lg` 7px border radius

### EXAMPLE :

`````html



  I have a bottom border



`````

## Absolute positioning

Makes elements to have `position:absolute`. Add .relative to the parent of the element

that you want to be absolute to have relative positioning

````html



  

  center

  Top-left

  

  Bottom-left

  Top-right

  Bottom-right



````

it is also possible to mix two or more classes. ex: Mixing top-left top-right will produce the following CSS styling

`top:0; left:0; right:0`

## Font Size

If you wish to change the default font size, then you can apply the following classes,

accept 5,10,15,...,100

`````html

Font Size 5px 


Font Size 10px 


Font Size 15px 

`````

## Font Weights

````html

Thinnest


Semi-bold


Most Boldest

````

## Misc. classes

CLASS NAME | DESCRIPTION

|----------|------------|

`full-width` | Spans the element to have 100% width of the parent

`full-height` | Spans the element to have 100% height of the parent

`scrollable` | adds `overflow-y:auto`

`center-margin` | Adds `margin-left:auto; margin-right:auto`. Useful when center aligning any div

`hide` | Hides any element

`inline` | Adds `display:inline-block`

`break-word`| Adds breaking line word

`bg-blur`| Adds gausian blur as background color

`hint-text` | add more opacity into element

`all-caps` | capitalize all strings