Grid System

Introduction

From WebRatio 7 it's possible to find and use the new Grid Layout manager. The new grid allows you to control in a precise way the positioning of the elements inside the page and their relationships.

The old grid is still supported and you can choose the grid modality you prefer, by changing the Layout Manager property, available in the Layout tab of the Page Properties View. The new grid is called Grid System, while the old one is the Custom Grid. The grid View has been renamed from Grid to Layout.

Grid System

A Grid System is a layout system which allows to define the composition of the contents of a page through the usage of a geometric grid.
A grid is a two-dimensional schema made up of the intersection of horizontal and vertical axis. The grid is divided into a precise number of rows and columns, whose height and width represent respectively the minimum height and width of an item in the page layout.
The crossing among a row and a column forms a cell, that is a space inside the page which can host a content. The organization of the page into cells allows the structuring of the content inside the page.

The contents (e.g. images, text,...) can be positioned in the page inside specific locations (e.g. top-right, bottom-left,...) and each content can be further customized through the adoption of styles. In this way, the application presentation (page layout) is separated from the application logic and the designer can better concentrate on the visualization aspects of the page.

960 Grid System

WebRatio grid is based on a system that is an evolution of the 960 Grid System (http://960.gs), that is very popular for its easiness and flexibility.

960 Grid System (960gs) is a CSS framework for defining the page layout.
The framework is a set of style sheets with css rules. It provides two grids: one formed by 12 columns and the other formed by 16 columns; in both grids the width of the container remains always of 960px.

The number 960 is strictly related to the monitor resolution and it takes into account the browser window, the scrollbar,... Additionally it can be divided into several numbers (2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320, 480), so there is a rich and flexible choose in the size of columns.

The strength point of the 960gs are:

• fast prototyping and development of a page layout
• simplicity of the coding process, which minimizes errors and maximizes efficiency.

In the following picture you can see an extract of a 12 Column Grid: you can for example divide the page into 2 columns and choose the most appropriate combination for the size of each column.



As you can see in the next screenshot, the page layout based on a grid produces a well-structured page, where the contents are positioned in the page in an ordered, clear and  harmonious way.

Comparison between the previous grid and the new grid system

The features of the new grid, which differentiates it from the old grid are:

• usage of a Grid System for the rendition of the page
• renewed graphical interface
• advanced editing functionality of page composition (e.g. dynamic space allocation when dragging and dropping an element in the grid)
• positioning of child elements of Entry Units and Data Units controlled by the template

Features of the Grid System

User Interface Modeling

WebRatio Layout View (Window -> Show View -> WebRatio -> Layout) can be divided into three parts:

1. the tree on the left, containing all the content units defined in the page which can be placed inside the grid and the list of the available Custom Location defined in the applied page layout
2. the Grid
3. the toolbar
4. the breadcrumbs of the currently selected item in the grid

Tree

The side menu contains all the units positioned inside the page, together with the following items:

• Grid
• Cell
• Custom locations

Grid
It is a subgrid, composed by 12 columns. In order to position the Grid element inside the new grid, you simply need to drag and drop it on the grid area.

Cell
The cell is a space where you can place the items. With the cell you can group some items in the grid and apply a cell template which takes into account all the items inside the cell. For example, the cell of the following picture includes both the "Product details" Data Unit and the "Images" Data Unit.

Custom locations
A custom location is an additional location defined in the page layout, besides the main grid, where the designer may insert content units and subpages.
You can view the custom location grid part by clicking on the "Locations Overview":

To add a custom location in the page double click on the desired custom location, or drag and drop it in the “Locations Overview” area. To populate the custom location, drag and drop an element from the left tree (or from the current grid) into the custom location.

Grid

The grid allows you to define the structure of the page.
The new WebRatio grid can be opened by setting the Page  Properties View -> Layout tab -> Layout Manager Property to “Grid System”.

In the following picture you can see the new grid. It is a Grid System made up by 12 columns.

You can perform the following actions on the grid:

Add / remove rows You can add / remove one or more rows by simple clicking on the lower edge of the page Grid and dragging up (add rows) or down (remove rows).
Position an item (unit, grid, cell, location) You can position an item inside the grid by simply selecting the item from the side menu and dragging it into the chosen grid cell.	Split and place left / right	When the grid is already filled with some elements, the Split and place options will automatically resize the existing grid item adjacent to the new one.
	Place
	Place above / below	The grid items are automatically resized in order to host the new item.
	Insert in new row (above or below)
Resize an item You can resize an item inside the grid by selecting the item and dragging its border. N.B. If you hold "CTRL" button when dragging, the adjacent elements will be involved in the resize operation.	Resize right / left
	Resize right / left with adjacent elements
	Resize up / down	When you resize up or down an element, you are not changing the height of the element. In fact, the 960gs and, more generally, the presentation approach followed by the browser does not consider a fixed page height. Depending on the content length, the page scrolling is enabled. When you resize up / down an element, you will be sure to maintain the relative relationships among the items in the grid.
Move an item		You can move an item in the grid to a new position, by dragging the item and dropping it to the new position. When you try to move an item in a forbidden position (e.g. the item overlap an existing one), a red rectangle will appear.
Manual positioning		The manual position allows you to define the position of the child elements of a unit, inside the grid. The unit with child can be easily recognized, because they can be expanded in the left side menu, in order to see their child. For example a Data Unit with some attributes, an Entry Unit with some fields,... A manual position consists for example in changing the predefined fields order. To define the manual position, select the unit in the grid and then click on the + icon. A detailed grid appears, showing its contents. You can move the items, change their position, add or remove items (e.g. remove a field).

Toolbar

• Up: it returns to the page grid view. The button is enabled when you are seeing the grid details of an element (e.g. the grid showing the fields positioning of an Entry Unit)
• Zoom in: it increases the grid size
• Zoom out: it decreases the grid size
• Fit in Window: it adapts the grid to the size of the Layout View
• No Zoom: it resets the grid to the original size, removing the zoom preference
• Autofit in Window: it automatically adjusts the grid size according to the changes in the dimension of the Layout Window

Breadcrumbs

The breadcrumbs show the navigation path inside the grid (e.g Page → Entry Unit ) and the current position. For example, the following breadcrumbs indicate that you are seeing the grid related to the Entry Unit and that you reached it from the Page grid.

Generation

The generation process generates the pages of the Web application. The page will contain the HTML code related to the model elements. Each element is placed in a specific position in the page according to modeled Page Grid.

Basic case:

The new Grid System is an extension of the 960 Grid System. The generator will transform the model elements placed into the Grid into a set of elements of the 960 Grid System.

The generated page is structured with the <div> tags which have the typical classes of the 960 Grid System (e.g. <div class=“grid_4”>) . Each <div> tag contains one or more than one model elements. The width of the <div> tag width depends on the number of columns occupied by the element in the Grid (e.g. 6 columns → the width is haft of the width of its father container). The page also includes the stylesheets of the extended 960 Grid System in which the style classes are defined.

Example:

The picture below shows a Page Grid containing two Data Unit (each of them occupies 5 columns) separated by a white space (2 columns).

Generated page:

In the generated page, each model element is represented by a <div> tag whose width is equal to the number of cells occupied by the element in the Grid (e.g. 5 columns).

 <html>
 <head>
    ......
    <link href="builtin/960_Fluid_Nestable.css" type="text/css" rel="stylesheet">
    <link href="builtin/grid_elements.css" type="text/css" rel="stylesheet">
    ......
 </head>
 <body>
    ......
    <div class="container_12">
       <div class="grid_5 suffix_2 alpha">
          <!-- HTML code -->
       </div>
       <div class="grid_5 omega">
          <!-- HTML code -->
       </div>
    </div>
    ......
 </body>
 ......
 </html>

• import the extended 960 Grid System stylesheets (line 4-5)
• define the main page container (line 10). “container_12” means 12 columns width
• define the container of the left Data Unit inside the Grid (line 11). “grid_5” means 5 columns width.
• define the container of the right Data Unit inside the Grid (line 14). “grid_5” means 5 columns width.
• define the white space between the two Data Unit (line 11), with the “suffix” class. “suffix_2” means 2 columns width.
• HTML code of each Data Unit (lines 12, 15).

Implicit cell:

The positioning relationships among the elements inside the Grid and the space occupation of each element in the Grid have to be preserved in the result page. Regarding the height dimension, the elements inside the result page cannot have a fixed height, due to limitations of the 960 Grid System and more in general of the presentation approach of the browser. The height of an element inside the Grid is exploited during the generation phase for maintaining the relationships among the elements (e.g. the side by side relationships among some elements). In this case, the generator adds an implicit Grid Cell and groups the elements which have to be managed in an unified way.

Example:

The picture below shows a Page Grid containing some elements which should be placed on two columns. Both the “Technical record” Data Unit and “Combinations of product” Index Unit have to be positioned on the right of the “Product details” Data Unit. The generator will group the “Technical record” and “Combinations of product” Unit into a cell.

Generated page:

In the generated page, the implicit cell corresponds to a <div> element whose width is equal to the width of the contained elements (e.g. 6 columns).

 <html>
 <head>
    ......
    <link href="builtin/960_Fluid_Nestable.css" type="text/css" rel="stylesheet">
    <link href="builtin/grid_elements.css" type="text/css" rel="stylesheet">
    ......
 </head>
 <body>
    ......
    <div class="container_12">
       <div class="grid_6 alpha">
          <!-- HTML code -->
       </div>
       <div class="grid_6 omega container_6">
          <div class="grid_6 alpha omega">
             <!-- HTML code -->
          </div>
          ......
          <div class="grid_6 alpha omega">
             <!-- HTML code -->
          </div>
       </div>
       ......
    </div>
    ......
 </body>
 ......
 </html>

• import the extended 960 Grid System stylesheets (line 4-5)
• define the main page container (line 10). “container_12” means 12 columns width
• define the container of left element inside the Grid (line 11). “grid_6” means 6 columns width.
• implicit cell (line 14).
• define the container of right elements inside the Grid (lines 15, 19). “grid_6” means 6 columns width.
• HTML code of the Unit (lines 12, 16, 20).

Modeled cell:

The Cell is typically used for grouping the model elements which should have the same style. The style specified on the Cell will be applied to all the contained elements.

Example:

The picture below shows a Page Grid containing a Cell which groups a Data Unit and a Multi Data Unit (each of them occupies 12 columns).

Generated page:

In the generated page, the cell corresponds to a <div> element whose width is equal to the number of cells occupied by the cell in the Grid (e.g. 12 columns).

 <html>
 <head>
    ......
    <link href="builtin/960_Fluid_Nestable.css" type="text/css" rel="stylesheet">
    <link href="builtin/grid_elements.css" type="text/css" rel="stylesheet">
    ......
 </head>
 <body>
    ......
    <div class="container_12">
       <div class="grid_12 alpha omega">
          <!-- HTML code -->
       </div>
    </div>
    ......
 </body>
 </html>

• import the extended 960 Grid System stylesheets (line 4-5)
• define the main page container (line 10). “container_12” means 12 columns width
• define the modeled Cell (line 11). “grid_12” means 12 column width.
• HTML code of the Unit (line 12). It depends on the Cell Layout Template.

In the cell you can also place a Grid (it is a nested Grid) having 12 columns.

Example:

The picture below shows a Page Grid containing a Cell with a nested Grid.

Generated page:

 <html>
 <head>
    ......
    <link href="builtin/960_Fluid_Nestable.css" type="text/css" rel="stylesheet">
    <link href="builtin/grid_elements.css" type="text/css" rel="stylesheet">
    ......
 </head>
 <body>
    ......
    <div class="container_12">
       <div class="grid_6 suffix_6 alpha omega">
          <div class="container_12">
             <div class="grid_6 alpha">
	        <!-- HTML code -->
             </div>
             <div class="grid_6 omega">
                <!-- HTML code -->
             </div>
          </div>
       </div>
    </div>
    ......
 </body>
 </html>

• import the extended 960 Grid System stylesheets (line 4-5)
• define the main page container (line 10). “container_12” means 12 columns width
• define the modeled Cell (line 11). “grid_6” means 6 columns width.
• define the nested Grid (line 12). “container_12” means 12 columns width.
• define the container of left element inside the Grid (lines 13). “grid_6” means 6 columns width.
• define the container of right element inside the Grid (lines 16). “grid_6” means 6 columns width.
• HTML code of the Unit (lines 14, 17)

Examples

This section shows the usage of the Grid through some examples. For each one you can see the page in the browser and the Layout View displaying how the elements are placed inside the page.

Employee Form: position form elements manually

Subscription Form: position the Label, Value and Error form elements

Product Page: control the positioning and the relationships among elements