diff options
Diffstat (limited to 'build/pgo/blueprint/grid.html')
| -rw-r--r-- | build/pgo/blueprint/grid.html | 317 |
1 files changed, 317 insertions, 0 deletions
diff --git a/build/pgo/blueprint/grid.html b/build/pgo/blueprint/grid.html new file mode 100644 index 0000000000..d127f87c88 --- /dev/null +++ b/build/pgo/blueprint/grid.html @@ -0,0 +1,317 @@ +<!-- This Source Code Form is subject to the terms of the Mozilla Public + - License, v. 2.0. If a copy of the MPL was not distributed with this + - file, You can obtain one at http://mozilla.org/MPL/2.0/. --> + +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> + +<html lang="en"> + <head> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> + <title>Blueprint Grid Tests</title> + + <!-- Framework CSS --> + <link + rel="stylesheet" + href="screen.css" + type="text/css" + media="screen, projection" + /> + <link rel="stylesheet" href="print.css" type="text/css" media="print" /> + <!--[if IE + ]><link + rel="stylesheet" + href="ie.css" + type="text/css" + media="screen, projection" + /><![endif]--> + </head> + <body> + <div class="container showgrid"> + <h1>Blueprint Tests: grid.css</h1> + + <div class="span-8"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-8"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-8 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + + <div class="span-6 append-1"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-6 append-2"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-6 append-3 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + + <div class="span-6 prepend-1"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-6 prepend-2"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <div class="span-6 prepend-3 last"> + <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> + </div> + <hr /> + + <div class="span-12 border"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + </p> + </div> + <div class="span-12 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + </p> + </div> + <hr /> + + <div class="span-1 prepend-1"><p>1</p></div> + <div class="span-1 prepend-2"><p>2</p></div> + <div class="span-1 prepend-3"><p>3</p></div> + <div class="span-1 prepend-4"><p>4</p></div> + <div class="span-1 prepend-5"><p>5</p></div> + <div class="span-1 prepend-3 last"><p>3</p></div> + + <div class="span-1 append-1"><p>1</p></div> + <div class="span-1 append-2"><p>2</p></div> + <div class="span-1 append-3"><p>3</p></div> + <div class="span-1 append-4"><p>4</p></div> + <div class="span-1 append-5"><p>5</p></div> + <div class="span-1 append-3 last"><p>3</p></div> + + <div class="span-1 border"><p>1</p></div> + <div class="span-1 border"><p>2</p></div> + <div class="span-1 border"><p>3</p></div> + <div class="span-1 border"><p>4</p></div> + <div class="span-1 border"><p>5</p></div> + <div class="span-1 border"><p>6</p></div> + <div class="span-1 border"><p>7</p></div> + <div class="span-1 border"><p>8</p></div> + <div class="span-1 border"><p>9</p></div> + <div class="span-1 border"><p>10</p></div> + <div class="span-1 border"><p>11</p></div> + <div class="span-1 border"><p>12</p></div> + <div class="span-1 border"><p>13</p></div> + <div class="span-1 border"><p>14</p></div> + <div class="span-1 border"><p>15</p></div> + <div class="span-1 border"><p>16</p></div> + <div class="span-1 border"><p>17</p></div> + <div class="span-1 border"><p>18</p></div> + <div class="span-1 border"><p>19</p></div> + <div class="span-1 border"><p>20</p></div> + <div class="span-1 border"><p>21</p></div> + <div class="span-1 border"><p>22</p></div> + <div class="span-1 border"><p>23</p></div> + <div class="span-1 last"><p>24</p></div> + + <div class="span-4"><p>1</p></div> + <div class="span-4"><p>2</p></div> + <div class="span-4"><p>3</p></div> + <div class="span-4"><p>4</p></div> + <div class="span-4"><p>5</p></div> + <div class="span-4 last"><p>6</p></div> + + <div class="prepend-23 span-1 last"><p>24</p></div> + + <div class="prepend-1 span-1"><p>2</p></div> + <div class="prepend-20 span-1 append-1 last"><p>23</p></div> + <hr /> + + <div class="span-24"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad + minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla + pariatur. Excepteur sint occaecat cupidatat non proident, sunt in + culpa qui officia deserunt mollit anim id est laborum. + </p> + </div> + + <div class="span-12"> + <div class="span-6"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod. + </p> + </div> + + <div class="span-6 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + + <div class="span-12 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + </div> + + <div class="span-12 last"> + <div class="span-6"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod. + </p> + </div> + + <div class="span-6 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + + <div class="span-12 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + </div> + + <div class="span-14 prepend-5 append-5 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + <hr /> + + <div class="span-12"> + <h5>TESTING .PUSH-1 TO .PUSH-5</h5> + + <div class="span-2"><img src="test-small.jpg" class="push-1" /></div> + <div class="span-10 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + + <div class="span-2"><img src="test-small.jpg" class="push-2" /></div> + <div class="span-10 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + + <div class="span-2"><img src="test-small.jpg" class="push-3" /></div> + <div class="span-10 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + + <div class="span-2"><img src="test-small.jpg" class="push-4" /></div> + <div class="span-10 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + + <div class="span-2"><img src="test-small.jpg" class="push-5" /></div> + <div class="span-10 last"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + </div> + + <div class="span-12 last"> + <h5>TESTING .PULL-1 TO .PULL-5</h5> + + <div class="span-10"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + <div class="span-2 last"> + <img src="test-small.jpg" class="top pull-1" /> + </div> + + <div class="span-10"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + <div class="span-2 last"> + <img src="test-small.jpg" class="top pull-2" /> + </div> + + <div class="span-10"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + <div class="span-2 last"> + <img src="test-small.jpg" class="top pull-3" /> + </div> + + <div class="span-10"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + <div class="span-2 last"> + <img src="test-small.jpg" class="top pull-4" /> + </div> + + <div class="span-10"> + <p> + Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + </p> + </div> + <div class="span-2 last"> + <img src="test-small.jpg" class="top pull-5" /> + </div> + </div> + + <div class="span-24"> + <p> + <a href="http://validator.w3.org/check?uri=referer"> + <img + src="valid.png" + alt="Valid HTML 4.01 Strict" + height="31" + width="88" + class="bottom" + /></a> + </p> + </div> + </div> + </body> +</html> |