-
Notifications
You must be signed in to change notification settings - Fork 1
Documentation
grantmx edited this page Nov 18, 2014
·
6 revisions
<style>
.row {
width: 100%;
position:relative;
}
[class*='span-'] {
float: left;
padding: 20px;
position: relative;
overflow: hidden;
}
[class*='span-']:last-of-type {
padding-right: 0px;
float: right;
border-right: none;
}
/* Main Widths */
.span-1 {width: 100%;}
.span-2 {width: 50%;}
.span-3 {width: 33.33%;}
.span-4 {width: 25%;}
.span-5 {width: 20%;}
.span-6 {width: 16.6666666667%;}
.span-7 {width: 14.2857142857%;}
.span-8 {width: 12.5%;}
.span-9 {width: 11.1111111111%;}
.span-10 {width: 10%;}
.span-11 {width: 9.09090909091%;}
.span-12 {width: 8.33%;}
.span-30 {width: 30%}
.span-70 {width: 70%}
.span-80 {width: 80%}
/* 640 Video with side column */
.span-640 {width: 64%}
.span-360 {width: 36%}
</style>
Our grid system is a 12-grid percentage based layout that spans the full 100% of its container. We have an .inner class that limits the width to 1024px if needed in the layout.
Span 2
Span 2
<div class="row">
<div class="span-2"></div>
<div class="span-2"></div>
</div>