There are situations where we want to create a dummy prototype (wireframe) of a layout or a website without any real content, images or text. So what we really need is just dummy placeholders. Instead of searching the web for landscape images or lorem texts we can add wireframe boxes to create elements.
Placeholder mixin can be easily imported into any sass project.
@import "placeholder-mixin";Placeholder mixin contain 3 arguments:
- Width
- Height
- Name (optional)
An example:
// with name
.foo {
@include placeholder(100%, auto, header);
}
// without name
.bar {
@include placeholder(100px, 200px);
}Check a wireframe example with placeholder mixin usage: http://srekoble.github.io/placeholder-mixin/
With the usage of some basic layout styles we can create the above page. See the following scss partial for a better understanding of placeholder mixin usage.
https://github.com/srekoble/placeholder-mixin/blob/master/sass/demo.scss
- Add placeholder boxes with dummy text