Vestibulum cras condimentum dis ullamcorper mattis dictumst interdum a commodo a parturient sit cras laoreet adipiscing magna sapien. A interdum curabitur vestibulum vestibulum dui cursus aptent dictum litora ipsum viverra scelerisque vestibulum venenatis dictumst a. Sociosqu at et erat nulla parturient orci porttitor lorem lobortis consectetur nibh vulputate hac fames dis at a ullamcorper elementum donec. Laoreet adipiscing magna sapien. A interdum curabitur vestibulum vestibulum.
Vestibulum cras condimentum dis ullamcorper mattis dictumst interdum sit cras laoreet adipiscing magna sapien. A commodo a parturient.
Vestibulum cras condimentum dis ullamcorper mattis dictumst interdum sit cras laoreet adipiscing magna sapien. A commodo a parturient.
Vestibulum cras condimentum dis ullamcorper mattis dictumst interdum sit cras laoreet adipiscing magna sapien. A commodo a parturient.
All the framework classes are prefixed with “wf-” : wf-block, wf-note, etc.
Furthermore, we use the BEM naming convention, which stands for Block Element Modifier
In a nutshell, it's a practical way to make names of CSS selectors as informative and clear as possible. It looks like this : block__element--modifier.
Use modifiers in conjonction to the basic class, like so : class="wf-something wf-something--modifier".
Please note that there's a bit a flexbox, transformations and such, so old outdated browsers are a no no!
The framework is monochrome by choice : the sole purpose of a wireframe is to show the layout and the zoning of the page, it should not convey any information about its theme. There are a few colored elements available, but they should only be used in very specific cases.
A “block” allow you to materialize sections of your page.
Basically, it's just a border with a bit of padding.
<div class="wf-block"></div>
Blocks can have a label, which is centered horizontally and vertically. When labelled, a block is supposed to contain only the label, and no other content.
<div class="wf-block">
<label class="wf-block__label">A label</label>
</div>
Add diagonals in the background.
<div class="wf-block wf-block--crossed"></div>
Make the block fill its container.
<div style="height: 6rem">
<div class="wf-block wf-block--fill"></div>
</div>
Colored background to highlight some blocks : dark, light, red, green, yellow, pink.
<div class="wf-block wf-block--color-dark">
<label class="wf-block__label">Dark</label>
</div>
<div class="wf-block wf-block--color-light">
<label class="wf-block__label">Light</label>
</div>
<div class="wf-block wf-block--color-red">
<label class="wf-block__label">Red</label>
</div>
<div class="wf-block wf-block--color-green">
<label class="wf-block__label">Green</label>
</div>
<div class="wf-block wf-block--color-yellow">
<label class="wf-block__label">Yellow</label>
</div>
<div class="wf-block wf-block--color-pink">
<label class="wf-block__label">Pink</label>
</div>
Makes the text more abstract and less distracting by displaying it as lines.
It must be applied only on inline elements.
<span class="wf-text-lines">
Vestibulum cras condimentum dis ullamcorper.
<br>Vestibulum cras condimentum.
<br>Condimentum dis Vestibulum cras condimentum dis ullamcorper.
</span>
Similar to line text, except each word is visible.
Can be applied on any element.
<span class="wf-text-words">
Vestibulum cras condimentum dis ullamcorper.
<br>Vestibulum cras condimentum.
<br>Condimentum dis Vestibulum cras condimentum dis ullamcorper.
</span>
Use this for placeholder medias : images, audio files and videos.
You can change its width, its aspect ratio, and use several graphical variants, see below.
By default, a media is square and about 150 pixels wide.
<span class="wf-media"></span>
You can change the aspect ratio with a helper class who provide 4 values : 4/3, 3/2, 16/9 and 2/1 – plus their opposite.
<span class="wf-media wf-ratio--4-3"></span>
<span class="wf-media wf-ratio--3-2"></span>
<span class="wf-media wf-ratio--16-9"></span>
<span class="wf-media wf-ratio--2-1"></span>
<br>
<span class="wf-media wf-ratio--3-4"></span>
<span class="wf-media wf-ratio--2-3"></span>
<span class="wf-media wf-ratio--9-16"></span>
<span class="wf-media wf-ratio--1-2"></span>
Use the helper class .wf-width--[width] to set the width of medias.
There are two types of width:
→ Relative width: unit is in % (relative to the media's container). They go from 5% to 100% in 5% increments: 5,10,15 and so on.
<!-- width in % -->
<span class="wf-media wf-width--5p"></span>
<span class="wf-media wf-width--10p"></span>
<span class="wf-media wf-width--15p"></span>
<span class="wf-media wf-width--20p"></span>
<span class="wf-media wf-width--25p"></span>
<!-- and so on until 100 -->
rem. They go from 5rem to 30rem in 5rem increments: 5,10,15 and so on.
<!-- width in rem -->
<span class="wf-media wf-width--5r"></span>
<span class="wf-media wf-width--10r"></span>
<!-- and so on until 30 -->
If you really need a pixel-precise width, use instead a placeholder image service like http://placehold.it for instance.
A dark background.
<span class="wf-media wf-media--dark"></span>
A variant for video files.
<span class="wf-media wf-media--video"></span>
A variant for audio files.
<span class="wf-media wf-media--audio"></span>
Round variant for portraits and such.
<span class="wf-media wf-media--round"></span>
Crossed background for a simple filler.
<span class="wf-media wf-media--crossed"></span>
Who doesn't like nice sketchy icons?
Based on sketchy wireframe by Alice Mortaro.
<span class="wf-icon--add"></span>Use notes to add comments about any elements (typically blocks). By default, they are located on the top right corner of their parent, and can be hidden.
<div class="wf-note">A usefull comment</div>
<div class="wf-note wf-note--top-left">A usefull comment</div>
<div class="wf-note wf-note--bottom-left">A usefull comment</div>
<div class="wf-note wf-note--bottom-right">A usefull comment</div>
We use the Tiny Typo CSS base (it's included, you don't have to install it), and it has some neat helper classes like .small, .big, .left, .right, and such. Check them out!
Make any element optional and hiddable. You can display them again later with a toolbar located on the bottom right of the page.
<div class="wf-block wf-optional">
<span class="wf-block__label">I'm optional, hover me and hide me</span>
</div>
Sets the aspect ratio of a block level element. Mainly usefull for medias.
Sets the width of a block level element. Mainly usefull for medias.
Sets the margins of a block level element.
<div class="wf-margin--top"></div>
<div class="wf-margin--right"></div>
<div class="wf-margin--bottom"></div>
<div class="wf-margin--left"></div>
<div class="wf-margin--top--large"></div>
<div class="wf-margin--right--large"></div>
<div class="wf-margin--bottom--large"></div>
<div class="wf-margin--left--large"></div>Sets the paddings of a block level element.
<div class="wf-padding--top"></div>
<div class="wf-padding--right"></div>
<div class="wf-padding--bottom"></div>
<div class="wf-padding--left"></div>
<div class="wf-padding--top--large"></div>
<div class="wf-padding--right--large"></div>
<div class="wf-padding--bottom--large"></div>
<div class="wf-padding--left--large"></div>