|
Smokes a Lot
Join Date: Jul 2003
Location: CA, USA
Posts: 1,594
Thanks: 5
Thanked 20 Times in 20 Posts
|
Just throwing this out there as we just started using twitter bootstrap in an HTML 5 app we are developing. The following example degrades pretty well in IE 7 (just some margin issues), no idea about 6, but I'll tell you what, the whole framework is pretty slick. This has two sets of columns because I like to get crazy. It's all fluid, and I just made this example in literally 30 seconds.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />
<style type="text/css">
blockquote
{
text-align:center;
margin:35px;
font-style:italic;
}
</style>
</head>
<body>
<div class="row-fluid">
<div class="span6">
<div class="row-fluid">
<div class="span6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie.
</div>
<div class="span6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie.
</div>
</div>
<div class="row-fluid">
<blockquote class="span12">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit porro quisquam est qui dolorem ipsum quia dolor...
</blockquote>
</div>
<div class="row-fluid">
<div class="span6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie.
</div>
<div class="span6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie.
</div>
</div>
</div>
<div class="span6">
<div class="row-fluid">
<div class="span6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie.
</div>
<div class="span6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie.
</div>
</div>
<div class="row-fluid">
<blockquote class="span12">
Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...
</blockquote>
</div>
<div class="row-fluid">
<div class="span6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie.
</div>
<div class="span6">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc congue erat non lectus bibendum mollis. Curabitur rhoncus eleifend vulputate. Cras varius imperdiet diam id pulvinar. Quisque nibh enim, placerat vel venenatis at, interdum vel ligula. Nulla blandit facilisis porta. Vestibulum ac commodo mi. Phasellus ullamcorper, arcu ut congue rhoncus, neque dolor ultrices libero, sed suscipit tellus lorem vitae sapien. Proin sit amet enim feugiat tellus dignissim sagittis at porta metus. In libero metus, accumsan quis commodo at, scelerisque in magna. Cras arcu dolor, aliquam ut varius sit amet, vestibulum in lorem. Quisque vitae nibh tellus. Cras eu dolor non justo vulputate accumsan sed in mi. Nulla facilisi. Ut semper faucibus tincidunt. Proin feugiat adipiscing molestie.
</div>
</div>
</div>
</div>
</body>
</html>
I'm not sure how you're setting this up in your CMS, but I would have a single text area, and then split the user's content up evenly into the number of columns / rows you have on submission and a separate field for the quote. That way the content provider isn't responsible for ensuring that the paragraphs are of relatively equal size.
__________________
Helping to build a bigger box. - Adam Matthews
Last edited by Basscyst; 01-30-2013 at 12:32 AM..
|