mirror of
https://github.com/mozilla/gecko-dev.git
synced 2024-11-30 08:12:05 +00:00
228 lines
9.4 KiB
HTML
228 lines
9.4 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 Sample Page</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]-->
|
|
|
|
<!-- Import fancy-type plugin for the sample page. -->
|
|
<link
|
|
rel="stylesheet"
|
|
href="fancytype-screen.css"
|
|
type="text/css"
|
|
media="screen, projection"
|
|
/>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<h1>A simple sample page</h1>
|
|
<hr />
|
|
<h2 class="alt">
|
|
This sample page demonstrates a tiny fraction of what you get with
|
|
Blueprint.
|
|
</h2>
|
|
<hr />
|
|
|
|
<div class="span-7 colborder">
|
|
<h6>Here's a box</h6>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="span-8 colborder">
|
|
<h6>And another box</h6>
|
|
<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 laboris nisi ut aliquip.
|
|
</p>
|
|
</div>
|
|
|
|
<div class="span-7 last">
|
|
<h6>This box is aligned with the sidebar</h6>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
<hr />
|
|
<hr class="space" />
|
|
|
|
<div class="span-15 prepend-1 colborder">
|
|
<p>
|
|
<img src="test.jpg" class="top pull-1" alt="test" />Lorem ipsum dolor
|
|
sit amet, <em>consectetuer adipiscing elit</em>. Nunc congue ipsum
|
|
vestibulum libero. Aenean vitae justo. Nam eget tellus. Etiam
|
|
convallis, est eu lobortis mattis, lectus tellus tempus felis, a
|
|
ultricies erat ipsum at metus.
|
|
</p>
|
|
<p>
|
|
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
|
|
<a href="#">Morbi et risus</a>. Aliquam nisl. Nulla facilisi. Cras
|
|
accumsan vestibulum ante. Vestibulum sed tortor. Praesent
|
|
<span class="caps">SMALL CAPS</span> tempus fringilla elit. Ut elit
|
|
diam, sagittis in, nonummy in, gravida non, nunc. Ut orci. Class
|
|
aptent taciti sociosqu ad litora torquent per conubia nostra, per
|
|
inceptos hymenaeos. Nam egestas, orci eu imperdiet malesuada, nisl
|
|
purus fringilla odio, quis commodo est orci vitae justo. Aliquam
|
|
placerat odio tincidunt nulla. Cras in libero. Aenean rutrum, magna
|
|
non tristique posuere, erat odio eleifend nisl, non convallis est
|
|
tortor blandit ligula. Nulla id augue.
|
|
</p>
|
|
<p>
|
|
Nullam mattis, odio ut tempus facilisis, metus nisl facilisis metus,
|
|
auctor consectetuer felis ligula nec mauris. Vestibulum odio erat,
|
|
fermentum at, commodo vitae, ultrices et, urna. Mauris vulputate, mi
|
|
pulvinar sagittis condimentum, sem nulla aliquam velit, sed imperdiet
|
|
mi purus eu magna. Nulla varius metus ut eros. Aenean aliquet magna
|
|
eget orci. Class aptent taciti sociosqu ad litora.
|
|
</p>
|
|
<p>
|
|
Vivamus euismod. Cum sociis natoque penatibus et magnis dis parturient
|
|
montes, nascetur ridiculus mus. Suspendisse vel nibh ut turpis dictum
|
|
sagittis. Aliquam vel velit a elit auctor sollicitudin. Nam vel dui
|
|
vel neque lacinia pretium. Quisque nunc erat, venenatis id, volutpat
|
|
ut, scelerisque sed, diam. Mauris ante. Pellentesque habitant morbi
|
|
tristique senectus et netus et malesuada fames ac turpis egestas.
|
|
Donec mattis. Morbi dignissim sollicitudin libero. Nulla lorem.
|
|
</p>
|
|
<blockquote>
|
|
<p>
|
|
Integer cursus ornare mauris. Praesent nisl arcu, imperdiet eu,
|
|
ornare id, scelerisque ut, nunc. Praesent sagittis erat sed velit
|
|
tempus imperdiet. Ut tristique, ante in interdum hendrerit, erat
|
|
enim faucibus felis, quis rutrum mauris lorem quis sem. Vestibulum
|
|
ligula nisi, mattis nec, posuere et, blandit eu, ligula. Nam
|
|
suscipit placerat odio. Class aptent taciti sociosqu ad litora
|
|
torquent per conubia nostra, per inceptos hymenaeos. Pellentesque
|
|
tortor libero, venenatis vitae, rhoncus eu, placerat ut, mi. Nulla
|
|
nulla.
|
|
</p>
|
|
</blockquote>
|
|
<p>
|
|
Maecenas vel metus quis magna pharetra fermentum.
|
|
<em>Integer sit amet tortor</em>. Maecenas porttitor, pede sed gravida
|
|
auctor, nulla augue aliquet elit, at pretium urna orci ut metus.
|
|
Aliquam in dolor. Vestibulum ante ipsum primis in faucibus orci luctus
|
|
et ultrices posuere cubilia Curae; Sed aliquam, tellus id ornare
|
|
posuere, quam nunc accumsan turpis, at convallis tellus orci et nisl.
|
|
Phasellus congue neque a lorem.
|
|
</p>
|
|
|
|
<hr />
|
|
<div class="span-7 colborder">
|
|
<h6>This is a nested column</h6>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
<div class="span-7 last">
|
|
<h6>This is another nested column</h6>
|
|
<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.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div class="span-7 last">
|
|
<h3>A <span class="alt">Simple</span> Sidebar</h3>
|
|
|
|
<p>
|
|
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
|
|
posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede
|
|
sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem
|
|
nisi vel augue.
|
|
</p>
|
|
<p>
|
|
Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi a
|
|
sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit tincidunt
|
|
gravida. Mauris a lectus. Aliquam erat volutpat. Phasellus ultrices mi
|
|
a sapien. Nunc rutrum egestas lorem. Duis ac sem sagittis elit
|
|
tincidunt gravida.
|
|
</p>
|
|
<p class="quiet">
|
|
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
|
|
posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede
|
|
sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem
|
|
nisi vel augue.
|
|
</p>
|
|
|
|
<h5>Incremental leading</h5>
|
|
<p class="incr">
|
|
Vestibulum ante ipsum primis in faucibus orci luctus vestibulum ante
|
|
ipsum primis in faucibus orci luctus et ultrices posuere cubilia
|
|
Curae; Cras ornare mattis nunc. Mauris venenatis, pede sed aliquet
|
|
vehicula, lectus tellus pulvinar neque, non cursus sem nisi vel augue.
|
|
sed aliquet vehicula, lectus tellus.
|
|
</p>
|
|
<p class="incr">
|
|
Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
|
|
posuere cubilia Curae; Cras ornare mattis nunc. Mauris venenatis, pede
|
|
sed aliquet vehicula, lectus tellus pulvinar neque, non cursus sem
|
|
nisi vel augue. sed aliquet vehicula, lectus tellus pulvinar neque,
|
|
non cursus sem nisi vel augue. ipsum primis in faucibus orci luctus et
|
|
ultrices posuere cubilia Curae; Cras ornare mattis nunc. Mauris
|
|
venenatis, pede sed aliquet vehicula, lectus tellus pulvinar neque,
|
|
non cursus sem nisi vel augue. sed aliquet vehicula, lectus tellus
|
|
pulvinar neque, non cursus sem nisi vel augue.
|
|
</p>
|
|
</div>
|
|
|
|
<hr />
|
|
<h2 class="alt">
|
|
You may pick and choose amongst these and many more features, so be
|
|
bold.
|
|
</h2>
|
|
<hr />
|
|
|
|
<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="top"
|
|
/></a>
|
|
</p>
|
|
</div>
|
|
</body>
|
|
</html>
|