https://github.com/bkwld/stylus-library
Stylus utility mixins
https://github.com/bkwld/stylus-library
mixins stylus utilities
Last synced: about 1 month ago
JSON representation
Stylus utility mixins
- Host: GitHub
- URL: https://github.com/bkwld/stylus-library
- Owner: BKWLD
- License: mit
- Created: 2015-11-25T00:39:05.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2022-02-17T04:19:33.000Z (about 3 years ago)
- Last Synced: 2025-03-05T10:02:05.681Z (about 2 months ago)
- Topics: mixins, stylus, utilities
- Language: Stylus
- Size: 56.6 KB
- Stars: 7
- Watchers: 4
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Bukwild Stylus Library
Components:
- **index.styl** - The package.json `main`, this glob loads all mixins from the "lib" directory. It also imports other stylus npm dependencies. These dependencies are generally functions and mixins that have utility for all projects.
- **lib/** - Contains .styl files that define functions / imports. None of these files should contain any css selectors. Read the comments within the individual files for details.
- **boilerplate.styl** - CSS rules that are intended to be loaded after a CSS reset or normalize on a project. Essentially, this is a set of global Bukwild conventions.
## Settings
See [index.styl](index.styl) for some default vars.
## Recommendations
- Install https://github.com/WICG/focus-visible
## Examples
#### Fluid
`fluid()` uses media queries + viewport units to scale property values between an upward and lower limit as the viewport is resized.
```styl
.btn
fluid padding, 20
```
Padding will be 20px when the viewport is 1440px wide (`fluid-default-max-break`) and 14px (`fluid-auto-min-size-factor`) when the viewport is 375px wide (`fluid-default-min-break`), linearly interpolated in between.
```styl
.btn
fluid padding, 20, 10
```
Padding will be 20px when the viewport is 1440px wide and **10px** when the viewport is 375px wide, linearly interpolated in between.
```styl
.btn
fluid(padding, 20, 10, min-break: 768px)
```
Padding will be 20px when the viewport is 1440px wide and 10px when the viewport is **768px** wide, linearly interpolated in between.
```styl
.btn
fluid(padding, 20, 10, min-break: 768px, max-break: 1024px)
```
Padding will be 20px when the viewport is **1024px wide** and 10px when the viewport is 768px wide, linearly interpolated in between.
```styl
body
fluid(--site-pad, 20, 10)
.btn
padding calc(10px + var(--site-pad))
```
Use fluid to set a CSS custom variable that can be used inside of a `calc`.