https://github.com/iamzozo/utilscss
Set of css utility
https://github.com/iamzozo/utilscss
css css-library scss scss-library utility
Last synced: 3 months ago
JSON representation
Set of css utility
- Host: GitHub
- URL: https://github.com/iamzozo/utilscss
- Owner: iamzozo
- Created: 2018-12-11T11:33:07.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2025-01-09T14:18:35.000Z (about 1 year ago)
- Last Synced: 2025-02-12T11:08:19.720Z (11 months ago)
- Topics: css, css-library, scss, scss-library, utility
- Language: SCSS
- Homepage:
- Size: 249 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# utilscss
A set of css utilities, like grid, spacing (margin, padding), sizing, flexbox, etc.
## Responsive prefixes
Css selectors which has multiple versions for different breakpoints has a prefix.
For example a column:
```
.col-4
.sm:col-4
.md:col-4
.lg:col-4
.xlg:col-4
```
An example usage:
```
```
Default sizes:
```
sm: 576px,
md: 768px,
lg: 992px,
xlg: 1200px
```
Default spacing values:
```
0: 0
xs: 5px
sm: 10px
md: 15px
lg: 20px
xlg: 30px
auto: auto
```
Example: `
`
Which means:
- Padding top medium (15px) for all sizes
- Margin right extra small (5px) for all sizes
- Margin right auto above 768px
Media queries defined with `min-width`. For the `sm` prefix the following will be defined:
```
@media (min-width: 576px) {
...
}
```
## Responsive prefixed categories:
|Category | Example |
|-----|-------|
|Display|`md:d-block sm:d-none`|
|Column|`md:col-4 sm:col-4`|
|Margin|`md:mt-10 sm:mt-5`|
|Padding|`md:pt-10 sm:pt-5`|
|Flex|`md:d-flex md:items-center md:flex-row flex-column`|
## Selectors
### Grid
```
- row
- col-[1-12]
- sm:col-[1-12]
- ...
```
**Example:**
`
`
Explanation:
- Using 6 column width on all screen sizes
- When screen sizes is above `"md"` using 4 column width
### Margin and padding
Build up with the following syntax: `{property}{side}-{size}`.
Properties one of:
- `m`: as margin
- `p`: as padding
Sides is one of:
- `t`: as top
- `b`: as bottom
- `l`: as left
- `r`: as right
- `x`: as horizontal
- `y`: as vertical
**Example:**
`