Foundation Framework - Quickly create cross-platform web page prototypes

Caught in cats throughout the week. From the end of October to the present day, it touches on the more cherished everyday moments of quiet time. Sometimes wondering whether there is time-space whirlpool at home or something, or how the watch will go so fast, not at all, do not want to stop waiting for me. Everything will be better.

Monologue ended, enter the topic. The last two translations have both a framework and cross-platform topic: In the previous article, we learned of some of the front-end framework tools for mobile application development; today's foothold is upstream of the design development process, We show you how to quickly create a cross-platform, responsive page prototype that can be tested on many devices using the Foundation framework. Below the beginning of the body part.

As a straightforward way to say, as web design and development staff, we face several serious issues:

Every day, the types and numbers of devices people use to access the Internet are on the rise. It is not possible to design and develop different interfaces for each device. Even if you are specifically tailored to certain devices, these devices are also likely to exit the mainstream in the near future.

Really happy. Do not be afraid, we face and solve the problem together. In fact, different types of equipment and screen this problem began long ago, but we have been neglected this situation over the years, wishful guarding the 960 pixel grid system.

Today, we need to change the long-held habit of moving upstream from the design flow, such as trying to quickly create prototypes that can be tested on different devices, not just desktop browsers or laptops. This is why we (the original author of English) developed the Foundation framework.

Foundation is an open source front-end framework that we can use to quickly create page prototypes. Foundation's mobility solution is superior to other tools of the same type. Foundation draws on the ideas and methods of responsive web design and Foundation presupposes how content structures are presented in different types of devices. (For a responsive web design, see our previous articles covering concepts, components and basic ideas for responsive design, how to implement responsive web design with CSS3 Media Query, and related product requirements and design process examples Learn)

Next, we will be going through a complete example to demonstrate how to use Foundation to quickly create cross-platform page prototype. Walking!

Resource overview

First, go to foundation.zurb.com to download the code package; decisively click the big blue button. The code package contains the following files and structures:

index.html - We'll start by creating the first page from here. javascripts and stylesheets paths - the main static resource files, including jQuery and the required style sheets. humans.txt and robots.txt - inside the code is a good model, when you can slip through.

JS things basically not in the scope of this article, we continue to look at the stylesheets path file:

global.css - The global base stylesheet, which includes a relatively regular grid of 12 fixed-width grids, nested tools to quickly create complex layouts, and more. In addition there are other global fonts, layout and other aspects of the style definition. ui.css - Used to style the regular UI elements that make up the prototype. mobile.css - Responsible for mobile device style, responsive style definitions are here.

Open the index.html file in your browser and code editor, respectively. In the browser, we can see that the page contains some of the basic layout structures and UI elements used to build the prototype.

Next, we will from the grid system, quickly create a prototype, the three aspects of mobile in turn to explain the examples.

Grid system

First, let's take a quick look at the grid system in global.css. If you are familiar with the 960 grid system or the Blueprint CSS framework, you should not be unfamiliar with the Foundation's grid structure. Here is a typical structural code:

? 123456 <div class = "container"> <div class = "row"> <div class = "eight columns" id = "mainContent"> ... </ div> <div class = "four columns" id = " sidebarContent "> ... </ div> </ div> </ div>

The structure consists of three parts: the outer container container, row container row and column container columns. The outer container just adds left and right padding to the page.

Row containers have a fixed maximum width value, preventing the page from being too wide on a large display; of course, you can remove this property from the style sheet if you want to create a purely liquid layout.

Column containers are the innermost content containers, with up to 12 column containers per row in our grid system. In the above code, we created a typical "content + sidebar" layout with widths of 2/3 and 1/3 of the full width, respectively.

Grid layout can be nested:

? 123456789101112 <div class = "container"> <div class = "row"> <div class = "eight columns"> <div class = "row"> <div class = "four columns"> ... </ div > <div class = "four columns"> ... </ div> <div class = "four columns"> ... </ div> </ div> </ div> <div class = "four columns"> ... </ div> </ div> </ div>

There are some layout examples in the Foundation website for reference.

Quickly create a prototype

Get started. We are going to prototype the first page of the article and the article's inside pages for a simple news and information website; the whole process consists of two parts: using Foundation to quickly create basic prototypes and to move different types of devices. First look at the first part.

It's best to pick up the paper and pen and outline the idea before creating the prototype. Below is a sketch of our homepage (desktop monitor version) for the base version:

As you can see, the general layout of the homepage includes a page header, a main article content graphic, a subtext graphic on the side, and a feature article graphic list. For this page, we can use some of Foundation's own layout structure, as well as a good external service.

The overall layout of the page, using the grid system described earlier. Global master navigation uses Foundation default tab structure. For each picture unit in the picture, we use the service provided by placehold.it. It prints out examples of containers that can be filled at the rate you specify, including images for placeholders, customizable copywriting, and more.

OK we start from the beginning of the page. The Foundation framework will make old browsers compatible with HTML5, so here we can safely use more semantic header tags. Because the header is a block-level structure that contains multiple columns of content, we also add class = "row" to it. code show as below:

? 12345678910111213 <div class = "container"> <header class = "row"> <div class = "two columns"> <img src = "http://placehold.it/200x120" /> </ div> <div class = "eight columns"> <h1 class = "centered"> The Foundation Times </ h1> <h5 class = "centered"> December 1, 2011 </ h5> </ div> <div class = "two columns" > <img src = "http://placehold.it/200x120" /> </ div> </ header>

As you can see, in the external container container, we have the header as a complete line, with three columns in it and a 1: 4: 1 relationship in width. In the first column and the third column, we use a placeholder image provided by placehold.it to represent elements such as logos. In the second column, we use the h1 tag as a container for the site's title, and the subtitle the h5.

Next is navigation. We want to use Foundation default tab format; code structure is as follows:

? 1234567891011 <div class = "row"> <div class = "twelve columns"> <dl class = "tabs"> <dd> <a href="#" class="active"> All News </a> < / dd> <dd> <a href="#"> Llamas </a> </ dd> <dd> <a href="#"> Alpacas </a> </ dd> <dd> <a href = "#"> Vicunas </a> </ dd> <dd> <a href="#"> Other Dromedaries </a> </ dd> </ dl> </ div> </ div>

Although there is only one set of navigation elements in this line, we still need to place the navigation element list dl in a column container, and set this column container to be 12 columns wide, otherwise there will be a problem with the layout.

For the rest of the page, the basic approach is similar, and we'll be using the grid system, some of the basic elements, and the UI components that come with Foundation. Here's the HTML code for the rest of the page:

? 12345678910111213141516171819202122232425262728293031323334353637383940414243 <div class = "row"> <div class = "eight columns"> <img src = "http://placehold.it/800x340" /> <h3> <a href="#"> Llamas: Great Pets or the Best Pets? </a> </ h3> <p> Intrepid reporter Jordan Humphreys went to Happy Time Llama Farm to investigate: are llamas merely great pets, or best beloved? Read the full article to find out! / p> <a href="#" class="small radius nice blue button"> Read More & rarr; </a> </ div> <div class = "four columns"> <div class = "row"> < div class = "five columns"> <img src = "http://placehold.it/120x100" /> </ div> <div class = "seven columns"> <h5> <a href=""> Alpaca Farm Closed </a> </ h5> <p> Anthony Tadina reports on this tragic closing. <br /> <a href="#"> Read More & rarr </a> </a> </ div> </ div> ... [repeat this row twice more] </ div> </ div> <div class = "row"> <div class = "twelve columns"> <hr /> </ div> </ div> div class = "row"> <div class = "three columns"> <img src = "http://placehold.it/260x190" /> <h5> <a href="#"> Feature 1 </a> </ h5> <p> Description <br /> <a href="#"> Read More & rarr </a> </a> </ p> </ div> ... [repeat this column 3 more times ] </ div> <footer class = "row"> <div class = "seven columns"> <p> <strong> The Foundation Times </ strong> <br /> & copy; 2025 no rights reserved. </ p> </ div> <div class = "five columns"> <p> <a href="#"> All News </a> | <a href="#"> Llamas </a> | <a href = " # "> Alpacas </a> | <a href="#"> Vicunas </a> | <a href="#"> Other Dromedaries </a> </ p> </ div> </ footer>

We can see that the code structure for each part of the HTML prototype is actually quite basic and simple. Note that there are elements in the class that have a "button," which are Foundation default buttons and include several different styles. We can define an a tag or a button type input element as a stylized button in this way and set specific styles for it through classes such as "small", "radius":

small or large - optional; control the size of the button; if not set, the default will be medium size. radius - optional; adds a few pixels of rounded corners to the button. The value can also be round, the style is completely circular on both sides. When not set, the default style is a rectangle. nice - optional; add a little extra detail such as highlights. blue - optional; sets the color; this value can also be red, black, gray, or any name that has been customized in the style sheet. button - The only necessary class used to format the element as a button.

With some very basic HTML code, we've created a prototype of the base version; the actual effect is as shown below.

If you just need to make a page prototype for your desktop device, then our task here is done. However, in this example, we will also demonstrate how to make the prototype compatible with different types of mobile devices for cross-platform implementation.

Mobility

When users visit websites using their mobile devices, the expectations vary. For the content site in front of us, we hope that users using mobile devices to access the time, you can directly see the main screen in the first part. One of the things that mobile device users are annoying when they surf the Web is that they still can not see the main content immediately after they endure the process of loading the site's website and global navigation. (For strategies on how content is rendered on mobile devices, refer to our previous article on responsive web site product requirements and design flow)

Our prototypes are represented on a small screen mobile device as shown below without any movement processing:

The first screen, we can only see the logo, website title and other elements of the main content, has nothing to do with the global navigation. Really do not fly. We will next use some of the Foundation-provided classes designed to handle views of different devices, allowing some elements of the prototype to change in small-screen mobile devices.

Currently, in the base version of our prototype page, the code for the header section looks like this:

? 123456789101112 <header class = "row"> <div class = "two columns"> <img src = "http://placehold.it/200x120" /> </ div> <div class = "eight columns"> < h1 class = "centered"> The Foundation Times </ h1> <h5 class = "centered"> December 1, 2011 </ h5> </ div> <div class = "two columns"> <img src = "http: //placehold.it/200x120 "/> </ div> </ header>

After adding the mobilized class:

? 123456789101112131415161718192021 <header class = "row hide-on-phones"> <div class = "two columns"> <img src = "http://placehold.it/200x120" /> </ div> <div class = " eight columns "> <h1 class =" centered "> The Foundation Times </ h1> <h5 class =" centered "> December 1, 2011 </ h5> </ div> <div class =" two columns "> <img src = "http://placehold.it/200x120" /> </ div> </ header> <header class = "row show-on-phones"> <div class = "twelve columns"> <img src = " http://placehold.it/480x100 "/> <h1 class =" centered "> The Foundation Times </ h1> <h5 class =" centered "> December 1, 2011 </ h5> </ div> </ header >

The point is that there are two new classes, one is hide-on-phones and the other is show-on-phones. As the name implies, they are used to control the display and hiding of elements on mobile devices. Foundation presets a number of such classes to adapt the rendering of page elements responsively to different types of devices.

Now when using a cell phone to browse a page prototype, only the second simplified header is displayed. Next, let's write a few lines of styling for this mobile version of the header:

? 12345h1.centered {text-align: center; margin-bottom: 0;} h5.centered {text-align: center;} .show-on-phones h1.centered {font-size: 24px; font-size: 2.4 rem;} .show-on-phones h5.centered {font-size: 12px; font-size: 1.2rem; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #ddd;}

Take a look at the current results:

much better. The problem now is that the navigation items appear too much on the small screen and the layout is in disorder. A common solution is for mobile devices, move the navigation to the bottom of the page. Of course, we do not really want to move it. Instead, we set different display rules as before. For the current global navigation, add a hide-on-phones class:

? 1234567891011 <div class = "row hide-on-phones"> <div class = "twelve columns"> <dl class = "tabs"> <dd> <a href="#" class="active"> All News </a> </ dd> <dd> <a href="#"> Llamas </a> </ dd> <dd> <a href="#"> Alpacas </a> </ dd> <dd > <a href="#"> Vicunas </a> </ dd> <dd> <a href="#"> Other Dromedaries </a> </ dd> </ dl> </ div> </ div >

Next, at the bottom of the page, before footer, add a new navigation; the HTML structure is basically the same as the global navigation of the head:

? 1234567891011 <div class = "row show-on-phones"> <div class = "twelve columns"> <dl class = "tabs mobile"> <dd> <a href="#" class="active"> All News </a> </ dd> <dd> <a href="#"> Llamas </a> </ dd> <dd> <a href="#"> Alpacas </a> </ dd> < dd> <a href="#"> Vicunas </a> </ dd> <dd> <a href="#"> Other Dromedaries </a> </ dd> </ dl> </ div> </ div>

The difference is that there are two things: one is the use of show-on-phones in the class of the container so that the navigation is only visible on the phone; in addition, a "mobile" is added to the navigation list class so that each navigation The tab becomes full width, the entire navigation will be a vertical list.

Now, the first screen effect of our prototype in the phone is this:

Based on the grid system, we wrote a small amount of highly-semantic HTML code that, along with some of the style tools classes originally provided by Foundation, has created a homepage prototype that can be used for cross-platform demonstrations and tests.

Try it yourself

Next, you can try to create the prototype for the inner page of the article by following our previous method. Again, start with a hand-drawn draft. We've done this for you and added some notes as a little tip when writing the prototype code; see the image below: