Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
89 lines (87 sloc) 3.75 KB
<!DOCTYPE html>
<html>
<head>
<title>HNR using inuitcss</title>
<link rel="stylesheet" href="http://developer.yahoo.com/yui/build/reset/reset.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://developer.yahoo.com/yui/build/fonts/fonts.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="http://developer.yahoo.com/yui/build/base/base.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="csswizardry-inuit.css-a130de3/css/grid.inuit.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="csswizardry-inuit.css-a130de3/css/inuit.css" type="text/css" media="screen"/>
<style>
.header { background : rgba(200, 200, 200, 0.75); }
.sidebar { background : rgba(100, 100, 100, 0.75); }
.main { background : rgba(150, 150, 150, 0.75); }
.footer { background : rgba(0, 0, 0, 0.75); color : #fff; }
.footer ul { margin : 0; border-right : 1px solid #fff; }
.footer ul li { list-style-type : none; margin : 0; text-transform : capitalize; }
.footer ul li:first-child { color : red; font-weight : bold; text-transform : lowercase; }
</style>
</head>
<body class="debug wrapper">
<div class="grids">
<div class="grid-10 header">
<h1>header</h1>
</div>
<div class="grid-6 main">
<h2>main content area</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed quis urna nulla. Aenean feugiat gravida luctus.
Fusce convallis ornare purus, ac vehicula nibh aliquam nec. Nam at mi arcu. Nulla egestas lectus at dolor
dignissim vulputate cursus ipsum mollis. Nam dolor felis, feugiat quis hendrerit sit amet, pretium ac nibh.
In quam libero, hendrerit sit amet scelerisque at, fermentum a sapien. Maecenas rutrum vestibulum neque vel
venenatis. Proin commodo faucibus tellus non dapibus. </p>
</div>
<div class="grid-4 sidebar">
<h2>left column</h2>
<p>Fusce dapibus ultrices quam, ac convallis neque viverra nec. Pellentesque ut vehicula leo. Nulla leo libero,
mattis elementum volutpat et, iaculis in ligula. Cras scelerisque leo et risus egestas pharetra. Suspendisse
pellentesque tristique aliquam. Donec faucibus mauris vitae purus aliquam ut convallis ipsum placerat. Donec
eu leo neque. </p>
</div>
<div class="grid-10 footer">
<div class="grid-2 prepend-1">
<h1>footer:</h1>
</div>
<div class="grid-6">
<h2>four column layout, two empty columns, faux-centering</h2>
</div>
<div class="clear"></div>
<div class="grid-2 prepend-1">
<ul>
<li>span-2 prepend-1 clear</li>
<li>sign in</li>
<li>where's my stuff</li>
<li>buy gift certificates</li>
<li>return policy</li>
</ul>
</div>
<div class="grid-2">
<ul>
<li>span-2</li>
<li>sign in</li>
<li>where's my stuff</li>
<li>buy gift certificates</li>
<li>return policy</li>
</ul>
</div>
<div class="grid-2">
<ul>
<li>span-2</li>
<li>sign in</li>
<li>where's my stuff</li>
<li>buy gift certificates</li>
<li>return policy</li>
</ul>
</div>
<div class="grid-2 append-1">
<ul>
<li>span-2 append-1 last</li>
<li>sign in</li>
<li>where's my stuff</li>
<li>buy gift certificates</li>
<li>return policy</li>
</ul>
</div>
</div>
</div>
</body>
</html>