diff --git a/entries/grid-layout.xml b/entries/grid-layout.xml new file mode 100644 index 00000000..8a8517f0 --- /dev/null +++ b/entries/grid-layout.xml @@ -0,0 +1,95 @@ + + + + Grid Layout + Multi-column layout grids + +

Using multiple column layouts isn't generally recommended on a mobile device because of the narrow screen width, but there are times where you may need to place small elements side-by-side (like buttons or navigation tabs, for example).

+

The jQuery Mobile framework provides a simple way to build CSS-based columns through a block style class convention called ui-grid.

+

There are four preset layouts that can be used in any situation that requires columns:

+ +

Grids are 100% width, completely invisible (no borders or backgrounds) and don't have padding or margins, so they shouldn't interfere with the styles of elements placed inside them.

+

Within the grid container, child elements are assigned ui-block-a/b/c/d/e in a sequential manner which makes each "block" element float side-by-side, forming the grid. The ui-block-a class essentially clears the floats which will start a new line (see multiple row grids, below).

+

Two column grids

+

To build a two-column (50/50%) layout, start with a container with a class of ui-grid-a, and add two child containers inside it classed with ui-block-a for the first column and ui-block-b for the second:

+

+<div class="ui-grid-a">
+	<div class="ui-block-a"><strong>I'm Block A</strong> and text inside will wrap</div>
+	<div class="ui-block-b"><strong>I'm Block B</strong> and text inside will wrap</div>
+</div><!-- /grid-a -->
+
+

The above markup produces the following content layout:

+
+
I'm Block A and text inside will wrap.
+
I'm Block B and text inside will wrap.
+
+

As you see above, by default grid blocks have no visual styling; they simply present content side-by-side.

+

Grid classes can be applied to any container. In this next example, we add ui-grid-a to a fieldset, and apply the ui-block classes to the container of each of the two buttons inside to stretch them each to 50% of the screen width:

+

+<fieldset class="ui-grid-a">
+	<div class="ui-block-a"><button type="submit" data-theme="c">Cancel</button></div>
+	<div class="ui-block-b"><button type="submit" data-theme="b">Submit</button></div>	   
+</fieldset>
+
+ +

Please note that the framework adds left and right margin to buttons in a grid. For a single button you can use a container with class ui-grid-solo and wrap the button in a div with class ui-block-a like the example below. This way the button will get the same margin.

+

+<div class="ui-grid-a">
+	<div class="ui-block-a"><button type="button" data-theme="c">Previous</button></div>
+	<div class="ui-block-b"><button type="button" data-theme="c">Next</button></div>	   
+</div>
+<div class="ui-grid-solo">
+	<div class="ui-block-a"><button type="v" data-theme="b">More</button></div>
+</div>
+
+ +

Theme classes (not data-theme attributes) from the theming system can be added to an element, including grids. On the blocks below, we're adding two classes: ui-bar to add the default bar padding and ui-bar-e to apply the background gradient and font styling for the "e" toolbar theme swatch. For illustration purposes, an inline style="height:120px" attribute is also added to each grid to set each to a standard height.

+ +

Three-column grids

+

The other grid layout configuration uses class=ui-grid-b on the parent, and 3 child container elements, each with its respective ui-block-a/b/c class, to create a three-column layout (33/33/33%). Note: These blocks are also styled with theme classes so the grid layout is clearly visible.

+

+<div class="ui-grid-b">
+	<div class="ui-block-a">Block A</div>
+	<div class="ui-block-b">Block B</div>
+	<div class="ui-block-c">Block C</div>
+</div><!-- /grid-b -->
+
+

This will produce a 33/33/33% grid for our content.

+ +

And an example of a 3 column grid with buttons inside:

+ +

Four-column grids

+

A four-column, 25/25/25/25% grid is created by specifying class=ui-grid-c on the parent and adding a fourth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.

+ +

Five-column grids

+

A five-column, 20/20/20/20/20% grid is created by specifying class=ui-grid-d on the parent and adding a fifth block. Note: These blocks are also styled with theme classes so the grid layout is clearly visible.

+ +

Multiple row grids

+

Grids are designed to wrap to multiple rows of items. For example, if you specify a 3-column grid (ui-grid-b) on a container that has nine child blocks, it will wrap to 3 rows of 3 items each. There is a CSS rule to clear the floats and start a new line when the class=ui-block-a is seen so make sure to assign block classes in a repeating sequence (a, b, c, a, b, c, etc.) that maps to the grid type:

+ +

Grids in toolbars

+

Grids are helpful for creating layouts within a toolbar. Here's a footer with a 4 column grid.

+ +
+ 1.0 + + + + + + + + A basic example of grid layout + + + + +
diff --git a/resources/grid-layout/example1.html b/resources/grid-layout/example1.html new file mode 100644 index 00000000..cb28a358 --- /dev/null +++ b/resources/grid-layout/example1.html @@ -0,0 +1,34 @@ + + + + Page Title + + + + + + + + + + +
+
+
Cancel
+
Submit
+
+
+ + + diff --git a/resources/grid-layout/example2.html b/resources/grid-layout/example2.html new file mode 100644 index 00000000..b047b081 --- /dev/null +++ b/resources/grid-layout/example2.html @@ -0,0 +1,38 @@ + + + + Page Title + + + + + + + + + + +
+
+
Previous
+
Next
+
+
+
More
+
+
+ + + diff --git a/resources/grid-layout/example3.html b/resources/grid-layout/example3.html new file mode 100644 index 00000000..1280a77c --- /dev/null +++ b/resources/grid-layout/example3.html @@ -0,0 +1,34 @@ + + + + Page Title + + + + + + + + + + +
+
+
Block A
+
Block B
+
+
+ + + diff --git a/resources/grid-layout/example4.html b/resources/grid-layout/example4.html new file mode 100644 index 00000000..e9c78cbf --- /dev/null +++ b/resources/grid-layout/example4.html @@ -0,0 +1,35 @@ + + + + Page Title + + + + + + + + + + +
+
+
Block A
+
Block B
+
Block C
+
+
+ + + diff --git a/resources/grid-layout/example5.html b/resources/grid-layout/example5.html new file mode 100644 index 00000000..00a04175 --- /dev/null +++ b/resources/grid-layout/example5.html @@ -0,0 +1,36 @@ + + + + Page Title + + + + + + + + + + +
+
+
Hmm
+
No
+
Yes
+
+
+ + + diff --git a/resources/grid-layout/example6.html b/resources/grid-layout/example6.html new file mode 100644 index 00000000..35ea43a7 --- /dev/null +++ b/resources/grid-layout/example6.html @@ -0,0 +1,36 @@ + + + + Page Title + + + + + + + + + + +
+
+
A
+
B
+
C
+
D
+
+
+ + + diff --git a/resources/grid-layout/example7.html b/resources/grid-layout/example7.html new file mode 100644 index 00000000..6a450142 --- /dev/null +++ b/resources/grid-layout/example7.html @@ -0,0 +1,37 @@ + + + + Page Title + + + + + + + + + + +
+
+
A
+
B
+
C
+
D
+
E
+
+
+ + + diff --git a/resources/grid-layout/example8.html b/resources/grid-layout/example8.html new file mode 100644 index 00000000..f4efa05c --- /dev/null +++ b/resources/grid-layout/example8.html @@ -0,0 +1,41 @@ + + + + Page Title + + + + + + + + + + +
+
+
A
+
B
+
C
+
A
+
B
+
C
+
A
+
B
+
C
+
+
+ + + diff --git a/resources/grid-layout/example9.html b/resources/grid-layout/example9.html new file mode 100644 index 00000000..75115058 --- /dev/null +++ b/resources/grid-layout/example9.html @@ -0,0 +1,39 @@ + + + + Page Title + + + + + + + + + + +
+ +
+ + +