mo provides a basic set of mixins to make styling your app simple.
The problem right now is that you have to include a tool like bourbon or compass. (which are massive)
mo is simple and small. built out of my need.
@import "mo";
This mixin is used apply custom styles at and below a given pixel width.
.headline {
@include below(100px) {
background: red;
}
}
This mixin is used apply custom styles at and above a given above pixel width.
.headline {
@include above(200px) {
background: teal;
}
}
This mixin is used apply custom styles between a given pixel width range.
.headline {
@include between(200px, 300px) {
background: yellow;
}
}
This mixin hides a given selector at and below a given pixel width.
.headline {
@include hide-at(500px);
}
This mixin sets an element to width: 100%;
at and below a given pixel width.
.headline {
@include full-width-at(500px);
}
This mixin sets text-align: center;
at and below a given width.
.headline {
@include center-text-at(500px);
}
This mixin provides a way to set transparent backgrounds in ie8 and up. It support an rgba syntax along with a hex and % opaque param.
// hex
.headline {
@include bg-color(#FF0000, 0.4);
}
// rgba
.headline {
@include bg-color(100, 200, 20, 0.5);
}
This mixin provides a terse syntax for setting the position
, top
, right
, bottom
, and left
properties of a given selector.
It takes an optional position
param, and then takes 4 arguments for setting top
, right
, bottom
, and left
respectively.
Any value that is set to false
will not be set.
If an argument of fill
is given, top
, right
, bottom
, and left
will default to 0. Any one of these properties can be overridden with a value.
.headline {
// position top right bottom left
@include pos(fixed, 10px, false, 2px, 10px);
}
.headline {
// top right bottom left
@include pos(10px, false, 2px, 10px);
}
.headline {
@include pos(absolute, fill);
}
.headline {
@include pos(absolute, fill, 10px);
}
This mixin provides a simple mechanism to turn a selector into single line ellipsis overflow area with an ellipsis. An optional width
property can be passed in.
.headline {
@include ellipsis(50px);
}
This mixin provides a short hand for setting width and height of an element. One can also set both the width and height with a single value when you want them to be equal.
.headline {
@include size(100px, 200px);
}
.headline {
// sets both the width and height to 300px
@include size(300px);
}
This mixin provides you with a simple mechanism for setting a conditional retina background image.
It has two ways to use it. The first being you pass the path to your image without the extension, and it does a lookup of your file
+ png
as well as file
+ @2x
+ .png
The second way to use the tool is the optional second param where you can define your files extension if it is something other than .png
.headline {
// Will look for cat.png and [email protected]
@include retina-background-image('cat');
}
.headline {
// Will look for cat.jpg and [email protected]
@include retina-background-image('cat', 'jpg');
}