mixins-stylus v0.0.5
Mixins for Stylus
A simple collection of mixins for Stylus that I use in my work.
It's made to use with Jeet and Nib which means that I avoid to include mixins that Jeet or Nib already have.
Installation
You can just copy the index.styl
file and import directly.
But if you already use NPM and tools like Grunt or Gulp, then it's better install it using NPM itself.
npm install mixins-stylus --save-dev
@import 'mixins-stylus'
Tests
Be sure to have all dev dependencies installed:
npm install
You also need Mocha installed globally:
npm install mocha -g
Then just run:
npm test
Mixins
image-url and font-url
Define the $IMAGE-PATH
and $FONT-PATH
to use these mixins.
Example:
// Define the paths
$IMG-PATH = '../img/'
$FONT-PATH = '../fonts/'
// Now you can use the function image-url
.element
background-image image-url('logo.png')
// And the font-url
@font-face
font-family 'MyCustomFont'
src: font-url('my-font.ttf')
OBS: The function font-url
is also used by the font-face
mixin. See below.
font-face
Arguments: $name, $src, $weight = false, $style = false
Nib doesn't have a mixin for @font-face, so I included my own mixin to do such work.
It uses the font-url
function to define the font's path.
Example:
// Define where the fonts are placed in
$FONT-PATH = 'assets/fonts/'
// Now, just import the fonts without worry about the path
font-face('MyCustomFont', 'mycustomfontfilename')
placeholder
Nib has a mixin for placeholder. But it doesn't work fine. I've created a better mixin to do the job.
You can pass a color
as an argument, or just pass a block.
Example:
.my-element
placeholder(#666)
.input
+placeholder()
font-family Roboto, sans-serif
font-weight bold
color #000
triangle
Simple mixin for generating triangles. Based on Stylus Triangle mixin.
triangle($width, $height, $direction, $color)
Example:
.my-blue-triangle
triangle(50px, 50px, top, blue)
It supports all directions from CSS Triangle Generator:
top
top-right
right
bottom-right
bottom
bottom-left
left
top-left
absolute-center
Centers an element using absolute positioning. All you need to pass is the element's dimensions, and optionally its direction, horizontal
or vertical
. The default is both
.
absolute-center($width, $height: $width, $direction: both)
Example:
// Both directions
.box
absolute-center(120px, 30px)
// Only vertical
.logo
absolute-center(50px, 30px, vertical)
after
Utility to generate the pseudo-element after
.
after($content = " ")
Example:
.element
after('Content value')
.box
+after('value for content property')
position absolute
top 0
left 0
// Uses the default value for content property
.another-element
+after()
margin 10px auto
background-color hotpink
before
It works just like the previous mixin, but for the pseudo-element before
.
before($content = " ")
pseudo
A shortcut to use both pseudo-elements mixins, after
and before
.
pseudo($content = " ")