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:

  1. CSS Reset and hook element. All content must be wrapped by a .stackContent so the letter-spacing:-0.65em which allows inline-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.
  2. 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

Check out the other mockup pages for more demonstrations:

StackLayout is the brain child of Campbell McGuiness

Campbell McGuiness is a member of the Working Software team and has a passion for hand coding highly semantic, cross browser & device compatible HTML & CSS.

StackLayout is sponsored by Decal CMS

Contact Me

Email me

@camslizzle

Connect With StackLayout

Facebook

@stacklayout

Get Involved

This is a living project. I'm hoping StackLayout will grow through people using it, so please let me know how you're using it, what went wrong and what went right.

Github

See the latest developments on our Wiki

Fork This Project

Not sure how? Read this.

Who Is Using StackLayout?

Click here to find out