53960d9c25
This port adds semantic win and color customization to your blueprint button styles. It also let's you choose whether you want to float them right, left, or leave them inline-block. To install this plugin into your project run the following command. compass -f blueprint -p buttons Or if you have a rails project: compass --rails -f blueprint -p buttons
60 lines
2.1 KiB
HTML
60 lines
2.1 KiB
HTML
<!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 Buttons Sample Page</title>
|
|
|
|
<!-- Framework CSS -->
|
|
<link rel="stylesheet" href="../stylesheets/screen.css" type="text/css" media="screen, projection">
|
|
<link rel="stylesheet" href="../stylesheets/print.css" type="text/css" media="print">
|
|
<!--[if IE]><link rel="stylesheet" href="../stylesheets/ie.css" type="text/css" media="screen, projection"><![endif]-->
|
|
<link rel="stylesheet" href="../stylesheets/buttons.css" type="text/css" media="screen, projection">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<div class="container">
|
|
<h1>A Button Example Page</h1>
|
|
<hr>
|
|
<h2 class="alt">This sample page demonstrates what you can do with the Buttons plugin.</h2>
|
|
<hr>
|
|
|
|
<div class="span-12">
|
|
<h3>Link Buttons</h3>
|
|
<a class="button">Link Button</a>
|
|
<a class="button positive">Positive Button</a>
|
|
<a class="button negative">Negative Button</a>
|
|
</div>
|
|
|
|
<div class="span-12 last">
|
|
<h3>Real Buttons</h3>
|
|
<button>Normal Button</button>
|
|
<button class="positive">Positive Button</button>
|
|
<button class="negative">Negative Button</button>
|
|
</div>
|
|
|
|
<div class="span-12">
|
|
<h3>Link Buttons with Images</h3>
|
|
<a class="button"><img src="../images/buttons/tick.png" alt=""/> Save</a>
|
|
<a class="button positive"><img src="../images/buttons/key.png" alt=""/> Change Password</a>
|
|
<a class="button negative"><img src="../images/buttons/cross.png" alt=""/> Cancel</a>
|
|
</div>
|
|
|
|
<div class="span-12 last">
|
|
<h3>Real Buttons with Images</h3>
|
|
<button><img src="../images/buttons/tick.png" alt=""/> Save</button>
|
|
<button class="positive"><img src="../images/buttons/key.png" alt=""/> Change Password</button>
|
|
<button class="negative"><img src="../images/buttons/cross.png" alt=""/> Cancel</button>
|
|
</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="top"></a></p>
|
|
</div>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|