Data

Tools

Indexes

Applications

Experiments

Awesome

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

https://github.com/buuug7/utilities-css

Simple and easy to use utilities CSS
https://github.com/buuug7/utilities-css

css utilities

Last synced: about 1 year ago
JSON representation

Simple and easy to use utilities CSS

Awesome Lists containing this project

README 

          
# Utility CSS



Simple and easy to use utilities CSS, inspired by [tailwindcss](https://github.com/tailwindcss/tailwindcss), but the

tailwindcss is more complex and verbose to use. This only focused on wrap the most common used css into class name. Most

of them is steal from [Bootstrap](https://github.com/twbs/bootstrap) utilities.



 


    

        npm version

  	

  	

  	    npm downloads 

  	

  	

  	   minified size

  	

 



## Usage



```

npm install utilities-css

```



Or from CDN



```



```



## Utilities



#### Display



The naming is `display-{value}`, `{value}` is one

of `none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex, grid`.



```html

some text


```



#### Float



Beware the float utilities have no effect on flex items. `float-{value}`, `{value}` is one of `left, right, none`.



```html

some text


```



#### Position



The naming is `position-{value}`, `{value}` is one of `static, relative, absolute, fixed, sticky`.



```html

some text


```



#### Visibility



The naming is `visible` or `invisible`.



```html



```



#### Overflow



The naming as blow



- `overflow-{value}`, {value} is one of `visible, hidden, scroll, auto`

- `overflow-{x|y}-{value}`, {value} is one of `visible, hidden, scroll, auto`



```html

some text


some text


```



#### z-index



The naming is `z-{value}`, {value} for 0|10|20|30|40|50|auto



```html

some text


```



#### Spacing



The classes are naming using the format `{property}{sides}-{size}`



The `{property}` is one of:



- **m** for classes that set margin

- **p** for classes that set padding



Where {sides} is one of:



- **t** for classes that set margin-top or padding-top

- **b** for classes that set margin-bottom or padding-bottom

- **l** for classes that set margin-left or padding-left

- **r** for classes that set margin-right or padding-right

- **x** for classes that set both _-left and _-right

- **y** for classes that set both _-top and _-bottom

- **blank** for classes that set a margin or padding on all 4 sides of the element



Where {size} is one of:



- **0** for classes that eliminate the margin or padding by setting it to 0

- **1** for classes that set the margin or padding to `$spacer * .25`

- **2** for classes that set the margin or padding to `$spacer * .5`

- **3** for classes that set the margin or padding to `$spacer`

- **4** for classes that set the margin or padding to `$spacer * 1.5`

- **5** for classes that set the margin or padding to `$spacer * 3`

- **auto** for classes that set the margin to auto



> the `$spacer` default 1rem



Example:



```html



some text



some text



some text


```



#### Shadow



The shadow utility copied from bootstrap.



- `shadow-none`

- `shadow-sm`

- `shadow`

- `shadow-lg`



```html

some text


```



#### Border



The border default width is `1px solid #6c757d`



- `border`

- `border-top`

- `border-right`

- `border-bottom`

- `border-left`



Border style:



- `border-solid`

- `border-dashed`

- `border-dotted`

- `border-none`



Border width:



- `.border-{0|1|2|3|4|5}`

- `.border-{top|right|bottom|left}-{0|1|2|3|4|5}`



Border radius:



- `rounded`

- `rounded-{sm|lg}` radius size

- `rounded-{top|right|bottom|left}`

- `rounded-{top|right|bottom|left}-{sm|lg}`

- `rounded-circle` circle

- `rounded-0` no radius



```html

some text


```



#### Sizing



- `w-{25|50|75|100|auto}` for width 25%, 50%, 75%, 100% and auto

- `h-{25|50|75|100|auto}` for height 25%, 50%, 75%, 100% and auto

- `mw-100` set the max-width 100%

- `mh-100` set the max-height 100%

- `w-100` set width 100%

- `h-100` set height 100%

- `wh-100` set both the with and height 100%



```html

some text


```



#### Flex



Support most features of flex layout and let user quickly manage the layout, alignment and more of control. steal from

Bootstrap flex utilities.



- flex direction

  - `flex-row`

  - `flex-row-reverse`

  - `flex-column`

  - `flex-column-reverse`

- flex wrap

  - `flex-wrap`

  - `flex-nowrap`

  - `flex-wrap-reverse`

- flex grow and shrink

  - `flex-fill`

  - `flex-grow-0`

  - `flex-grow-1`

  - `flex-shrink-0`

  - `flex-shrink-1`

- justify content

  - `justify-content-start`

  - `justify-content-end`

  - `justify-content-center`

  - `justify-content-between`

  - `justify-content-around`

- align items

  - `align-items-start`

  - `align-items-end`

  - `align-items-center`

  - `align-items-baseline`

  - `align-items-stretch`

- align content

  - `align-content-start`

  - `align-content-end`

  - `align-content-center`

  - `align-content-between`

  - `align-content-around`

  - `align-content-stretch`

- align self

  - `align-self-auto`

  - `align-self-start`

  - `align-self-end`

  - `align-self-center`

  - `align-self-baseline`

  - `align-self-stretch`

- other

  - flex-center (display flex and set both horizontal and vertical center)



```html



  some text



```



#### font



font weight



- `fw-light` font weight with 300

- `fw-normal` font weight with 400

- `fw-bold` font weight with 700



font style



- `fst-italic` font-style with italic

- `fst-normal` font-style with normal



font size



- `fs-1` font-size with 2.5rem , it related to h1

- `fs-2` font-size with 2rem , it related to h2

- `fs-3` font-size with 1.75rem , it related to h3

- `fs-4` font-size with 1.5rem , it related to h4

- `fs-5` font-size with 1.25rem , it related to h5

- `fs-6` font-size with 1rem , it related to h6



#### text



text align



- `text-align-start` text-align with left

- `text-align-end` text-align with right

- `text-align-center` text-align with center



white space



- `text-wrap` white space with normal

- `text-nowrap` white space with nowrap



word break



- `text-break` with break-word



text transform



- `text-lowercase` text-transform with lowercase

- `text-uppercase` text-transform with uppercase

- `text-capitalize` text-transform with capitalize



text decoration



- `text-decoration-none` text-decoration with none

- `text-decoration-underline` text-decoration with underline

- `text-decoration-line-through` text-decoration with line-through



line height



- `lh-1` line-height with 1

- `lh-sm` line-height with 1.25

- `lh-base` line-height with 1.5

- `lh-lg` line-height with 2



text reset



- `text-reset` reset text color with parent



#### Other utilities



- `clearfix`

- `text-center`

- `list-unstyled`



## Contributing



If you're interested in contributing to Utilities CSS, please read

our [CONTRIBUTING.md](https://github.com/buuug7/utilities-css/blob/master/CONTRIBUTING.md) before submitting a pull

request.