tiny-trim.css

Tiny trim CSS class utils for Element, Bootstrap, etc.

TOC

• tiny-trim.css - TOC - Use - Utils sheet - Custom

Use

1. Install from npm package.

   $ npm i tiny-trim.css -S

2. Import to project.

   import 'tiny-trim.css'

3. Enjoy it!

Utils sheet

| Selector | Declaration | | -------------- | ----------------------- | | position | ----------------------- | | .pos-a | position: absolute | | .pos-r | position: relative | | .pos-s | position: static | | .pos-f | position: fixed | | display | ----------------------- | | .dp-i | display: inline | | .dp-b | display: block | | .dp-n | display: none | | .dp-ib | display: inline-block | | visibility | ----------------------- | | .vs-h | visibility: hidden | | .vs-v | visibility: visible | | box-sizing | ----------------------- | | .bs-bb | box-sizing: border-box | | .bs-cb | box-sizing: content-box | | overflow | ----------------------- | | .of-h | overflow: hidden | | .of-v | overflow: visible | | .of-s | overflow: scroll | | .of-a | overflow: auto | | .ox-h | overflow-x: hidden | | .ox-v | overflow-x: visible | | .ox-s | overflow-x: scroll | | .ox-a | overflow-x: auto | | .oy-h | overflow-y: hidden | | .oy-v | overflow-y: visible | | .oy-s | overflow-y: scroll | | .oy-a | overflow-y: auto | | top | ----------------------- | | .t-0 | top: 0 | | .t-5 | top: 5px | | .t-10 | top: 10px | | .t-15 | top: 15px | | right | ----------------------- | | .r-0 | right: 0 | | .r-5 | right: 5px | | .r-10 | right: 10px | | .r-15 | right: 15px | | bottom | ----------------------- | | .b-0 | bottom: 0 | | .b-5 | bottom: 5px | | .b-10 | bottom: 10px | | .b-15 | bottom: 15px | | left | ----------------------- | | .l-0 | left: 0 | | .l-5 | left: 5px | | .l-10 | left: 10px | | .l-15 | left: 15px | | margin | ----------------------- | | .m-0 | margin: 0 | | .m-5 | margin: 5px | | .m-10 | margin: 10px | | .m-15 | margin: 15px | | .mt-0 | margin-top: 0 | | .mt-5 | margin-top: 5px | | .mt-10 | margin-top: 10px | | .mt-15 | margin-top: 15px | | .mr-0 | margin-right: 0 | | .mr-5 | margin-right: 5px | | .mr-10 | margin-right: 10px | | .mr-15 | margin-right: 15px | | .mb-0 | margin-bottom: 0 | | .mb-5 | margin-bottom: 5px | | .mb-10 | margin-bottom: 10px | | .mb-15 | margin-bottom: 15px | | .ml-0 | margin-left: 0 | | .ml-5 | margin-left: 5px | | .ml-10 | margin-left: 10px | | .ml-15 | margin-left: 15px | | padding | ----------------------- | | .p-0 | padding: 0 | | .p-5 | padding: 5px | | .p-10 | padding: 10px | | .p-15 | padding: 15px | | .pt-0 | padding-top: 0 | | .pt-5 | padding-top: 5px | | .pt-10 | padding-top: 10px | | .pt-15 | padding-top: 15px | | .pr-0 | padding-right: 0 | | .pr-5 | padding-right: 5px | | .pr-10 | padding-right: 10px | | .pr-15 | padding-right: 15px | | .pb-0 | padding-bottom: 0 | | .pb-5 | padding-bottom: 5px | | .pb-10 | padding-bottom: 10px | | .pb-15 | padding-bottom: 15px | | .pl-0 | padding-left: 0 | | .pl-5 | padding-left: 5px | | .pl-10 | padding-left: 10px | | .pl-15 | padding-left: 15px | | text-align | ----------------------- | | .ta-l | text-align: left | | .ta-r | text-align: right | | .ta-c | text-align: center | | .ta-j | text-align: justify | | .ta-i | text-align: initial | | others | ----------------------- | | .td-none | text-decoration: none | | .bd-none | border: none | | .wd-100 | width: 100% |

Custom

1. Clone this repository.

   $ git clone https://github.com/BearD01001/tiny-trim.css.git

2. Install dependencies.

   $ cd tiny-trim.css/ && npm i

3. Run building task.

   $ npm start

4. Modify src/config.scss or src/tiny-trim.scss.

5. Got your own custom files in the dist/ directory.