Skip to content
Browse files

Base Major Update

- Updated all em to rem for less confusion (with px size fallbacks for
older browsers)
- Removed menu functionality from base default.js file and moved into
docs js file
- Removed stripped and bordered options for tables (kept it more
minimal)
- Updated documentation and examples
  • Loading branch information...
1 parent 1537e20 commit f2ac01084d33f2939c5cf55ee41437576a0ecc19 Matthew Hartman committed Jan 12, 2013
Showing with 139 additions and 292 deletions.
  1. +18 −111 docs/base-css.html
  2. +1 −0 docs/grid-layout.html
  3. +1 −0 docs/index.html
  4. +26 −0 docs/javascripts/docs.js
  5. +1 −1 index.html
  6. +2 −43 javascripts/default.js
  7. +4 −2 less/docs.less
  8. +17 −1 less/mixins.less
  9. +32 −74 less/style.less
  10. +37 −60 style.css
View
129 docs/base-css.html
@@ -31,7 +31,9 @@
<hr>
<h2>Body and Typography</h2>
- <p>Base has a global default font size of 14px and a line-height of 22px (which is converted into em's for scalability and accessibility). This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, (paragraphs) receive a bottom margin of half their line-height (11px by default).</p>
+ <p>Base has a global default font size of 14px and a line-height of 22px (which is converted into <code>rem</code> units for scalability and accessibility). This is applied to the <code>&lt;body&gt;</code> and all paragraphs. In addition, (paragraphs) receive a bottom margin of half their line-height (11px by default).</p>
+
+ <p class="alert"><strong>NOTE:</strong> rem units are not supported in some browser, so a px fallback has been provided.</p>
<hr>
@@ -71,108 +73,9 @@
<hr>
- <h2>Tables</h2>
+ <h2>Table</h2>
<table>
- <caption>Default Table (this is the table caption)</caption>
- <thead>
- <tr>
- <th>Table Heading 1</th>
- <th>Table Heading 2</th>
- <th>Table Heading 3</th>
- <th>Table Heading 4</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="4">Table Footer Details (this is the <code>tfoot</code> of the table)</td>
- </tr>
- </tfoot>
- </table>
-
- <hr>
-
- <table class="bordered">
- <caption>Bordered Table (this is the table caption)</caption>
- <thead>
- <tr>
- <th>Table Heading 1</th>
- <th>Table Heading 2</th>
- <th>Table Heading 3</th>
- <th>Table Heading 4</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="4">Table Footer Details (this is the <code>tfoot</code> of the table)</td>
- </tr>
- </tfoot>
- </table>
-
- <hr>
-
- <table class="striped">
- <caption>Striped Table (this is the table caption)</caption>
- <thead>
- <tr>
- <th>Table Heading 1</th>
- <th>Table Heading 2</th>
- <th>Table Heading 3</th>
- <th>Table Heading 4</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- <tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
- </tr>
- </tbody>
- <tfoot>
- <tr>
- <td colspan="4">Table Footer Details (this is the <code>tfoot</code> of the table)</td>
- </tr>
- </tfoot>
- </table>
-
- <hr>
-
- <table class="striped bordered">
- <caption>Striped + Bordered Table (this is the table caption)</caption>
+ <caption>Table Caption (optional)</caption>
<thead>
<tr>
<th>Table Heading 1</th>
@@ -183,21 +86,24 @@
</thead>
<tbody>
<tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
</tr>
<tr>
- <td>Data Cell One</td>
- <td>Data Cell Two</td>
- <td>Data Cell Three</td>
- <td>Data Cell Four</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
+ <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed.</td>
</tr>
</tbody>
<tfoot>
<tr>
- <td colspan="4">Table Footer Details (this is the <code>tfoot</code> of the table)</td>
+ <td>Table Footer 1</td>
+ <td>Table Footer 2</td>
+ <td>Table Footer 3</td>
+ <td>Table Footer 4</td>
</tr>
</tfoot>
</table>
@@ -220,6 +126,7 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../javascripts/default.js"></script>
+<script src="javascripts/docs.js"></script>
</body>
</html>
View
1 docs/grid-layout.html
@@ -79,6 +79,7 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../javascripts/default.js"></script>
+<script src="javascripts/docs.js"></script>
</body>
</html>
View
1 docs/index.html
@@ -50,6 +50,7 @@
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="../javascripts/default.js"></script>
+<script src="javascripts/docs.js"></script>
</body>
</html>
View
26 docs/javascripts/docs.js
@@ -0,0 +1,26 @@
+$(document).ready(function(){
+ // 2.1 Menu for Mobile Devices
+ // If JS is enabled, attach the 'hide' class (only affects mobiles - special media query class)
+ $('.navigation').prepend('<a href="#" class="nav-toggle nodesktop notablet nomobile">Navigation <span class="arrow">+</span></a>');
+ $(".nav-toggle").removeClass('nomobile').addClass('showmobile');
+ $('.menu').addClass("nomobile");
+
+ // When the navigation button is clicked, toggle menu
+ $(".nav-toggle").click(function() {
+ if ( $('.menu:visible').length < 1 ) {
+ $('.menu').stop(true, true).slideDown(200, function() {
+ $('.nav-toggle .arrow').html('-');
+ $('.nav-toggle').toggleClass('active');
+ $(this).removeClass('nomobile').removeAttr('style');
+ });
+ } else {
+ $('.menu').stop(true, true).slideUp(200, function() {
+ $('.nav-toggle .arrow').html('+');
+ $('.nav-toggle').toggleClass('active');
+ $(this).addClass('nomobile').removeAttr('style');
+ });
+ };
+ return false;
+ });
+
+});
View
2 index.html
@@ -10,7 +10,7 @@
<body>
-<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="javascripts/default.js"></script>
</body>
View
45 javascripts/default.js
@@ -6,27 +6,14 @@
1. Plugins Combined (respond.js)
2. Initiations / Default Functions
2.0 Toggle JS Class
- 2.1 Add Zebra Stripes for Tables
- 2.2 Menu for Mobile Devices
- 2.3 Jump to Anchored Sections
*/
/* ==========================================================
1. Plugins Combined
-
- Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs
*/
-(function(e){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(respond.mediaQueriesSupported){return}var w=e.document,s=w.documentElement,i=[],k=[],q=[],o={},h=30,f=w.getElementsByTagName("head")[0]||s,g=w.getElementsByTagName("base")[0],b=f.getElementsByTagName("link"),d=[],a=function(){var D=b,y=D.length,B=0,A,z,C,x;for(;B<y;B++){A=D[B],z=A.href,C=A.media,x=A.rel&&A.rel.toLowerCase()==="stylesheet";if(!!z&&x&&!o[z]){if(A.styleSheet&&A.styleSheet.rawCssText){m(A.styleSheet.rawCssText,z,C);o[z]=true}else{if((!/^([a-zA-Z:]*\/\/)/.test(z)&&!g)||z.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:z,media:C})}}}}u()},u=function(){if(d.length){var x=d.shift();n(x.href,function(y){m(y,x.href,x.media);o[x.href]=true;u()})}},m=function(I,x,z){var G=I.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),J=G&&G.length||0,x=x.substring(0,x.lastIndexOf("/")),y=function(K){return K.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+x+"$2$3")},A=!J&&z,D=0,C,E,F,B,H;if(x.length){x+="/"}if(A){J=1}for(;D<J;D++){C=0;if(A){E=z;k.push(y(I))}else{E=G[D].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&y(RegExp.$2))}B=E.split(",");H=B.length;for(;C<H;C++){F=B[C];i.push({media:F.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:k.length-1,hasquery:F.indexOf("(")>-1,minw:F.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:F.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}}j()},l,r,v=function(){var z,A=w.createElement("div"),x=w.body,y=false;A.style.cssText="position:absolute;font-size:1em;width:1em";if(!x){x=y=w.createElement("body");x.style.background="none"}x.appendChild(A);s.insertBefore(x,s.firstChild);z=A.offsetWidth;if(y){s.removeChild(x)}else{x.removeChild(A)}z=p=parseFloat(z);return z},p,j=function(I){var x="clientWidth",B=s[x],H=w.compatMode==="CSS1Compat"&&B||w.body[x]||B,D={},G=b[b.length-1],z=(new Date()).getTime();if(I&&l&&z-l<h){clearTimeout(r);r=setTimeout(j,h);return}else{l=z}for(var E in i){var K=i[E],C=K.minw,J=K.maxw,A=C===null,L=J===null,y="em";if(!!C){C=parseFloat(C)*(C.indexOf(y)>-1?(p||v()):1)}if(!!J){J=parseFloat(J)*(J.indexOf(y)>-1?(p||v()):1)}if(!K.hasquery||(!A||!L)&&(A||H>=C)&&(L||H<=J)){if(!D[K.media]){D[K.media]=[]}D[K.media].push(k[K.rules])}}for(var E in q){if(q[E]&&q[E].parentNode===f){f.removeChild(q[E])}}for(var E in D){var M=w.createElement("style"),F=D[E].join("\n");M.type="text/css";M.media=E;f.insertBefore(M,G.nextSibling);if(M.styleSheet){M.styleSheet.cssText=F}else{M.appendChild(w.createTextNode(F))}q.push(M)}},n=function(x,z){var y=c();if(!y){return}y.open("GET",x,true);y.onreadystatechange=function(){if(y.readyState!=4||y.status!=200&&y.status!=304){return}z(y.responseText)};if(y.readyState==4){return}y.send(null)},c=(function(){var x=false;try{x=new XMLHttpRequest()}catch(y){x=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return x}})();a();respond.update=a;function t(){j(true)}if(e.addEventListener){e.addEventListener("resize",t,false)}else{if(e.attachEvent){e.attachEvent("onresize",t)}}})(this);
-// jQuery Color Animations - Copyright 2007 John Resig - Released under the MIT and GPL licenses.
-(function(d){d.each(["backgroundColor","borderBottomColor","borderLeftColor","borderRightColor","borderTopColor","color","outlineColor"],function(f,e){d.fx.step[e]=function(g){if(g.state==0){g.start=c(g.elem,e);
-g.end=b(g.end);}g.elem.style[e]="rgb("+[Math.max(Math.min(parseInt((g.pos*(g.end[0]-g.start[0]))+g.start[0]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[1]-g.start[1]))+g.start[1]),255),0),Math.max(Math.min(parseInt((g.pos*(g.end[2]-g.start[2]))+g.start[2]),255),0)].join(",")+")";
-};});function b(f){var e;if(f&&f.constructor==Array&&f.length==3){return f;}if(e=/rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(f)){return[parseInt(e[1]),parseInt(e[2]),parseInt(e[3])];
-}if(e=/rgb\(\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*,\s*([0-9]+(?:\.[0-9]+)?)\%\s*\)/.exec(f)){return[parseFloat(e[1])*2.55,parseFloat(e[2])*2.55,parseFloat(e[3])*2.55];
-}if(e=/#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(f)){return[parseInt(e[1],16),parseInt(e[2],16),parseInt(e[3],16)];}if(e=/#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/.exec(f)){return[parseInt(e[1]+e[1],16),parseInt(e[2]+e[2],16),parseInt(e[3]+e[3],16)];
-}return a[d.trim(f).toLowerCase()];}function c(g,e){var f;do{f=d.curCSS(g,e);if(f!=""&&f!="transparent"||d.nodeName(g,"body")){break;}e="backgroundColor";
-}while(g=g.parentNode);return b(f);}var a={aqua:[0,255,255],azure:[240,255,255],beige:[245,245,220],black:[0,0,0],blue:[0,0,255],brown:[165,42,42],cyan:[0,255,255],darkblue:[0,0,139],darkcyan:[0,139,139],darkgrey:[169,169,169],darkgreen:[0,100,0],darkkhaki:[189,183,107],darkmagenta:[139,0,139],darkolivegreen:[85,107,47],darkorange:[255,140,0],darkorchid:[153,50,204],darkred:[139,0,0],darksalmon:[233,150,122],darkviolet:[148,0,211],fuchsia:[255,0,255],gold:[255,215,0],green:[0,128,0],indigo:[75,0,130],khaki:[240,230,140],lightblue:[173,216,230],lightcyan:[224,255,255],lightgreen:[144,238,144],lightgrey:[211,211,211],lightpink:[255,182,193],lightyellow:[255,255,224],lime:[0,255,0],magenta:[255,0,255],maroon:[128,0,0],navy:[0,0,128],olive:[128,128,0],orange:[255,165,0],pink:[255,192,203],purple:[128,0,128],violet:[128,0,128],red:[255,0,0],silver:[192,192,192],white:[255,255,255],yellow:[255,255,0]};
-})(jQuery);
+// Respond.js v1.1.0: min/max-width media query polyfill. (c) Scott Jehl. MIT/GPLv2 Lic. j.mp/respondjs
+(function(e){e.respond={};respond.update=function(){};respond.mediaQueriesSupported=e.matchMedia&&e.matchMedia("only all").matches;if(respond.mediaQueriesSupported){return}var w=e.document,s=w.documentElement,i=[],k=[],q=[],o={},h=30,f=w.getElementsByTagName("head")[0]||s,g=w.getElementsByTagName("base")[0],b=f.getElementsByTagName("link"),d=[],a=function(){var D=b,y=D.length,B=0,A,z,C,x;for(;B<y;B++){A=D[B],z=A.href,C=A.media,x=A.rel&&A.rel.toLowerCase()==="stylesheet";if(!!z&&x&&!o[z]){if(A.styleSheet&&A.styleSheet.rawCssText){m(A.styleSheet.rawCssText,z,C);o[z]=true}else{if((!/^([a-zA-Z:]*\/\/)/.test(z)&&!g)||z.replace(RegExp.$1,"").split("/")[0]===e.location.host){d.push({href:z,media:C})}}}}u()},u=function(){if(d.length){var x=d.shift();n(x.href,function(y){m(y,x.href,x.media);o[x.href]=true;u()})}},m=function(I,x,z){var G=I.match(/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi),J=G&&G.length||0,x=x.substring(0,x.lastIndexOf("/")),y=function(K){return K.replace(/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,"$1"+x+"$2$3")},A=!J&&z,D=0,C,E,F,B,H;if(x.length){x+="/"}if(A){J=1}for(;D<J;D++){C=0;if(A){E=z;k.push(y(I))}else{E=G[D].match(/@media *([^\{]+)\{([\S\s]+?)$/)&&RegExp.$1;k.push(RegExp.$2&&y(RegExp.$2))}B=E.split(",");H=B.length;for(;C<H;C++){F=B[C];i.push({media:F.split("(")[0].match(/(only\s+)?([a-zA-Z]+)\s?/)&&RegExp.$2||"all",rules:k.length-1,hasquery:F.indexOf("(")>-1,minw:F.match(/\(min\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:F.match(/\(max\-width:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}}j()},l,r,v=function(){var z,A=w.createElement("div"),x=w.body,y=false;A.style.cssText="position:absolute;font-size:1em;width:1em";if(!x){x=y=w.createElement("body");x.style.background="none"}x.appendChild(A);s.insertBefore(x,s.firstChild);z=A.offsetWidth;if(y){s.removeChild(x)}else{x.removeChild(A)}z=p=parseFloat(z);return z},p,j=function(I){var x="clientWidth",B=s[x],H=w.compatMode==="CSS1Compat"&&B||w.body[x]||B,D={},G=b[b.length-1],z=(new Date()).getTime();if(I&&l&&z-l<h){clearTimeout(r);r=setTimeout(j,h);return}else{l=z}for(var E in i){var K=i[E],C=K.minw,J=K.maxw,A=C===null,L=J===null,y="em";if(!!C){C=parseFloat(C)*(C.indexOf(y)>-1?(p||v()):1)}if(!!J){J=parseFloat(J)*(J.indexOf(y)>-1?(p||v()):1)}if(!K.hasquery||(!A||!L)&&(A||H>=C)&&(L||H<=J)){if(!D[K.media]){D[K.media]=[]}D[K.media].push(k[K.rules])}}for(var E in q){if(q[E]&&q[E].parentNode===f){f.removeChild(q[E])}}for(var E in D){var M=w.createElement("style"),F=D[E].join("\n");M.type="text/css";M.media=E;f.insertBefore(M,G.nextSibling);if(M.styleSheet){M.styleSheet.cssText=F}else{M.appendChild(w.createTextNode(F))}q.push(M)}},n=function(x,z){var y=c();if(!y){return}y.open("GET",x,true);y.onreadystatechange=function(){if(y.readyState!=4||y.status!=200&&y.status!=304){return}z(y.responseText)};if(y.readyState==4){return}y.send(null)},c=(function(){var x=false;try{x=new XMLHttpRequest()}catch(y){x=new ActiveXObject("Microsoft.XMLHTTP")}return function(){return x}})();a();respond.update=a;function t(){j(true)}if(e.addEventListener){e.addEventListener("resize",t,false)}else{if(e.attachEvent){e.attachEvent("onresize",t)}}})(this);
/* ==========================================================
@@ -38,34 +25,6 @@ $(document).ready(function(){
// 2.0 Toggle JS Class
$("html").removeClass('no-js').addClass('js');
- // 2.1 Add Zebra Stripes for Tables
- $('table tbody tr:odd').addClass('odd');
-
- // 2.2 Menu for Mobile Devices
- // If JS is enabled, attach the 'hide' class (only affects mobiles - special media query class)
- $('.navigation').prepend('<a href="#" class="nav-toggle nodesktop notablet nomobile">Navigation <span class="arrow">+</span></a>');
- $(".nav-toggle").removeClass('nomobile').addClass('showmobile');
- $('.menu').addClass("nomobile");
-
- // When the navigation button is clicked, toggle menu
- $(".nav-toggle").click(function() {
- if ( $('.menu:visible').length < 1 ) {
- $('.menu').stop(true, true).slideDown(200, function() {
- $('.nav-toggle .arrow').html('-');
- $('.nav-toggle').toggleClass('active');
- $(this).removeClass('nomobile').removeAttr('style');
- });
- } else {
- $('.menu').stop(true, true).slideUp(200, function() {
- $('.nav-toggle .arrow').html('+');
- $('.nav-toggle').toggleClass('active');
- $(this).addClass('nomobile').removeAttr('style');
- });
- };
- return false;
- });
-
-
// Other initiations go here within the document ready...
View
6 less/docs.less
@@ -3,11 +3,13 @@
.header {
background-color: #d6511d;
margin-bottom: 10px;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
.logo {
margin: 14px 0 0 0;
color: #fff;
- font-size: 2em;
+ .font-size(32);
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
@@ -100,7 +102,7 @@
@media only screen and (max-width: 719px) {
.header {
- padding-top: 10px;
+ padding-bottom: 0;
text-align: center;
.container {
padding: 0;
View
18 less/mixins.less
@@ -22,8 +22,24 @@
}
}
+// Font Sizes (REMs with PX fallback for older browsers)
+.font-size (@sizeValue) {
+ @remValue: @sizeValue / 16;
+ @pxValue: (@sizeValue);
+ font-size: ~"@{pxValue}px";
+ font-size: ~"@{remValue}rem";
+}
+
+// Line Height Sizes (REMs with PX fallback for older browsers)
+.line-height (@sizeValue) {
+ @remValue: @sizeValue / 16;
+ @pxValue: (@sizeValue);
+ line-height: ~"@{pxValue}px";
+ line-height: ~"@{remValue}rem";
+}
+
// Border Rounded Corners
-.roundedcorners(@radius: 1px) {
+.roundedcorners (@radius: 1px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
View
106 less/style.less
@@ -2,7 +2,7 @@
Base Stylesheet - http://matthewhartman.github.com/base/
Author: Matthew Hartman - http://www.matthewhartman.com.au/
- Version: 1.2 - Last Updated: 5th January, 2013
+ Version: 1.2 - Last Updated: 12th January, 2013
========================================================================== */
@@ -18,29 +18,14 @@
@fontSize: 14; // default font size
@lineHeight: 22; // default line height size
-
- @baseFontSize: @fontSize / 16 * 1em; // calculate the font size in em
- @baseLineHeight: @lineHeight / @fontSize * 1em; // calculate the line height size in em
-
- @12px: 12 / @fontSize * 1em; // calculate 12px in em
- @13px: 13 / @fontSize * 1em; // calculate 13px in em
- @14px: 14 / @fontSize * 1em; // calculate 14px in em
- @16px: 16 / @fontSize * 1em; // calculate 16px in em
- @18px: 18 / @fontSize * 1em; // calculate 18px in em
- @20px: 20 / @fontSize * 1em; // calculate 20px in em
- @22px: 22 / @fontSize * 1em; // calculate 22px in em
- @26px: 26 / @fontSize * 1em; // calculate 26px in em
- @28px: 28 / @fontSize * 1em; // calculate 28px in em
- @32px: 32 / @fontSize * 1em; // calculate 32px in em
- @40px: 40 / @fontSize * 1em; // calculate 40px in em
// Setup Headings
@headingFont: arial, helvetica, clean, sans-serif;
- @h1: @40px;
- @h2: @32px;
- @h3: @26px;
- @h4: @20px;
+ @h1: 40;
+ @h2: 32;
+ @h3: 26;
+ @h4: 20;
// Setup Colours
@@ -61,6 +46,8 @@
@lighterBlue: #cfe6f8;
@lightestBlue: #e7f2fb;
+ @lightestYellow: #ffc;
+
@orange: #f30;
@midOrange: #c34119;
@lightOrange: #ffc9b3;
@@ -89,7 +76,11 @@ form, fieldset, a img { border: 0; }
.left { float: left; }
.right { float: right; }
.block { display: block; }
-.inline-block { display: inline-block; *zoom: 1; *display: inline; }
+.inline-block {
+ display: inline-block;
+ *zoom: 1;
+ *display: inline;
+}
.inline { display: inline; }
.visuallyhidden {
border: 0;
@@ -114,6 +105,13 @@ form, fieldset, a img { border: 0; }
font-weight: bold;
}
+.alert {
+ background-color: @lightestYellow;
+ .block();
+ padding: 4px 8px;
+ .roundedcorners(3px);
+}
+
.nolist { list-style: none; }
.nopadding { padding: 0; }
.nomargin { margin: 0; }
@@ -129,8 +127,8 @@ form, fieldset, a img { border: 0; }
/* Body */
body {
font-family: @baseFont;
- font-size: @baseFontSize;
- line-height: @baseLineHeight;
+ .font-size(@fontSize);
+ .line-height(@lineHeight);
background-color: @white;
color: @darkestGrey;
margin: 0;
@@ -165,30 +163,30 @@ h6 {
line-height: normal;
}
h1, .h1 {
- font-size: @h1;
+ .font-size(@h1);
margin-bottom: 10px;
}
h2, .h2 {
- font-size: @h2;
+ .font-size(@h2);
margin-bottom: 8px;
}
h3, .h3 {
- font-size: @h3;
+ .font-size(@h3);
margin-bottom: 6px;
}
h4, .h4 {
- font-size: @h4;
+ .font-size(@h4);
margin-bottom: 4px;
}
/* 1.2 Paragraphs, block quotes, code, pre, etc
========================================================================== */
p {
- margin-bottom: @baseLineHeight / 2;
+ //margin-bottom: @baseLineHeight / 2;
}
small {
- font-size: 67.5%;
+ .font-size(12);
}
/* Block Quotes, Pre and Code Blocks */
@@ -205,13 +203,13 @@ q {
code,
pre {
- padding: 2px 4px;
+ padding: 2px 6px;
font-family: @codeFont;
- font-size: @12px;
- background-color: #f7f7f9;
- border: 1px solid #e1e1e8;
+ .font-size(12);
+ background-color: @lightestGrey;
+ border: 1px solid @lightGrey;
line-height: normal;
- color: @orange;
+ color: @darkestGrey;
.roundedcorners(3px);
}
@@ -248,14 +246,6 @@ table thead th {
background-color: @white;
color: @darkestGrey;
}
-table caption + thead tr:first-child th,
-table caption + thead tr:first-child td,
-table colgroup + thead tr:first-child th,
-table colgroup + thead tr:first-child td,
-table thead:first-child tr:first-child th,
-table thead:first-child tr:first-child td {
- border-top: 0;
-}
@@ -272,38 +262,6 @@ table caption {
font-weight: bold;
}
-/* Bordered Table */
-.bordered { border: 1px solid @lightGrey }
-.bordered caption {
- margin-right: -1px;
- border-top: 1px solid #cccccc;
- border-left: 1px solid #cccccc;
- border-right: 1px solid #cccccc;
-}
-.bordered thead th { border-left: 1px solid @lightGrey }
-.bordered th,
-.bordered td {
- border-top: 1px solid @lightGrey;
- border-left: 1px solid @lightGrey;
-}
-
-/* Stripped Table */
-.striped tbody .odd td,
-.striped tbody .odd td {
- background-color: #f1f1f1;
-}
-.striped tbody tr:nth-child(odd) td,
-.striped tbody tr:nth-child(odd) th {
- background-color: #f1f1f1;
-}
-.striped tbody tr:nth-child(even) td,
-.striped tbody tr:nth-child(even) th {
- background-color: @white;
-}
-.striped tfoot {
- background-color: @lighterGrey;
-}
-
/* 1.4 Lists
========================================================================== */
ul, ul ul {
View
97 style.css
@@ -2,7 +2,7 @@
Base Stylesheet - http://matthewhartman.github.com/base/
Author: Matthew Hartman - http://www.matthewhartman.com.au/
- Version: 1.2 - Last Updated: 5th January, 2013
+ Version: 1.2 - Last Updated: 12th January, 2013
========================================================================== */
/* ==========================================================================
@@ -87,6 +87,17 @@ a img {
.strong {
font-weight: bold;
}
+.alert {
+ background-color: #ffffcc;
+ display: block;
+ padding: 4px 8px;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+ -moz-background-clip: padding;
+ -webkit-background-clip: padding-box;
+ background-clip: padding-box;
+}
.nolist {
list-style: none;
}
@@ -106,8 +117,10 @@ a img {
/* Body */
body {
font-family: arial, helvetica, clean, sans-serif;
- font-size: 0.875em;
- line-height: 1.5714285714285714em;
+ font-size: 14px;
+ font-size: 0.875rem;
+ line-height: 22px;
+ line-height: 1.375rem;
background-color: #ffffff;
color: #222222;
margin: 0;
@@ -141,31 +154,33 @@ h6 {
}
h1,
.h1 {
- font-size: 2.857142857142857em;
+ font-size: 40px;
+ font-size: 2.5rem;
margin-bottom: 10px;
}
h2,
.h2 {
- font-size: 2.2857142857142856em;
+ font-size: 32px;
+ font-size: 2rem;
margin-bottom: 8px;
}
h3,
.h3 {
- font-size: 1.8571428571428572em;
+ font-size: 26px;
+ font-size: 1.625rem;
margin-bottom: 6px;
}
h4,
.h4 {
- font-size: 1.4285714285714286em;
+ font-size: 20px;
+ font-size: 1.25rem;
margin-bottom: 4px;
}
/* 1.2 Paragraphs, block quotes, code, pre, etc
========================================================================== */
-p {
- margin-bottom: 0.7857142857142857em;
-}
small {
- font-size: 67.5%;
+ font-size: 12px;
+ font-size: 0.75rem;
}
/* Block Quotes, Pre and Code Blocks */
blockquote,
@@ -185,13 +200,14 @@ q {
}
code,
pre {
- padding: 2px 4px;
+ padding: 2px 6px;
font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
- font-size: 0.8571428571428571em;
- background-color: #f7f7f9;
- border: 1px solid #e1e1e8;
+ font-size: 12px;
+ font-size: 0.75rem;
+ background-color: #f1f1f1;
+ border: 1px solid #dddddd;
line-height: normal;
- color: #ff3300;
+ color: #222222;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
@@ -231,14 +247,6 @@ table thead th {
background-color: #ffffff;
color: #222222;
}
-table caption + thead tr:first-child th,
-table caption + thead tr:first-child td,
-table colgroup + thead tr:first-child th,
-table colgroup + thead tr:first-child td,
-table thead:first-child tr:first-child th,
-table thead:first-child tr:first-child td {
- border-top: 0;
-}
table tfoot td {
font-weight: bold;
}
@@ -249,40 +257,6 @@ table caption {
border-bottom: 0;
font-weight: bold;
}
-/* Bordered Table */
-.bordered {
- border: 1px solid #dddddd;
-}
-.bordered caption {
- margin-right: -1px;
- border-top: 1px solid #cccccc;
- border-left: 1px solid #cccccc;
- border-right: 1px solid #cccccc;
-}
-.bordered thead th {
- border-left: 1px solid #dddddd;
-}
-.bordered th,
-.bordered td {
- border-top: 1px solid #dddddd;
- border-left: 1px solid #dddddd;
-}
-/* Stripped Table */
-.striped tbody .odd td,
-.striped tbody .odd td {
- background-color: #f1f1f1;
-}
-.striped tbody tr:nth-child(odd) td,
-.striped tbody tr:nth-child(odd) th {
- background-color: #f1f1f1;
-}
-.striped tbody tr:nth-child(even) td,
-.striped tbody tr:nth-child(even) th {
- background-color: #ffffff;
-}
-.striped tfoot {
- background-color: #eeeeee;
-}
/* 1.4 Lists
========================================================================== */
ul,
@@ -446,11 +420,14 @@ ol ol {
.header {
background-color: #d6511d;
margin-bottom: 10px;
+ padding-top: 10px;
+ padding-bottom: 10px;
}
.logo {
margin: 14px 0 0 0;
color: #fff;
- font-size: 2em;
+ font-size: 32px;
+ font-size: 2rem;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
@@ -514,7 +491,7 @@ ol ol {
}
@media only screen and (max-width: 719px) {
.header {
- padding-top: 10px;
+ padding-bottom: 0;
text-align: center;
}
.header .container {

0 comments on commit f2ac010

Please sign in to comment.
Something went wrong with that request. Please try again.