New grids
This commit is contained in:
Mike Francis
parent
9f029ec70d
commit
d35602d079
|
|
@ -21,9 +21,9 @@ $list-margin-left: 24;
|
|||
|
||||
// Scaffolding
|
||||
|
||||
$column-gutter: 20;
|
||||
$column-count: 12;
|
||||
$container-max-width: 1200;
|
||||
$container-max-width: 960;
|
||||
$column-count: 12;
|
||||
$column-gutter: 20;
|
||||
|
||||
// Tables
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,15 @@
|
|||
@mixin breakpoint($point) {
|
||||
@if $point == desktop {
|
||||
@media screen and (min-width: 1200px) { @content; }
|
||||
}
|
||||
@else if $point == tablet-landscape {
|
||||
@media screen and (min-width: 1024px) { @content; }
|
||||
@if $point == mobile {
|
||||
@media screen and (max-width: 640px) { @content; }
|
||||
}
|
||||
@else if $point == tablet-portrait {
|
||||
@media screen and (min-width: 768px) { @content; }
|
||||
@media screen and (max-width: 768px) { @content; }
|
||||
}
|
||||
@else if $point == tablet-landscape {
|
||||
@media screen and (max-width: 1024px) { @content; }
|
||||
}
|
||||
@else if $point == desktop {
|
||||
@media screen and (max-width: 1200px) { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -17,10 +20,6 @@
|
|||
border-radius: $radius;
|
||||
}
|
||||
|
||||
@mixin col-width ($span: 1) {
|
||||
width: ((100 / $column-count) * $span) - ($column-gutter / $container-max-width) * 100%;
|
||||
}
|
||||
|
||||
@mixin box-sizing ($box-model: 'border-box') {
|
||||
-webkit-box-sizing: $box-model;
|
||||
-moz-box-sizing: $box-model;
|
||||
|
|
|
|||
|
|
@ -3,34 +3,11 @@
|
|||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav > li, .nav > li > a {
|
||||
.nav > li {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
border: solid 1px #ddd;
|
||||
@include border-radius();
|
||||
@include box-shadow();
|
||||
}
|
||||
|
||||
.nav-list > li, .nav-list > li > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-list > li {
|
||||
border-bottom: solid 1px #ddd;
|
||||
}
|
||||
|
||||
.nav-list > li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav-list > li > a {
|
||||
padding: 10px;
|
||||
@include transition();
|
||||
}
|
||||
|
||||
.nav-list > li > a:hover {
|
||||
background-color: #fafafa;
|
||||
.nav > li > a {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -1,29 +1,51 @@
|
|||
.container {
|
||||
padding: 0 ($column-gutter * 2) * 1px;
|
||||
max-width: $container-max-width * 1px;
|
||||
margin: 0 auto;
|
||||
@extend .clearfix;
|
||||
margin: 0 auto;
|
||||
max-width: ($container-max-width - $column-gutter) * 1px;
|
||||
padding: 0 20px;
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
@extend .clearfix;
|
||||
}
|
||||
|
||||
.row {
|
||||
@include breakpoint(tablet-portrait) { margin-left: -($column-gutter / $container-max-width) * 100%; }
|
||||
@extend .clearfix;
|
||||
margin-left: -($column-gutter / $container-max-width) * 100%;
|
||||
_overflow: hidden;
|
||||
@extend .clearfix;
|
||||
@include breakpoint(mobile) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
@include breakpoint(tablet-portrait) {
|
||||
float: left;
|
||||
margin-left: ($column-gutter / $container-max-width) * 100%;
|
||||
}
|
||||
.column {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-left: ($column-gutter / $container-max-width) * 100%;
|
||||
vertical-align: top;
|
||||
@include breakpoint(mobile) {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
@for $i from 1 through $column-count {
|
||||
.col#{$i} {
|
||||
@include breakpoint(tablet-portrait) {
|
||||
@include col-width($i);
|
||||
}
|
||||
}
|
||||
.column-span-#{$i} {
|
||||
width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) * 1%;
|
||||
*width: (((100 / $column-count) * $i) - (($column-gutter / $container-max-width) * 100)) - .02 * 1%;
|
||||
}
|
||||
}
|
||||
|
||||
.row-no-gutters .column {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
@for $i from 1 through $column-count {
|
||||
.row-no-gutters .column-span-#{$i} {
|
||||
width: ((100 / $column-count) * $i) * 1%;
|
||||
*width: ((100 / $column-count) * $i) - .02 * 1%;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,7 +17,7 @@ Author: Mike Francis
|
|||
|
||||
// Objects
|
||||
|
||||
@import 'objects/forms';
|
||||
@import 'objects/scaffolding';
|
||||
@import 'objects/nav';
|
||||
@import 'objects/tables';
|
||||
@import 'objects/forms';
|
||||
@import 'objects/tables';
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
<html <?php language_attributes(); ?>>
|
||||
<head>
|
||||
<meta charset="<?php bloginfo( 'charset' ); ?>" />
|
||||
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0" />
|
||||
<meta name="HandheldFriendly" content="true" />
|
||||
<title><?php wp_title( ' – ', true, 'right' ); bloginfo( 'name' ); ?></title>
|
||||
<link rel="stylesheet" href="<?php bloginfo( 'stylesheet_url' ); ?>" />
|
||||
|
|
|
|||
363
style.css
363
style.css
|
|
@ -115,179 +115,17 @@ img.alignright {
|
|||
margin-right: auto;
|
||||
}
|
||||
|
||||
.clearfix, .container, .row, .controls {
|
||||
.clearfix, .controls, .container, .container-fluid, .row {
|
||||
*zoom: 1;
|
||||
}
|
||||
.clearfix:before, .container:before, .row:before, .controls:before, .clearfix:after, .container:after, .row:after, .controls:after {
|
||||
.clearfix:before, .controls:before, .container:before, .container-fluid:before, .row:before, .clearfix:after, .controls:after, .container:after, .container-fluid:after, .row:after {
|
||||
content: " ";
|
||||
display: table;
|
||||
}
|
||||
.clearfix:after, .container:after, .row:after, .controls:after {
|
||||
.clearfix:after, .controls:after, .container:after, .container-fluid:after, .row:after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 40px;
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.row {
|
||||
margin-left: -1.66667%;
|
||||
}
|
||||
}
|
||||
|
||||
.col {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
}
|
||||
@media (min-width: 768px) {
|
||||
.col {
|
||||
float: left;
|
||||
margin-left: 1.66667%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col1 {
|
||||
width: 6.66667%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col2 {
|
||||
width: 15.0%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col3 {
|
||||
width: 23.33333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col4 {
|
||||
width: 31.66667%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col5 {
|
||||
width: 40.0%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col6 {
|
||||
width: 48.33333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col7 {
|
||||
width: 56.66667%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col8 {
|
||||
width: 65%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col9 {
|
||||
width: 73.33333%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col10 {
|
||||
width: 81.66667%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col11 {
|
||||
width: 90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.col12 {
|
||||
width: 98.33333%;
|
||||
}
|
||||
}
|
||||
|
||||
.nav {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav > li, .nav > li > a {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
.nav-list {
|
||||
border: solid 1px #dddddd;
|
||||
-webkit-border-radius: 5px;
|
||||
-moz-border-radius: 5px;
|
||||
-o-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
-webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
|
||||
-moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-list > li, .nav-list > li > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.nav-list > li {
|
||||
border-bottom: solid 1px #dddddd;
|
||||
}
|
||||
|
||||
.nav-list > li:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.nav-list > li > a {
|
||||
padding: 10px;
|
||||
-webkit-transition: all 0.2s ease-out;
|
||||
-moz-transition: all 0.2s ease-out;
|
||||
transition: all 0.2s ease-out;
|
||||
}
|
||||
|
||||
.nav-list > li > a:hover {
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #dddddd;
|
||||
padding: 10.5px 10px;
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-weight: bold;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
input, select, textarea, button {
|
||||
display: inline-block;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
|
|
@ -343,3 +181,198 @@ input, select, textarea, button {
|
|||
background-image: -moz-linear-gradient(#eeeeee, white);
|
||||
background-image: -o-linear-gradient(#eeeeee, white);
|
||||
}
|
||||
|
||||
.container {
|
||||
margin: 0 auto;
|
||||
max-width: 940px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-left: -2.08333%;
|
||||
_overflow: hidden;
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.row {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.column {
|
||||
display: inline;
|
||||
float: left;
|
||||
margin-left: 2.08333%;
|
||||
vertical-align: top;
|
||||
}
|
||||
@media screen and (max-width: 640px) {
|
||||
.column {
|
||||
display: block;
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
width: auto !important;
|
||||
}
|
||||
}
|
||||
|
||||
.column-span-1 {
|
||||
width: 6.25%;
|
||||
*width: 6.23%;
|
||||
}
|
||||
|
||||
.column-span-2 {
|
||||
width: 14.58333%;
|
||||
*width: 14.56333%;
|
||||
}
|
||||
|
||||
.column-span-3 {
|
||||
width: 22.91667%;
|
||||
*width: 22.89667%;
|
||||
}
|
||||
|
||||
.column-span-4 {
|
||||
width: 31.25%;
|
||||
*width: 31.23%;
|
||||
}
|
||||
|
||||
.column-span-5 {
|
||||
width: 39.58333%;
|
||||
*width: 39.56333%;
|
||||
}
|
||||
|
||||
.column-span-6 {
|
||||
width: 47.91667%;
|
||||
*width: 47.89667%;
|
||||
}
|
||||
|
||||
.column-span-7 {
|
||||
width: 56.25%;
|
||||
*width: 56.23%;
|
||||
}
|
||||
|
||||
.column-span-8 {
|
||||
width: 64.58333%;
|
||||
*width: 64.56333%;
|
||||
}
|
||||
|
||||
.column-span-9 {
|
||||
width: 72.91667%;
|
||||
*width: 72.89667%;
|
||||
}
|
||||
|
||||
.column-span-10 {
|
||||
width: 81.25%;
|
||||
*width: 81.23%;
|
||||
}
|
||||
|
||||
.column-span-11 {
|
||||
width: 89.58333%;
|
||||
*width: 89.56333%;
|
||||
}
|
||||
|
||||
.column-span-12 {
|
||||
width: 97.91667%;
|
||||
*width: 97.89667%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-1 {
|
||||
width: 8.33333%;
|
||||
*width: 8.31333%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-2 {
|
||||
width: 16.66667%;
|
||||
*width: 16.64667%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-3 {
|
||||
width: 25%;
|
||||
*width: 24.98%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-4 {
|
||||
width: 33.33333%;
|
||||
*width: 33.31333%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-5 {
|
||||
width: 41.66667%;
|
||||
*width: 41.64667%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-6 {
|
||||
width: 50%;
|
||||
*width: 49.98%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-7 {
|
||||
width: 58.33333%;
|
||||
*width: 58.31333%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-8 {
|
||||
width: 66.66667%;
|
||||
*width: 66.64667%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-9 {
|
||||
width: 75%;
|
||||
*width: 74.98%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-10 {
|
||||
width: 83.33333%;
|
||||
*width: 83.31333%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-11 {
|
||||
width: 91.66667%;
|
||||
*width: 91.64667%;
|
||||
}
|
||||
|
||||
.row-no-gutters .column-span-12 {
|
||||
width: 100%;
|
||||
*width: 99.98%;
|
||||
}
|
||||
|
||||
.nav {
|
||||
list-style: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.nav > li {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
}
|
||||
|
||||
.nav > li > a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.table th,
|
||||
.table td {
|
||||
text-align: left;
|
||||
vertical-align: top;
|
||||
border-top: 1px solid #dddddd;
|
||||
padding: 10.5px 10px;
|
||||
}
|
||||
|
||||
.table th {
|
||||
font-weight: bold;
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
.table thead th {
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue