Shulou(Shulou.com)06/02 Report--

This article mainly introduces "how to quickly create a cross-platform website page prototype using the web Foundation framework". In the daily operation, I believe that many people have doubts about how to use the web Foundation framework to quickly create a cross-platform website page prototype. The editor consulted all kinds of materials and sorted out simple and easy-to-use operation methods. I hope it will be helpful to answer the question of "how to use web Foundation framework to quickly create a cross-platform website page prototype"! Next, please follow the editor to study!

Resource overview

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

◆ index.html-We will create * pages from here.

◆ javascripts and stylesheets paths-the main static resource files, including jQuery and required style sheets.

◆ humans.txt and robots.txt-the code is a good template to take a peek at when you are free.

JS is basically beyond the scope of this article, let's move on to the files in the stylesheets path:

◆ global.css-Global base stylesheets, including relatively conventional 12-column fixed-width grid systems, nesting tools for quickly creating complex layouts, and so on. There are also other style definitions for global fonts, layouts, and so on.

◆ ui.css-used to style the regular UI elements that make up the prototype.

◆ mobile.css-responsible for the style of mobile devices, and the style definitions involving responsive style are all here.

Open the index.html file in the browser and the code editor, respectively. In the browser, we can see that the page contains some basic layout structure and UI elements for prototyping.

Next, we will give examples from three aspects: grid system, rapid prototyping and mobility.

Grid system

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

......

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

The row container has a fixed width value to prevent the page from being too wide on a large display; of course, if you want to create a purely liquid layout, you can also remove this attribute from the stylesheet.

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

Grid layouts can be nested:

......

There are some layout examples on Foundation's official website for reference.

Rapid prototyping

Let's do it. We are going to prototype the home page and the inner page of an article for a simple news website; the whole process consists of two parts: the rapid creation of basic prototypes using Foundation and mobile processing for different types of devices. First of all, let's look at the * part.

Pick up paper and pen and sketch the idea before creating a prototype. Here are the sketches we made for the home page of the basic version (desktop monitor version):

As you can see, the general layout of the front page includes the page header, the main article content picture and text, the side secondary content picture and text, and the characteristic article picture and text list. For this page, we can use some of the layout structure that comes with Foundation, as well as a nice external service.

In terms of the overall layout of the ◆ page, use the grid system described earlier.

The ◆ global main navigation uses the tab structure preset by Foundation.

◆ for the pictures in each picture-text unit, we use the services provided by placehold.it. It will output the demonstration content that can fill the container according to the specified scale, including the picture used to occupy the place, the copy that can be customized, and so on.

OK, let's start at the top of the page. The Foundation framework ensures that older browsers are compatible with HTML5, so we can safely use more semantic header tags here. Because the header is a block-level structure with multiple columns of content, we also add class= "row" to it. The code is as follows:

The Foundation Times December 1, 2011

As you can see, in the external container container, we treat header as a complete line with three columns and a width relationship of 1:4:1. In the * * column and the third column, we use the placeholder image provided by placehold.it to represent elements such as logo. In the second column, we use the H2 tag as the container for the site title and h6 for the subtitle.

The next step is navigation. We will use the tab form preset by Foundation; the code structure is as follows:

All News Llamas Alpacas Vicunas Other Dromedaries

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

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

Llamas: Great Pets or the Best Pets?

Intrepid reporter Jordan Humphreys went to Happy Time Llama Farm to investigate: are llamas merely great pets, or he best pets? Read the full article to find out!

Read More →

Alpaca Farm Closed

Anthony Tadina reports on this tragic closing.Read More →

... [repeat this row twice more]

Feature 1

DescriptionRead More →

... [repeat this column 3 more times]

The Foundation Times ©2025 no rights reserved.

All News | Llamas | Alpacas | Vicunas | Other Dromedaries

As we can see, the code structure of each part of the HTML prototype is actually quite basic and simple. It is important to note that class has "button" elements, these are Foundation preset buttons, including several different styles. In this way, we can define a tag or input elements of type button as stylized buttons and set specific styles for them through class such as "small", "radius" and so on:

◆ small or large-optional; controls the size of the button; if not set, the default will be medium size.

◆ radius-optional; adds a few pixels of fillet to the button. The value can also be round, with the style of full arcs on the left and right sides. When not set, the default style is rectangle.

◆ nice-optional; add a little highlight and other details.

◆ blue-optional; sets the color; the value can also be red, black, grey, or any name that has been customized in the style sheet.

◆ button-the only necessary class to format the element as a button.

With some very basic HTML code, we have created a prototype of the basic version; the current actual effect is shown in the figure below.

If we just need to prototype pages for desktop devices, then our task is done by now. However, in this example, we also demonstrate how to make the prototype responsive and compatible for different types of mobile devices and achieve cross-platform.

Mobile

When users use a mobile device to visit a website, they expect it to be different. For this content site, we hope that users can see the main content directly on the first screen when they use a mobile device to access it. One thing that mobile users hate when browsing the web is that after enduring the loading process of the site header and global navigation, they still can't see the main content immediately. (for strategies for the presentation of website content on mobile devices, please refer to our previous articles on product requirements and design processes for responsive websites.)

Before doing any mobile processing, our prototype is rendered on a small screen mobile device as shown in the following figure:

In the first screen, we can only see logo, website title and other elements that have nothing to do with the main content and global navigation. It's really unreliable. We're going to use some of the class provided by Foundation to handle different device views to change some of the elements in the prototype in a small-screen mobile device.

Currently, the code in the header section of our basic page prototype looks like this:

The Foundation Times December 1, 2011

After adding the mobile class:

The Foundation Times December 1, 2011

The Foundation Times December 1, 2011

The focus is on two new class, 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 some of these class to adjust the presentation of page elements responsively according to different types of devices.

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

H2.centered {text-align: center; margin-bottom: 0;} h6.centered {text-align: center;} .show-on-phones h2.centered {font-size: 24px; font-size: 2.4remt;} .show-on-phones h6.centered {font-size: 12px; font-size: 1.2remt; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid # ddd;}

Let's take a look at the results so far:

Much better. The problem now is that there are too many navigation items on the small screen and the layout is out of order. A common solution is to move the navigation to the bottom of the page for mobile devices. Of course, we don't really want to move it, but set different display rules as before. For the current global navigation, add a hide-on-phones to class:

All News Llamas Alpacas Vicunas Other Dromedaries

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 header:

All News Llamas Alpacas Vicunas Other Dromedaries

The difference lies in two points: one is that show-on-phones is used in the class of the container so that the navigation is displayed only in the mobile phone; in addition, a "mobile" is added to the class of the navigation list, so that each navigation tab becomes full width, and the whole navigation will become a vertical list.

Now, the first screen effect of our prototype on the phone is as follows:

Based on the grid system, we have written a small amount of high-semantic HTML code, and with some style tools provided by Foundation native class, we have created a home page prototype that can be used for cross-platform demonstration and testing.

At this point, the study on "how to use the web Foundation framework to quickly create a cross-platform website page prototype" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.