bkwld / stylus-library

Stylus utility mixins

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.

stylus-library's Issues

Make shorthands for all transforms

So like rotate: 90deg == transform: rotate(90deg)

Add a `flex-center` function

Does this:

	display flex
	align-items center
	justify-content center

Add absolute-fill

Didn't see this off-hand, but I'm using this in 1 place, which feels right for a shorthand:

absolute-fill

position: absolute
top 0
left 0
width 100%
height 100%

Make hover mixin use interaction media features

• https://medium.com/@ferie/detect-a-touch-device-with-only-css-9f8e30fa1134
• https://caniuse.com/css-media-interaction

Thus, no Modernizr dependency!

'fluid' mixin breaks with no value passed in for max-break

The 'fluid' mixin breaks when you don't pass in a default value for max-break. Following the example provided I'm using fluid font-size, 72, 32 and seeing the following error:
TypeError: expected "unit" to be a unit, but got ident:max-w

Make a function for modifying root selector

Say you have this jade:

.card.blue
  h1 hey there

And you want to define a hover like this:

.card
  h1
    font-size 24px
  &.green
    h1
      color green
  &.blue
    h1
      color blue

Well, a cleaner way is to use ranges:

.card
  h1
    font-size 24px
    ^[0].blue ^[1..-1]
      color blue
    ^[0].green ^[1..-1]
      color green

Here's the codepen of that.

This ticket is to make a function or something that makes the ^[0].blue ^[1..-1] bit easier to digest. Like maybe you it's like

+whenRootHas(.blue)
  color blue

Add an argument to fluid to add an `!important` flag

May be a pretty niche use case, but was trying to override an external style to match the rest of the site. External style was applied with element.style and so we needed to use the !important flag to override it.

Adapt fluid parameter to work with units other than 'px'

fluid(top, 5%, 15%, max-break: desktop, min-break: tablet) will just render in px instead of %.

The same case might goes for other units as well but I have not fully inspect them.