Skip to content

Commit

Permalink
Updated Base - Version 1.1
Browse files Browse the repository at this point in the history
- Updated Bulk Styling
- Added respond.min.js with Modernizr pollyfills (IE6 - IE8 css media
query support)
- Updated CSS Reset
- Cleaned up classes
  • Loading branch information
Matthew Hartman committed Jan 29, 2012
1 parent bd41e6f commit 1c8b099
Show file tree
Hide file tree
Showing 6 changed files with 145 additions and 210 deletions.
121 changes: 121 additions & 0 deletions base.css
@@ -0,0 +1,121 @@
/*
Base Stylesheet - Copyright 2011 - 2012
Author - Matthew Hartman (www.matthewhartman.com.au)
Version - 1.1 (Last Update: 29th January, 2012)
*/

/* Global Resets */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin: 0; padding: 0; border: 0; outline: 0; vertical-align: baseline;}

/* HTML5 Block Elements */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, .header, .footer, .menu, .nav, .section, .block {display: block;}

/* General Resets */
ol, ul {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after, q:before, q:after {content: '';}
hr {border: 0; background: none; outline: 0;}
table {border-collapse: collapse; border-spacing: 0;}

/* Consistent Font Family on Form Elements */
button, input, select, textarea {font-family: sans-serif;}

html {font-size: 100%;}
body {font: normal 81.3%/1.231 arial, helvetica, clean, sans-serif; background: #fff; color: #000; min-width: 320px;}

/* Headings */
h1, h2, h3, h4, h5, h6 {font-family: "Georgia", "Times New Roman", Helvetica, Arial, sans-serif;}
h1 {font-size: 3.538em; margin-bottom: 10px;}
h2 {font-size: 2.769em; margin-bottom: 8px;}
h3 {font-size: 2em; margin-bottom: 6px;}
h4 {font-size: 1.692em; margin-bottom: 4px;}
h5 {font-size: 1.384em; margin-bottom: 2px;}
h6 {font-size: 1.076em;}

/* Content Elements */
p {}

/* Content Links */
a {color: #c00;}
a:hover {text-decoration: none;}
a:visited {color: #000;}
a:active {margin-top: 3px;}

/* Tables */
table {}
thead {}
th {}

tbody {}
tr {}
td {}

/* Sections and Columns */
.section {min-width: 280px; max-width: 960px; margin: 0 auto; padding: 0 20px; overflow: hidden;}
.content-block {position: relative; display: table-cell; float: none;}
.col {margin-left: 4.166666666667%; /* this percent is approximately a 40px from a 960px grid */}
.col:first-child {margin-left: 0; margin-right: 4.166666666667%}

.one {width: 8.333333333333%; /* this percent is approximately 80px from a 960px grid */}
.two {width: 16.666666666667%; /* this percent is approximately 160px from a 960px grid */}
.three {width: 25%; /* this percent is approximately 240px from a 960px grid */}
.four {width: 33.333333333333%; /* this percent is approximately 320px from a 960px grid */}
.five {width: 41.666666666667%; /* this percent is approximately 400px from a 960px grid */}
.six {width: 50%; /* this percent is approximately 480px from a 960px grid */}
.seven {width: 58.333333333333%; /* this percent is approximately 560px from a 960px grid */}
.eight {width: 66.666666666667%; /* this percent is approximately 640px from a 960px grid */}
.nine {width: 75%; /* this percent is approximately 720px from a 960px grid */}
.ten {width: 83.333333333333%; /* this percent is approximately 800px from a 960px grid */}
.eleven {width: 91.666666666667%; /* this percent is approximately 880px from a 960px grid */}
.twelve {width: 100%; /* this percent is approximately 960px from a 960px grid */}

/* Tablet Layout */
@media only screen and (min-width: 700px) and (max-width: 959px) {
html body, html .body {max-width: 959px; padding: 0; margin: 0;}
html .notablet {display: none;}
}


/* Mobile Layout */
@media only screen and (min-width: 320px) and (max-width: 699px) {
html body, html .body {max-width: 100%; padding: 0; margin: 0;}

.one, .two, .three, .four, .five, .six, .seven, .eight, .nine, .ten, .eleven, .twelve {width: 100%;}
.col {margin-right: 0;}

html .col, html .left, html .right {float: none;}
html .col.right {margin-left: 0;}
html .content {display: block; width: 100%;}

html .nophone {display: none;}
}

/* Print Stylesheet */
@media print {
body {margin: 0.5cm;}
.body * {position: static; float: none; }
html .accessibility {display: none;}
}

/* Accessibility (For Screen Readers) */
.accessibility li {float: left; width: 100%;}
.offscreen.focusable:active,
.offscreen.focusable:focus {height: auto; overflow: visible; position: static; width: 100%; text-indent: 0px; display: block; background: #000; color: #fff; text-decoration: none; outline: 0;}

/* General Classes */
.left, .col {float: left;}
.right {float: right;}
.offscreen {text-align: -9999em; position: absolute; overflow: hidden; width: 1px; height: 1%;}
.none {display: none; visibility: hidden;}
.padding-ten {padding: 10px;}
.padding-twenty {padding: 20px;}
.padding-thirty {padding: 30px;}

/* Nicolas Gallagher's Micro Clearfix */
.clear:before, .clear:after {content:""; display:table;}
.clear:after {clear:both;} .clear, .content-block {zoom:1;}

/* Begin Remove of Additional Styling (for Demo Purposes) */
html .content-block {background: #eee;} html .col {background: #ccc;}
/* End Remove of Additionl Styling (for Demo Purposes) */
26 changes: 13 additions & 13 deletions index.html
Expand Up @@ -6,33 +6,33 @@
<title>Base</title>
<meta name="description" content="Base — A rock solid base template for web apps and prototyping" />
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" media="screen" href="style.css" >
<script src="modernizr.js"></script>
<link rel="stylesheet" media="screen" href="base.css" >
<script src="respond.min.js"></script>
</head>
<body>
<ul class="accessibility">
<ul class="accessibility clear">
<li><a tabindex="1" href="#nav" class="offscreen focusable">Skip to navigation</a></li>
<li><a tabindex="2" href="#content" class="offscreen focusable">Skip to content</a></li>
<li><a tabindex="3" href="http://www.w3.org/WAI/" class="offscreen focusable">Read about accessibility</a></li>
</ul>
<div class="body">
<div class="section">
<h1>Welcome to Base!</h1>
<div class="col one push-one"><p>col one with push one</p></div>
<div class="content flexible"><p>content content content content content content content content content content content content content content content content content content content content</p></div>
<div class="section">
<div class="col one"><p>col one</p></div>
<div class="content-block"><p>content content content content content content content content content content content content content content content content content content content content</p></div>
</div>
<div class="section">
<div class="col two push-two"><p>col two with push two</p></div>
<div class="content flexible"><p>content content content content content content content content content content content content content content content content content content content</p></div>
<div class="col two"><p>col two</p></div>
<div class="content-block"><p>content content content content content content content content content content content content content content content content content content content</p></div>
</div>
<div class="section">
<div class="col three push-three"><p>col three with push three</p></div>
<div class="content flexible"><p>content content content content content content content content content content content content content content content content content</p></div>
<div class="col three"><p>col three</p></div>
<div class="content-block"><p>content content content content content content content content content content content content content content content content content</p></div>
</div>
<div class="section">
<div class="col four push-four"><p>col four with push four</p></div>
<div class="col right four pull-four"><p>col four with pull four</p></div>
<div class="content flexible"><p>content content content content content content content content content content content content content content</p></div>
<div class="col four"><p>col four</p></div>
<div class="col right four"><p>col four</p></div>
<div class="content-block"><p>content content content content content content content content content content content content content content</p></div>
</div>
</div>
</body>
Expand Down
4 changes: 0 additions & 4 deletions modernizr.js

This file was deleted.

9 changes: 5 additions & 4 deletions readme
Expand Up @@ -3,7 +3,7 @@ Welcome to Base

Base is a super simple, responsive framework designed to work for mobile devices, tablets, netbooks and desktop computers. It's built with accessibility in mind and uses minimal javascript for maximum awesomeness.

It includes a 12-column grid with some base styles for headings, links, tables, block quotes and much more.
It includes a 12-column grid with some basic styles for headings, links, tables, block quotes and much more.

Feel free to clone the repo, give feedback on twitter (@hartmanmatthew) and most importantly, enjoy using Base for your web projects!

Expand All @@ -13,14 +13,15 @@ Repo Contents

· readme
· index.html - An example page with Base in action
· style.css - Core Stylesheet for Base
· modernizr.js - Feature detect HTML5 and CSS3 Features
· base.css - Core Stylesheet for Base
· respond.min.js - A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

Base was built by Matthew Hartman (@hartmanmatthew), a passionate front end developer based in Melbourne, Australia.

Thank You / Credits
===================
· Faruk Ateş, Paul Irish & Alex Sexton (@modernizr) for Modernizr
· Scott Jehl, Paul Irish, Nicholas Zakas (@modernizr) for Modernizr
· Scott Jehl for respond.js script
· Nicolas Gallagher (@necolas) for Micro ClearFix


Expand Down
6 changes: 6 additions & 0 deletions respond.min.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 1c8b099

Please sign in to comment.