Polygon Grid and Type test

bootstrap.css

/*!
 * Bootstrap v2.0.3
 *
 * Copyright 2012 Twitter, Inc
 * Licensed under the Apache License v2.0
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Designed and built with all the love in the world @twitter by @mdo and @fat.
 */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 28px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
  display: block;
}
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
  *zoom: 1;
}
audio:not([controls]) {
  display: none;
}
html {
  font-size: 100%;
  -webkit-text-size-adjust: 100%;
  -ms-text-size-adjust: 100%;
}
a:focus {
  outline: thin dotted #333;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}
a:hover,
a:active {
  outline: 0;
}
sub,
sup {
  position: relative;
  font-size: 75%;
  line-height: 0;
  vertical-align: baseline;
}
sup {
  top: -0.5em;
}
sub {
  bottom: -0.25em;
}
img {
  max-width: 100%;
  vertical-align: middle;
  border: 0;
  -ms-interpolation-mode: bicubic;
}
button,
input,
select,
textarea {
  margin: 0;
  font-size: 100%;
  vertical-align: middle;
}
button,
input {
  *overflow: visible;
  line-height: normal;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
  padding: 0;
  border: 0;
}
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  cursor: pointer;
  -webkit-appearance: button;
}
input[type="search"] {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  -webkit-appearance: textfield;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
textarea {
  overflow: auto;
  vertical-align: top;
}
body {
  margin: 0;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  line-height: 20px;
  color: #333333;
  background: #ffffff url(http://static.tumblr.com/qa3z44g/Nvam3v5u0/bg.gif);
}
a {
  color: #248AB0;
  text-decoration: none;
  padding: 1px 3px;
  padding: 1px 3px;
  -webkit-border-radius: 2px;

}
a:hover {
  background: rgba(69, 171, 209, 0.1);
}
a:active {
  position: relative;
  top: 1px;
}
.row {
  margin-left: -20px;
  *zoom: 1;
}
.row:before,
.row:after {
  display: table;
  content: "";
}
.row:after {
  clear: both;
}
[class*="span"] {
  float: left;
  margin-left: 20px;
}
.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
  width: 940px;
}
.span6 {
  width: 940px;
}
.span5 {
  width: 780px;
}
.span4 {
  width: 620px;
}
.span3 {
  width: 460px;
}
.span2 {
  width: 300px;
}
.span1 {
  width: 140px;
}
.offset6 {
  margin-left: 980px;
}
.offset5 {
  margin-left: 820px;
}
.offset4 {
  margin-left: 660px;
}
.offset3 {
  margin-left: 500px;
}
.offset2 {
  margin-left: 340px;
}
.offset1 {
  margin-left: 180px;
}
.container {
  margin-right: auto;
  margin-left: auto;
  *zoom: 1;
  margin-top: 20px;
}
.container:before,
.container:after {
  display: table;
  content: "";
}
.container:after {
  clear: both;
}
p {
  margin: -2px 0 9px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 20px;
}
p small {
  font-size: 12px;
  color: #999999;
}
.lead {
  margin-bottom: 18px;
  font-size: 20px;
  font-weight: 200;
  line-height: 27px;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 9px;
  font-family: inherit;
  font-weight: bold;
  color: inherit;
  text-rendering: optimizelegibility;
}
h1 small,
h2 small,
h3 small,
h4 small,
h5 small,
h6 small {
  font-weight: normal;
  color: #999999;
}
h1 {
  font-size: 37px;
  line-height: 1.2;
  margin-bottom: 5px;
  font-family: 'clarendon', "helvetica neue", helvetica, sans-serif;
}
h1 small {
  font-size: 20px;
}
h2 {
  font-size: 30px;
  line-height: 40px;
}
h2 small {
  font-size: 18px;
}
h3 {
  font-size: 20px;
  line-height: 30px;
}
h3 small {
  font-size: 16px;
}
h4,
h5,
h6 {
  line-height: 20px;
}
h4 {
  font-size: 14px;
  text-transform: uppercase;
  margin-bottom: 11px;
  line-height: 1.5;
}
h4 small {
  font-size: 12px;
}
h5 {
  font-size: 12px;
}
h6 {
  font-size: 11px;
  color: #999999;
  text-transform: uppercase;
}
.page-header {
  padding-bottom: 17px;
  margin: 18px 0;
  border-bottom: 1px solid #eeeeee;
}
.page-header h1 {
  line-height: 1;
}
ul,
ol {
  padding: 0;
  margin: 0 0 9px 25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
  margin-bottom: 0;
}
ul {
  list-style: disc;
}
ol {
  list-style: decimal;
}
li {
  line-height: 18px;
}
ul.unstyled,
ol.unstyled {
  margin-left: 0;
  list-style: none;
}
dl {
  margin-bottom: 18px;
}
dt,
dd {
  line-height: 18px;
}
dt {
  font-weight: bold;
  line-height: 17px;
}
dd {
  margin-left: 9px;
}
.dl-horizontal dt {
  float: left;
  width: 120px;
  clear: left;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dl-horizontal dd {
  margin-left: 130px;
}
hr {
  margin: 18px 0;
  border: 0;
  border-top: 1px solid #eeeeee;
  border-bottom: 1px solid #ffffff;
}
strong {
  font-weight: bold;
}
em {
  font-style: italic;
}
.muted {
  color: #999999;
}
abbr[title] {
  cursor: help;
  border-bottom: 1px dotted #ddd;
}
abbr.initialism {
  font-size: 90%;
  text-transform: uppercase;
}
blockquote {
  padding: 0 0 0 15px;
  margin: 0 0 18px;
  border-left: 5px solid #eeeeee;
}
blockquote p {
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 22.5px;
}
blockquote small {
  display: block;
  line-height: 18px;
  color: #999999;
}
blockquote small:before {
  content: '\2014 \00A0';
}
blockquote.pull-right {
  float: right;
  padding-right: 15px;
  padding-left: 0;
  border-right: 5px solid #eeeeee;
  border-left: 0;
}
blockquote.pull-right p,
blockquote.pull-right small {
  text-align: right;
}
q:before,
q:after,
blockquote:before,
blockquote:after {
  content: "";
}
address {
  display: block;
  margin-bottom: 18px;
  font-style: normal;
  line-height: 18px;
}
small {
  font-size: 100%;
}
cite {
  font-style: normal;
}
@media (max-width: 480px) {
  .nav-collapse {
    -webkit-transform: translate3d(0, 0, 0);
  }
  .page-header h1 small {
    display: block;
    line-height: 18px;
  }
  input[type="checkbox"],
  input[type="radio"] {
    border: 1px solid #ccc;
  }
  .form-horizontal .control-group > label {
    float: none;
    width: auto;
    padding-top: 0;
    text-align: left;
  }
  .form-horizontal .controls {
    margin-left: 0;
  }
  .form-horizontal .control-list {
    padding-top: 0;
  }
  .form-horizontal .form-actions {
    padding-left: 10px;
    padding-right: 10px;
  }
  .modal {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    width: auto;
    margin: 0;
  }
  .modal.fade.in {
    top: auto;
  }
  .modal-header .close {
    padding: 10px;
    margin: -10px;
  }
  .carousel-caption {
    position: static;
  }
}
@media (max-width: 767px) {
  body {
    padding-left: 20px;
    padding-right: 20px;
  }
  .navbar-fixed-top,
  .navbar-fixed-bottom {
    margin-left: -20px;
    margin-right: -20px;
  }
  .container-fluid {
    padding: 0;
  }
  .dl-horizontal dt {
    float: none;
    clear: none;
    width: auto;
    text-align: left;
  }
  .dl-horizontal dd {
    margin-left: 0;
  }
  .container {
    width: auto;
  }
  .row-fluid {
    width: 100%;
  }
  .row,
  .thumbnails {
    margin-left: 0;
  }
  [class*="span"],
  .row-fluid [class*="span"] {
    float: none;
    display: block;
    width: auto;
    margin-left: 0;
  }
  .input-large,
  .input-xlarge,
  .input-xxlarge,
  input[class*="span"],
  select[class*="span"],
  textarea[class*="span"],
  .uneditable-input {
    display: block;
    width: 100%;
    min-height: 28px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }
  .input-prepend input,
  .input-append input,
  .input-prepend input[class*="span"],
  .input-append input[class*="span"] {
    display: inline-block;
    width: auto;
  }
}
@media (min-width: 768px) and (max-width: 979px) {
  .row {
    margin-left: -20px;
    *zoom: 1;
  }
  .row:before,
  .row:after {
    display: table;
    content: "";
  }
  .row:after {
    clear: both;
  }
  [class*="span"] {
    float: left;
    margin-left: 20px;
  }
  .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 724px;
  }
  .span6 {
    width: 724px;
  }
  .span5 {
    width: 600px;
  }
  .span4 {
    width: 476px;
  }
  .span3 {
    width: 352px;
  }
  .span2 {
    width: 228px;
  }
  .span1 {
    width: 104px;
  }
  .offset6 {
    margin-left: 764px;
  }
  .offset5 {
    margin-left: 640px;
  }
  .offset4 {
    margin-left: 516px;
  }
  .offset3 {
    margin-left: 392px;
  }
  .offset2 {
    margin-left: 268px;
  }
  .offset1 {
    margin-left: 144px;
  }
  input,
  textarea,
  .uneditable-input {
    margin-left: 0;
  }
  input.span12, textarea.span12, .uneditable-input.span12 {
    width: 714px;
  }
  input.span11, textarea.span11, .uneditable-input.span11 {
    width: 652px;
  }
  input.span10, textarea.span10, .uneditable-input.span10 {
    width: 590px;
  }
  input.span9, textarea.span9, .uneditable-input.span9 {
    width: 528px;
  }
  input.span8, textarea.span8, .uneditable-input.span8 {
    width: 466px;
  }
  input.span7, textarea.span7, .uneditable-input.span7 {
    width: 404px;
  }
  input.span6, textarea.span6, .uneditable-input.span6 {
    width: 342px;
  }
  input.span5, textarea.span5, .uneditable-input.span5 {
    width: 280px;
  }
  input.span4, textarea.span4, .uneditable-input.span4 {
    width: 218px;
  }
  input.span3, textarea.span3, .uneditable-input.span3 {
    width: 156px;
  }
  input.span2, textarea.span2, .uneditable-input.span2 {
    width: 94px;
  }
  input.span1, textarea.span1, .uneditable-input.span1 {
    width: 32px;
  }
}
@media (min-width: 1200px) {
  .row {
    margin-left: -30px;
    *zoom: 1;
  }
  .row:before,
  .row:after {
    display: table;
    content: "";
  }
  .row:after {
    clear: both;
  }
  [class*="span"] {
    float: left;
    margin-left: 30px;
  }
  .container,
  .navbar-fixed-top .container,
  .navbar-fixed-bottom .container {
    width: 1170px;
  }
  .span6 {
    width: 1170px;
  }
  .span5 {
    width: 970px;
  }
  .span4 {
    width: 770px;
  }
  .span3 {
    width: 570px;
  }
  .span2 {
    width: 370px;
  }
  .span1 {
    width: 170px;
  }
  .offset6 {
    margin-left: 1230px;
  }
  .offset5 {
    margin-left: 1030px;
  }
  .offset4 {
    margin-left: 830px;
  }
  .offset3 {
    margin-left: 630px;
  }
  .offset2 {
    margin-left: 430px;
  }
  .offset1 {
    margin-left: 230px;
  }
  .row-fluid {
    width: 100%;
    *zoom: 1;
  }
  input,
  textarea,
  .uneditable-input {
    margin-left: 0;
  }
  input.span12, textarea.span12, .uneditable-input.span12 {
    width: 1160px;
  }
  input.span11, textarea.span11, .uneditable-input.span11 {
    width: 1060px;
  }
  input.span10, textarea.span10, .uneditable-input.span10 {
    width: 960px;
  }
  input.span9, textarea.span9, .uneditable-input.span9 {
    width: 860px;
  }
  input.span8, textarea.span8, .uneditable-input.span8 {
    width: 760px;
  }
  input.span7, textarea.span7, .uneditable-input.span7 {
    width: 660px;
  }
  input.span6, textarea.span6, .uneditable-input.span6 {
    width: 560px;
  }
  input.span5, textarea.span5, .uneditable-input.span5 {
    width: 460px;
  }
  input.span4, textarea.span4, .uneditable-input.span4 {
    width: 360px;
  }
  input.span3, textarea.span3, .uneditable-input.span3 {
    width: 260px;
  }
  input.span2, textarea.span2, .uneditable-input.span2 {
    width: 160px;
  }
  input.span1, textarea.span1, .uneditable-input.span1 {
    width: 60px;
  }
  .thumbnails {
    margin-left: -30px;
  }
  .thumbnails > li {
    margin-left: 30px;
  }
  .row-fluid .thumbnails {
    margin-left: 0;
  }
}

/* Special grid styles
-------------------------------------------------- */
.show-grid {
  margin-top: 10px;
  margin-bottom: 20px;
}
.show-grid [class*="span"] {
  background-color: #45abd1;
  text-align: center;
  -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
          border-radius: 3px;
  min-height: 30px;
  line-height: 30px;
  opacity: 0.5;
}
.show-grid:hover [class*="span"] {
  opacity: 1;
}
.show-grid .show-grid {
  margin-top: 0;
  margin-bottom: 0;
}
.show-grid .show-grid [class*="span"] {
  background-color: #cc0000;
}

polygon.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://gist.github.com/2660291#file_bootstrap.css" />
<title>Polygon type tests</title>
</head>
<body>
<div class="container">
<h1>Polygon Type &amp; Grid Test</h1>
<h2>Holla</h2>
<h3>Now we get started</h3>
	<div class="row">
	<div class="span2">
	<h3>Top10 presents</h3>
	<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 <a href="#">aliquip ex ea commodo consequat</a>. 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><!-- /span4 -->
	
	<div class="span2">
	<h3>About Top10</h3>
	<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 <a href="#">aliquip ex ea commodo consequat</a>. 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><!-- /span4 -->
	
	<div class="span2">
	<h3>Wednesday Pizza</h3>
	<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 <a href="#">aliquip ex ea commodo consequat</a>. 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><!-- /span4 -->
	</div><!-- /row -->
	
	<div class="row show-grid">
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
    <div class="span1">1</div>
  	</div>
  	
  	<div class="row show-grid">
    <div class="span2">2</div>
    <div class="span2">2</div>
    <div class="span2">2</div>
  	</div>
  	
  	<div class="row show-grid">
    <div class="span5">5</div>
    <div class="span1">1</div>
  	</div><!-- /row -->
  	  	
  	<div class="row">
  	<div class="span3">
	<h4>Freestyle Wednesday</h4>
	<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 <a href="#">aliquip ex ea commodo consequat</a>. 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><!-- /span3 -->
	<div class="span3">
	<h4>Burrito Thursday</h4>
	<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 <a href="#">aliquip ex ea commodo consequat</a>. 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><!-- /span3 -->
	</div>

  
</div><!-- /container -->
</body>
</html>