mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-23 12:51:06 +00:00
318 lines
11 KiB
HTML
318 lines
11 KiB
HTML
<!-- 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>
|