The main goal of Wireframe Fun is to create ui mockups quickly. To do that requires a solid understanding of how layout is handled, so lets look at the layout directives in WF.
99% of Layouts can be accomplished with rows and columns
When deciding what directive to use, think about the outermost boundary of what you’re creating, and ask yourself in which direction would you slice it. Let’s pretend we are mocking up this wikipedia page. If we focus on the outer most edge, we can see that we’re slicing it into columns. You could use the directives columns or cols but we find h (for horizontal) to be the most unambiguous and shortest to type.
So we could start like this:
But that’s not quite right. Our main column should be horizontally-centered.
The .h-center is a utility class. If you’re familiar with Tailwind CSS this will look very familiar. This is a start, now we can move inward to our next element.
Here we can see that we can slice this into rows. Put another way, lay it out vertically. So we will use the v directive. Again, giving each sub-section a name to remind us what it’s referring to.
The important thing to notice about this is that we’ve replaced Main Column with a more specific description:
v
Navigation
Wikimedia Callout
Main Section
This is a great way to work quickly: describe elements at a high-level and then revisiting them with more description as you go.
You may have noticed there is another problem currently. Our three rows are squeezed in the middle rather than occupying most (but not all) of the page. We can use other utility classes to express this, but to see what we’re working with. Let’s add a background color. This is a great way to examine what’s happening.
Inside of layouts, elements are too greedy. By default they will take only the space they need. If you want them to stretch out and get comfortable, you need to tell them to expand. Let’s see what happens when we tell our Main Column to expand.