bukwild-stylus-library
v3.2.1
Published
Stylus utility mixins
Downloads
11,966
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 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.
.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.
.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.
.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.
.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.
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
.