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
.stackContentso theletter-spacing:-0.65emwhich allowsinline-blockcomponents 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.stackContentas a hook element for defining global font properties and style. - Full width components. They are given the
display:blockdeclaration, so also function as a full width components..stackContentcomponents 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
