Permalink
Browse files

New project.js executes views based on data attr

Clearfix applied to grid declaration
Linear gradients defined in degrees, sod 'to x'
New 'nameplate' module
  • Loading branch information...
1 parent d0c22d4 commit be5932c4980c8b35e215d343736c7f8842557ab4 @i-like-robots committed Mar 29, 2012
View

Large diffs are not rendered by default.

Oops, something went wrong.
View
@@ -1,6 +1,6 @@
/**
* Author: Matt Hinchliffe <www.maketea.co.uk>
- * Modified: 20/03/2012
+ * Modified: 29/03/2012
*/
/**
* Author: Matt Hinchliffe <www.maketea.co.uk>
@@ -18,8 +18,8 @@ button {
}
/* Select boxes. Padding cannot be applied to a select box so add it to the height */
select {
- height: 27px;
- /* 17px 'normal' line-height + padding */
+ height: 27.2px;
+ /* font size * 'normal' line-height + padding */
}
/* Buttons render terribly due to a forced border-box style layout */
@@ -41,16 +41,10 @@ a.button {
.checkbox input {
vertical-align: bottom;
}
-/* Lists item margin may not be removed from display:list-item */
-ul.base li,
-ol.base li {
- display: block;
-}
/* No pseudo elements so just add extra spacing */
-.separated-list li,
-.tag-list li {
- float: left;
- display: list-item;
+.separated-list li, .tag-list li {
margin-left: 1em;
- list-style-type: disc;
+}
+.tag-list li li:first-child, .separated-list li:first-child {
+ margin-left: 0;
}
File renamed without changes.
File renamed without changes.
View
@@ -1,17 +1,12 @@
/**
* @author Matt Hinchliffe <http://www.maketea.co.uk>
* @created 12/01/2011
- * @modified 22/02/2012
- * @package yourProject
+ * @modified 29/03/2012
+ * @package Your project
*/
-var project = 'yourProject';
-
-// Project namespace and version number
-window[project] = window[project] || { _autoload: [] };
-
// Replace no-js
-document.body.className = document.body.className.replace(/\bno-js\b/, '');
+document.documentElement.className = document.documentElement.className.replace(/\bno-js\b/, '');
// Quick wrapper for a missing console
if ( ! window.console)
@@ -24,16 +19,27 @@ if ( ! window.console)
}
}
-// Execute methods registered within [project]._autoload in reverse order.
+// Get required views
+var _views = [], _autoload = function()
+{
+ var v = document.body.getAttribute('data-views');
+ return ['global'].concat( v && v.length ? v.split(' ') : [] );
+}();
+
+
+// Execute methods registered within _views registered with _autoload.
jQuery(function()
{
- for (var i = 0; i < window[project]._autoload.length; i++)
+ for (var i = 0; i < _autoload.length; i++)
{
- for (var method in window[project][ window[project]._autoload[i] ])
+ if ( _views[ _autoload[i] ] )
{
- if (typeof window[project][ window[project]._autoload[i] ][method] == 'function')
+ for (var method in _views[ _autoload[i] ])
{
- window[project][ window[project]._autoload[i] ][method]();
+ if ( typeof _views[ _autoload[i] ][method] === 'function' )
+ {
+ _views[ _autoload[i] ][method]();
+ }
}
}
}
View
@@ -0,0 +1,18 @@
+/**
+ * @author Matt Hinchliffe <http://www.maketea.co.uk>
+ * @created 27/03/2012
+ * @modified 29/03/2012
+ * @package Your project
+ */
+_views.global = {
+
+ /**
+ * Retina
+ * @description Swap out template images for scalable vectors
+ */
+ retina: function()
+ {
+ if ( window.devicePixelRatio && window.devicePixelRatio === 2 ){}
+ }
+
+};
View
@@ -1,6 +1,6 @@
/**
* Author: Matt Hinchliffe <www.maketea.co.uk>
- * Modified: 22/03/2012
+ * Modified: 29/03/2012
*/
// Global vars
@@ -24,6 +24,7 @@
// Modules
@import "modules/media.less";
+@import "modules/nameplate.less";
// Plugins
View
@@ -18,7 +18,7 @@ input, select, textarea, button {
/* Select boxes. Padding cannot be applied to a select box so add it to the height */
select {
- height:27px; /* 17px 'normal' line-height + padding */
+ height:(@type-size * 1.2) + (@input-padding * 2); /* font size * 'normal' line-height + padding */
}
/* Buttons render terribly due to a forced border-box style layout */
@@ -41,17 +41,12 @@ a.button {
vertical-align:bottom;
}
-/* Lists item margin may not be removed from display:list-item */
-ul.base li,
-ol.base li {
- display:block;
-}
-
/* No pseudo elements so just add extra spacing */
.separated-list li,
.tag-list li {
- float:left;
- display:list-item;
margin-left:1em;
- list-style-type:disc;
-}
+}
+ .tag-list li li:first-child,
+ .separated-list li:first-child {
+ margin-left:0;
+ }
View
@@ -1,6 +1,6 @@
/**
* Author: Matt Hinchliffe <www.maketea.co.uk>
- * Modified: 20/03/2012
+ * Modified: 29/03/2012
*/
// Box sizing
@@ -30,13 +30,13 @@
}
// Gradients
-.linear-gradient(@origin, @startColor, @endColor) {
+.linear-gradient(@angle, @startColor, @endColor) {
background:mix(@startColor, @endColor, 50%) repeat-x;
- background-image:-webkit-linear-gradient(@origin, @startColor, @endColor);
- background-image: -moz-linear-gradient(@origin, @startColor, @endColor);
- background-image: -ms-linear-gradient(@origin, @startColor, @endColor);
- background-image: -o-linear-gradient(@origin, @startColor, @endColor);
- background-image: linear-gradient(to @origin, @startColor, @endColor);
+ background-image:-webkit-linear-gradient(@angle, @startColor, @endColor);
+ background-image: -moz-linear-gradient(@angle, @startColor, @endColor);
+ background-image: -ms-linear-gradient(@angle, @startColor, @endColor);
+ background-image: -o-linear-gradient(@angle, @startColor, @endColor);
+ background-image: linear-gradient(@angle, @startColor, @endColor);
}
.radial-gradient(@startColor, @endColor, @shape: circle) {
background:mix(@startColor, @endColor, 50%) repeat-x;
@@ -1,21 +1,21 @@
/**
* Author: Matt Hinchliffe <www.maketea.co.uk>
- * Modified: 20/03/2012
+ * Modified: 29/03/2012
*/
// Grids container
.grid-container(@width: @grid-standard-width, @gutter: @grid-standard-gutter) {
width:@width - @gutter;
padding:0 (@gutter / 2);
margin:0 auto;
- .clearfix();
}
// Grid
.grid-declaration(@width: @grid-standard-width, @gutter: @grid-standard-gutter) {
clear:both;
max-width:@width;
margin-left:@gutter * -1;
+ .clearfix();
}
// Grid column shared declarations
@@ -0,0 +1,25 @@
+/**
+ * Author: Matt Hinchliffe <www.maketea.co.uk>
+ * Modified: 29/03/2012
+ * Description: The nameplate module for section headings <http://en.wikipedia.org/wiki/Nameplate_(publishing)>
+ * Example: div[class=nameplate] ( > div[class=mast]) > h1[class=title]
+ */
+
+.nameplate {
+ line-height:4em;
+ overflow:hidden;
+}
+ .nameplate .mast {
+ float:right;
+ }
+ .nameplate .title {
+ margin:0;
+ line-height:inherit;
+
+ // Define 'branding'
+ .em(18, @type-size);
+ font-family:@font-branding;
+ }
+ .nameplate .mast + .title {
+ float:left;
+ }
@@ -1,6 +1,6 @@
/**
* Author: Matt Hinchliffe <www.maketea.co.uk>
- * Modified: 20/03/2012
+ * Modified: 29/03/2012
*/
// Typography
@@ -12,6 +12,7 @@
// Font faces
@font-sans: Arial, sans-serif;
@font-serif: Cambria, Georgia, serif;
+@font-branding: Helvetica, "Helvetica Neue", Arial, sans-serif; // Usually a webfont
@font-mono: Consolas, "Lucida Console", Monaco, monospace;
@font-smallprint: Verdana, Geneva, Tahoma, sans-serif;
@@ -34,7 +35,3 @@
@grid-standard-columns: 12;
@grid-standard-colwidth: 60px;
@grid-standard-gutter: 20px;
-@grid-small-width: 768px;
-@grid-small-colwidth: 44px;
-@grid-mobile-width: 300px;
-@grid-mobile-colwidth: 300px;
View
@@ -1,14 +1,17 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
- <title>WebsiteBase</title>
+ <title>Example &mdash; WebsiteBase</title>
+ <!-- DEVELOPMENT ONLY
<link rel="stylesheet/less" href="assets/less/base.less" />
<script src="assets/js/utils/less-1.2.1.min.js"></script>
+ -->
+ <link rel="stylesheet" href="assets/css/base.css" />
<!--[if lte IE 7]><link rel="stylesheet" href="assets/css/ie7.css"/><![endif]-->
@@ -23,7 +26,7 @@
-->
</head>
-<body>
+<body data-views="">
<div id="container" class="container">
@@ -370,7 +373,7 @@ <h1 id="lists">Lists</h1>
<!-- Scripts -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
- <script>if (!window.jQuery) document.writeln('<scr' + 'ipt src="assets/js/jquery-1.7.1.min.js"></scr' + 'ipt>')</script>
+ <script>if (!window.jQuery) document.writeln('<scr' + 'ipt src="assets/js/lib/jquery-1.7.1.min.js"></scr' + 'ipt>')</script>
<script src="assets/js/project.js"></script>
</body>
View
@@ -1,17 +1,19 @@
<!DOCTYPE html>
-<html lang="en">
+<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<title>WebsiteBase</title>
+ <!-- DEVELOPMENT ONLY
<link rel="stylesheet/less" href="assets/less/base.less" />
<script src="assets/js/utils/less-1.2.1.min.js"></script>
+ -->
+ <link rel="stylesheet" href="assets/css/base.css" />
<!--[if lte IE 7]><link rel="stylesheet" href="assets/css/ie7.css"/><![endif]-->
- <!--[if lte IE 6]><link rel="stylesheet" href="assets/css/ie6.css"/><![endif]-->
<link rel="Shortcut Icon" type="image/png" href="assets/img/favicon.ico" />
<link rel="apple-touch-icon" href="assets/img/favicon_touch.png" />
@@ -24,7 +26,7 @@
-->
</head>
-<body>
+<body data-views="">
<div id="container" class="container">
@@ -54,7 +56,7 @@
<!-- Scripts -->
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
- <script>if (!window.jQuery) document.writeln('<scr' + 'ipt src="assets/js/jquery-1.7.1.min.js"></scr' + 'ipt>')</script>
+ <script>if (!window.jQuery) document.writeln('<scr' + 'ipt src="assets/js/lib/jquery-1.7.1.min.js"></scr' + 'ipt>')</script>
<script src="assets/js/project.js"></script>
</body>

0 comments on commit be5932c

Please sign in to comment.