Web page Front-End design: layout idea and layout and module naming

Article Introduction: Front-End specification-layout and module naming.

1. Preface

Recently thinking about how to completely disengage from the visual thinking structure, so that the written structure more semantic? After the interaction prototype, how to make the front-end structure and visual design parallel? After the structure is finished, you can make the template and structure no longer modify it? After the visual design, the front end writes the style, writes the style to link to the set good template?

Referring to the square frame of the 35 Wang Shaofeng, he took the structural layers out and drew the lattice. I think this idea is very good, the layout is visual, should be defined first, lest write the style of time to modify the structure. I took a look at his thoughts, and combined his own understanding, to talk about the layout of the concept of the layer.

2, layout

We use R to express the row and clear the float. Adding an index to each row facilitates the adjustment of each line spacing, as shown in Figure 1.

Figure 1

The column is represented by C, and the left float. Add an index to each column to facilitate the definition of width and spacing. We divide the R2 into three columns, as shown in Figure 2.

Figure 2

Let's split the r2c2 into two lines, as shown in Figure 3.

Figure 3

Let's divide the r2c2r1 into two columns, as shown in Figure 4.

Figure 4

3, Summary

The structure can be divided indefinitely, and each grid has a unique index, which makes it easy to define the layout of each grid. Thinking just formed, but also to take a few projects to try to see whether it is feasible.

[1] [2] Next page