Skip to content

Instantly share code, notes, and snippets.

@magnusbonnevier
Created October 29, 2014 10:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save magnusbonnevier/29cb3fe8d3ee19262296 to your computer and use it in GitHub Desktop.
Save magnusbonnevier/29cb3fe8d3ee19262296 to your computer and use it in GitHub Desktop.
eyeGrid v1.0 - Simple Easy 12 column CSS grid
/*
eyeGrid v1.0 - Simple Easy 12 column CSS grid
based on percentages.
Author: Magnus Bonnevier
www.magnusbonnevier.se
This grids purpose is to be simple and easy to
customize for your own use. A boilerplate.
A base to build on. It´s not ment to be the encompasing solution.
I built it mainly for my own use. Please keep this comment if you
copy and use it. Not required though.
*/
/* a simple reset */
* {
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 0;
margin: 0;
}
/* main fluid container */
[class^='eyeGrid-container-'], .eyeGrid-row {
position: relative;
display: block;
overflow: hidden;
width: 100%;
padding: 0;
margin-top: 0;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
clear: both;
}
/* fixed width containers, centered by default. */
.eyeGrid-container-1140 {
width: 1140px;
}
/* global col settings */
[class^='eyeGrid-col-'] {
position: relative;
display: block;
overflow: hidden;
float: left;
padding: 0;
margin: 0;
}
/* the cols */
.eyeGrid-col-12 {
width: 100%;
}
.eyeGrid-col-11 {
width: 91.66666666666663%;
}
.eyeGrid-col-10 {
width: 83.3333333333333%;
}
.eyeGrid-col-9 {
width: 74.99999999999997%;
}
.eyeGrid-col-8 {
width: 66.66666666666664%;
}
.eyeGrid-col-7 {
width: 58.33333333333331%;
}
.eyeGrid-col-6 {
width: 49.99999999999998%;
}
.eyeGrid-col-5 {
width: 41.66666666666665%;
}
.eyeGrid-col-4 {
width: 33.33333333333332%;
}
.eyeGrid-col-3 {
width: 24.99999999999999%;
}
.eyeGrid-col-2 {
width: 16.66666666666666%;
}
.eyeGrid-col-1 {
width: 8.33333333333333%;
}
/* Below this line is just extras and handy classes */
/* eyeGrid rulers */
[class^='eyeGrid-ruler-'] {
position: relative;
display: block;
overflow: hidden;
padding: 10px;
margin: 0;
background-color: #ccc;
border-top: 1px solid #999;
color: #000;
font-size: 16px;
line-height: 14px;
z-index: 1000;
}
.eyeGrid-ruler-568 {
width: 568px;
}
.eyeGrid-ruler-768 {
width: 768px;
}
.eyeGrid-ruler-940 {
width: 940px;
}
.eyeGrid-ruler-1024 {
width: 1024px;
}
.eyeGrid-ruler-1240 {
width: 1240px;
}
.eyeGrid-ruler-1440 {
width: 1440px;
}
.eyeGrid-ruler-1920 {
width: 1920px;
}
/* eyeGrid content */
.eyeGrid-content-wrap {
position: relative;
display: block;
overflow-y: auto;
width: 100%;
background-color: #fff;
border-right: 1px solid #999;
}
.eyeGrid-content-container {
position: relative;
display: block;
overflow: hidden;
width: 100%;
margin-right: auto;
padding: 35px;
}
/* eyeGrid Sidebar menu */
.eyeGrid-sidebar-container {
position: fixed;
display: block;
overflow-y: auto;
top: 0;
left: 0;
bottom: 0;
width: 300px;
height: 100%;
background-color: #413D3D;
z-index: 500;
}
/* eyeGrid menu headshot */
.eyeGrid-menu-headshot {
position: relative;
display: block;
width: 90%;
height: auto;
margin-top: 15px;
margin-left: auto;
margin-right: auto;
margin-bottom: 15px;
border-radius: 50%;
border: 5px solid rgba(255,255,255, 0.5);
}
/* eyeGrid menu list */
.eyeGrid-menu-list {
position: relative;
display: block;
width: 100%;
margin: 0;
padding: 0;
list-style: inside;
list-style-type: none;
}
.eyeGrid-menu-list li.header {
font-family: 'droid-sans-mono',arial, Verdana, Helvetica, 'sans-serif', open-sans-condensed;
font-size: 16px;
font-weight: bold;
display: inline-block;
color: #fff;
margin-left: 25px;
}
.eyeGrid-menu-list li {
padding: 0;
margin: 0;
display: inline-block;
}
.eyeGrid-menu-list li > a {
font-family: 'droid-sans-mono' ,arial, verdana, 'sans-serif';
font-size: 16px;
display: block;
padding: 10px;
text-decoration: none;
color: #fff;
}
.eyeGrid-menu-list li > a:link {
}
.eyeGrid-menu-list li > a:visited {
}
.eyeGrid-menu-list li > a:hover {
color: #fff;
text-decoration: none;
background-color: #999;
}
.eyeGrid-menu-list li > a:active {
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment