Mockup a basic web page
in 10 Steps using StackLayout
Sneak peek of the result
1.
Start by dividing the page into 3 typical page rows and wrap everything in a .stack
:
A .stack
is the outer most parent component that wraps all the other components. You can actually use any stack component as a parent because they are infintely nestable, but .stack
is the only component that is full width and allows other stack components as children.
2.
You can then split each of these rows up into components, easily defining flexible, percentage based widths. You can choose from divisions of 2,3,4, 5, full width and auto width components. A full list of available class names is here.
Let's start with #content
and create 2 column components:
3.
Now let's add some content to #column1
:
You'll notice I've used a .stackContent
component to wrap the content. This class is always required to wrap content and can be applied to any element. See the <h1>
in step 7 for an example.
.stackContent
components have a primary and secondary function:
- CSS Reset and hook element. All content must be wrapped by a
.stackContent
so theletter-spacing:-0.65em
which allowsinline-block
components to behave nicely, is normalised. You can either apply the class to an existing element, or add that element to the relevant lines of CSS. See Using Semantic Class Names for more information. You can also target content using.stackContent
as a hook element for defining global font properties and style. - Full width components. They are given the
display:block
declaration, so also function as a full width components..stackContent
components can be added as siblings or children of any other stack component. See the next step for a demonstration.
4.
Now you may want 3 columns underneath this .stackContent
component. You can just add 3 .stack1of3
components as siblings of the .stackContent
component:
Notice that no container or clear fix element is required to make the .stack1of3
components start a new row. The .stackContent
component occupies the full width of its parent, so the .stack1of3
components simply 'stack' up underneath it on a new row like text. This is one of the big advantages StackLayout has over grid layout systems. If you decide you want 4 columns, simply change the class of each component to .stack1of4
and add another. If you're wondering about semantic class names click here, or check out the Semantic Class Names mockup page.
5.
Then we add some more content:
6.
Now let's add some content to #column2
by populating it with 2 full width .stackContent
components:
7.
Ok, so that was pretty easy, now let's look at the #header
. I'm going to use full width .stackContent
components for this. Note the use of <h1>
and <ul>
as .stackContent
components:
8.
Let's add some sample content:
9.
Now i'm going to use some .stackAuto
components in the #footer
:
.stackAuto
components are great if you've got a bunch of components with variable width. I'm using them here because i'm not sure about the width of the #footer
items, but still want these components behave nicely. It this case the #footer
items will behave like centered text because the parent .stack
component has text-align:center
applied by default. You can easily apply text-align:left/right
to the #footer
which would only affect the orientation of the footer components. Checkout this mockup for more examples of how you might use .stackAuto
components.
10.
Now let's see the finished markup:
There you have it, a basic mockup website in 10 steps using StackLayout