bkwld / stylus-library Goto Github PK

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.

Does this:

	display flex
	align-items center
	justify-content center

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%

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

Thus, no Modernizr dependency!

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

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.

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

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