├── .editorconfig.org ├── .gitignore ├── .jshintrc ├── Gruntfile.js ├── README.md ├── bower.json ├── code ├── context.min.js └── intention.min.js ├── context.js ├── examples ├── 960gs │ ├── css │ │ ├── 960fluid.css │ │ ├── demo.css │ │ ├── reset.css │ │ └── text.css │ ├── img │ │ └── 12_col.gif │ ├── index.html │ └── main.js ├── animation │ ├── img │ │ ├── Brooklyn_Panorama_2_small.jpg │ │ └── walking.png │ ├── index.html │ └── testC.html ├── bootstrap_grid │ ├── bootstrap │ │ ├── css │ │ │ ├── bootstrap-responsive.css │ │ │ ├── bootstrap-responsive.min.css │ │ │ ├── bootstrap.css │ │ │ └── bootstrap.min.css │ │ ├── img │ │ │ ├── glyphicons-halflings-white.png │ │ │ └── glyphicons-halflings.png │ │ └── js │ │ │ ├── bootstrap.js │ │ │ └── bootstrap.min.js │ ├── css │ │ └── intentions_bootstrap.css │ ├── index.html │ └── main.js ├── bootstrapddd │ ├── css │ │ ├── bootstrap-responsive.css │ │ ├── bootstrap-responsive.min.css │ │ ├── bootstrap.css │ │ └── bootstrap.min.css │ ├── img │ │ ├── glyphicons-halflings-white.png │ │ └── glyphicons-halflings.png │ ├── index.html │ └── js │ │ ├── Context.js │ │ ├── Intention.js │ │ ├── bootstrap.js │ │ ├── bootstrap.min.js │ │ ├── jquery.js │ │ └── underscore.js ├── css_loader │ ├── css │ │ ├── mobile-base.css │ │ ├── standard.css │ │ └── tablet.css │ └── index.html ├── grid │ ├── css │ │ ├── demo-grid-modules.css │ │ └── responsivegrid.css │ ├── index.html │ └── main.js ├── mediaquery_link │ ├── css │ │ ├── mobile.css │ │ ├── standard.css │ │ └── tablet.css │ ├── index.html │ └── main.js ├── orientation │ └── index.html ├── performance │ ├── img │ │ ├── src.jpg │ │ ├── tn-src.jpg │ │ ├── tn-src2.jpg │ │ └── tn-src3.jpg │ └── index.html ├── scrolldepth │ ├── img │ │ ├── FT.jpg │ │ ├── S1.JPG │ │ ├── S2.jpg │ │ ├── S3.jpg │ │ ├── S4.jpg │ │ ├── S5.jpg │ │ ├── Untitled-1.psd │ │ ├── f1.png │ │ ├── f2.png │ │ ├── f3.png │ │ ├── f4.png │ │ ├── f5.png │ │ ├── fis.ai │ │ ├── fish1.png │ │ ├── fish2.png │ │ ├── fish3.png │ │ ├── fish4.png │ │ ├── fish5.png │ │ ├── fish_tank.jpg │ │ ├── moire.png │ │ ├── moire.psd │ │ ├── ob.png │ │ ├── obst.png │ │ └── tank.jpg │ ├── index.html │ ├── scrolldepth.js │ ├── slideshow.html │ ├── ss2.html │ ├── testCM.html │ └── touch.html ├── touch │ ├── img │ │ ├── FT.jpg │ │ ├── S1.JPG │ │ ├── S2.jpg │ │ ├── S3.jpg │ │ ├── S4.jpg │ │ ├── S5.jpg │ │ ├── Untitled-1.psd │ │ ├── f1.png │ │ ├── f2.png │ │ ├── f3.png │ │ ├── f4.png │ │ ├── f5.png │ │ ├── fis.ai │ │ ├── fish1.png │ │ ├── fish2.png │ │ ├── fish3.png │ │ ├── fish4.png │ │ ├── fish5.png │ │ ├── fish_tank.jpg │ │ ├── moire.png │ │ ├── moire.psd │ │ ├── ob.png │ │ ├── obst.png │ │ └── tank.jpg │ ├── index.html │ ├── slideshow.html │ └── testCM.html └── wsj │ ├── css │ ├── html5reset.css │ ├── responsivegrid.css │ ├── rw-general.css │ ├── rw-hedSumm.css │ ├── rw-mobilemain.css │ ├── rw-mostPopular.css │ ├── rw-nameplate.css │ ├── rw-set.css │ └── rw-typography.css │ ├── img │ ├── IMG_grumpy-167.jpg │ ├── IMG_grumpy-262.jpg │ ├── IMG_grumpy-76.jpg │ └── littlemac.gif │ ├── index.html │ ├── main.js │ └── page.js ├── intention.js ├── package.json └── test ├── .DS_Store ├── context-tests.html ├── context.tests.js ├── index.html ├── init.js ├── intention.tests.js └── vendor ├── .DS_Store ├── expect.js ├── jquery.js ├── jquery.min.map ├── mocha.css ├── mocha.js ├── require.js └── underscore.js /.editorconfig.org: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | 3 | root = true 4 | 5 | [*] 6 | indent_style = space 7 | indent_size = 2 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [*.md] 14 | trim_trailing_whitespace = false 15 | 16 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | _site 4 | *.espressostorage 5 | .projectile 6 | *.sublime* 7 | *~* 8 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | /* 2 | * 3 | * JSHint Configuration File for IntentionJS project. 4 | * See http://jshint.com/docs/ for more details 5 | * 6 | */ 7 | 8 | { 9 | 10 | "maxerr" : 100, // {int} Maximum error before stopping 11 | 12 | // Enforcing 13 | "bitwise" : true, // true: Prohibit bitwise operators (&, |, ^, etc.) 14 | "camelcase" : false, // true: Identifiers must be in camelCase 15 | // TODO change to true with rule for __setters__ 16 | "curly" : true, // true: Require {} for every new block or scope 17 | "eqeqeq" : true, // true: Require triple equals (===) for comparison 18 | "forin" : true, // true: Require filtering for..in loops with obj.hasOwnProperty() 19 | "immed" : true, // true: Require immediate invocations to be wrapped in parens e.g. `(function () { } ());` 20 | "indent" : 2, // {int} Number of spaces to use for indentation 21 | "latedef" : true, // true: Require variables/functions to be defined before being used 22 | "newcap" : true, // true: Require capitalization of all constructor functions e.g. `new F()` 23 | "noarg" : true, // true: Prohibit use of `arguments.caller` and `arguments.callee` 24 | "noempty" : true, // true: Prohibit use of empty blocks 25 | "nonew" : false, // true: Prohibit use of constructors for side-effects (without assignment) 26 | "plusplus" : false, // true: Prohibit use of `++` & `--` 27 | "quotmark" : "single", // Quotation mark consistency: 28 | // false : do nothing (default) 29 | // true : ensure whatever is used is consistent 30 | // "single" : require single quotes 31 | // "double" : require double quotes 32 | "undef" : true, // true: Require all non-global variables to be declared (prevents global leaks) 33 | "unused" : true, // true: Require all defined variables be used 34 | "strict" : true, // true: Requires all functions run in ES5 Strict Mode 35 | "trailing" : true, // true: Prohibit trailing whitespaces 36 | "maxparams" : false, // {int} Max number of formal params allowed per function 37 | "maxdepth" : false, // {int} Max depth of nested blocks (within functions) 38 | "maxstatements" : false, // {int} Max number statements per function 39 | "maxcomplexity" : false, // {int} Max cyclomatic complexity per function 40 | "maxlen" : false, // {int} Max number of characters per line 41 | 42 | // Relaxing 43 | "asi" : false, // true: Tolerate Automatic Semicolon Insertion (no semicolons) 44 | "boss" : false, // true: Tolerate assignments where comparisons would be expected 45 | "debug" : false, // true: Allow debugger statements e.g. browser breakpoints. 46 | "eqnull" : true, // true: Tolerate use of `== null` 47 | "esnext" : true, // true: Allow ES.next (ES6) syntax (ex: `const`) 48 | "moz" : false, // true: Allow Mozilla specific syntax (extends and overrides esnext features) 49 | // (ex: `for each`, multiple try/catch, function expression…) 50 | "evil" : false, // true: Tolerate use of `eval` and `new Function()` 51 | "expr" : false, // true: Tolerate `ExpressionStatement` as Programs 52 | "funcscope" : false, // true: Tolerate defining variables inside control statements" 53 | "globalstrict" : false, // true: Allow global "use strict" (also enables 'strict') 54 | "iterator" : false, // true: Tolerate using the `__iterator__` property 55 | "lastsemic" : true, // true: Tolerate omitting a semicolon for the last statement of a 1-line block 56 | "laxbreak" : false, // true: Tolerate possibly unsafe line breakings 57 | "laxcomma" : false, // true: Tolerate comma-first style coding 58 | "loopfunc" : false, // true: Tolerate functions being defined in loops 59 | "multistr" : false, // true: Tolerate multi-line strings 60 | "proto" : false, // true: Tolerate using the `__proto__` property 61 | "scripturl" : false, // true: Tolerate script-targeted URLs 62 | "smarttabs" : false, // true: Tolerate mixed tabs/spaces when used for alignment 63 | "shadow" : false, // true: Allows re-define variables later in code e.g. `var x=1; x=2;` 64 | "sub" : false, // true: Tolerate using `[]` notation when it can still be expressed in dot notation 65 | "supernew" : false, // true: Tolerate `new function () { ... };` and `new Object;` 66 | "validthis" : false, // true: Tolerate using this in a non-constructor function 67 | // "regexp" : false, // true if . and [^...] should be allowed in RegExp literals. They match more material than might be expected, allowing attackers to confuse applications. These forms should not be used when validating in secure applications. 68 | 69 | // Environments 70 | "browser" : true, // Web Browser (window, document, etc) 71 | "couch" : false, // CouchDB 72 | "devel" : true, // Development/debugging (alert, confirm, etc) 73 | "dojo" : false, // Dojo Toolkit 74 | "jquery" : true, // jQuery 75 | "mootools" : false, // MooTools 76 | "node" : true, // Node.js 77 | "nonstandard" : false, // Widely adopted globals (escape, unescape, etc) 78 | "prototypejs" : false, // Prototype and Scriptaculous 79 | "rhino" : false, // Rhino 80 | "worker" : false, // Web Workers 81 | "wsh" : false, // Windows Scripting Host 82 | "yui" : false, // Yahoo User Interface 83 | 84 | // Legacy 85 | "nomen" : false, // true: Prohibit dangling `_` in variables 86 | "onevar" : false, // true: Allow only one `var` statement per function 87 | "passfail" : false, // true: Stop on first error 88 | "white" : true, // true: Check against strict whitespace and indentation rules 89 | 90 | // Custom Globals 91 | "globals" : { 92 | "_" : false, 93 | "it" : false, 94 | "underscore": false, 95 | "define" : false, 96 | "describe" : false, 97 | "expect" : false, 98 | "module" : true, 99 | "Intention" : true 100 | } 101 | 102 | } 103 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function (grunt) { 2 | 'use strict'; 3 | grunt.loadNpmTasks('grunt-contrib-jshint'); 4 | //grunt.loadNpmTasks('grunt-contrib-requirejs'); 5 | grunt.loadNpmTasks('grunt-contrib-uglify'); 6 | grunt.loadNpmTasks('grunt-release'); 7 | grunt.initConfig({ 8 | pkg: grunt.file.readJSON('package.json'), 9 | release: { options: { npm: false } }, 10 | jshint: { 11 | files: [ 12 | '**.js', 13 | 'test/*.js' 14 | ], 15 | options: { 16 | ignores: [ 17 | 'code/*', 18 | 'test/vendor/**/*' 19 | ], 20 | jshintrc: '.jshintrc' 21 | } 22 | }, 23 | uglify: { 24 | intention: { 25 | options: { banner: '/*! <%= pkg.name %> v<%= pkg.version %> \n* <%= pkg.homepage %> \n* \n* intention.js \n* \n* <%=pkg.copyright %>, <%= grunt.template.today("yyyy") %>\n* <%=pkg.banner %>*/ ' }, 26 | files: { 'code/intention.min.js': ['intention.js'] } 27 | }, 28 | context: { 29 | options: { banner: '/*! <%= pkg.name %> v<%= pkg.version %> \n* <%= pkg.homepage %> \n* \n* context.js \n* \n* <%=pkg.copyright %>, <%= grunt.template.today("yyyy") %>\n* <%=pkg.banner %>*/ ' }, 30 | files: { 'code/context.min.js': ['context.js'] } 31 | } 32 | } 33 | }); 34 | grunt.registerTask('default', [ 35 | 'jshint', 36 | 'uglify' 37 | ]); 38 | }; -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "intentionjs", 3 | "version": "0.9.9", 4 | "main": "intention.js", 5 | "scripts": 6 | "dependencies": { 7 | "jquery": "1.9.0", 8 | "underscore.js": "latest" 9 | }, 10 | "license": "MIT", 11 | "keywords": ["responsive", "touch", "contexts", "intentions"] 12 | } 13 | -------------------------------------------------------------------------------- /code/context.min.js: -------------------------------------------------------------------------------- 1 | /*! intention.js v0.9.9 2 | * http://intentionjs.com/ 3 | * 4 | * context.js 5 | * 6 | * Copyright 2008, 2013 7 | * Dowjones and other contributors. 8 | * Released under the MIT license. 9 | **/ !function(){"use strict";var a=function(a,b){function c(a,b){var c=new Date,d=null;return function(e){var f=new Date;if(b>f-c){d&&window.clearTimeout(d);var g=function(b){return function(){a(b)}};return d=window.setTimeout(g(e),b),!1}a(e),c=f}}var d,e,f=new b;return f.responsive([{name:"base"}]).respond("base"),d=f.responsive({ID:"width",contexts:[{name:"standard",min:840},{name:"tablet",min:510},{name:"mobile",min:0}],matcher:function(a,b){return"string"==typeof a?a===b.name:a>=b.min},measure:function(b){return"string"==typeof b?b:a(window).width()}}),e=f.responsive({ID:"orientation",contexts:[{name:"portrait",rotation:0},{name:"landscape",rotation:90}],matcher:function(a,b){return a===b.rotation},measure:function(){var a=Math.abs(window.orientation);return a>0&&(a=180-a),a}}),f.responsive({ID:"touch",contexts:[{name:"touch"}],matcher:function(){return"ontouchstart"in window}}).respond(),f.responsive({ID:"highres",contexts:[{name:"highres"}],matcher:function(){return window.devicePixelRatio>1}}).respond(),a(window).on("resize",c(d.respond,100)).on("orientationchange",d.respond).on("orientationchange",e.respond),d.respond(),e.respond(),a(function(){f.elements(document)}),f};!function(a,b){"function"==typeof define&&define.amd?define("context",["jquery","intention"],b):a.intent=b(a.jQuery,a.Intention)}(this,function(b,c){return a(b,c)})}.call(this); -------------------------------------------------------------------------------- /code/intention.min.js: -------------------------------------------------------------------------------- 1 | /*! intention.js v0.9.9 2 | * http://intentionjs.com/ 3 | * 4 | * intention.js 5 | * 6 | * Copyright 2008, 2013 7 | * Dowjones and other contributors. 8 | * Released under the MIT license. 9 | **/ !function(a,b){"use strict";"function"==typeof define&&define.amd?define("intention",["jquery","underscore"],b):a.Intention=b(a.jQuery,a._)}(this,function(a,b){"use strict";var c=function(c){var d=b.extend(this,c,{_listeners:{},contexts:[],elms:a(),axes:{},priority:[]});return d};return c.prototype={responsive:function d(a,c){var e,f="abcdefghijklmnopqrstuvwxyz0123456789",g=f.length,h="";for(e=0;5>e;e++)h+=f[Math.floor(Math.random()*g)];var i={matcher:function(a,b){return a===b.name},measure:b.identity,ID:h};if(b.isObject(c)===!1&&(c={}),b.isArray(a)&&b.isArray(a[0].contexts))return b.each(a,function(a){d.apply(this,a)},this),void 0;b.isArray(a)===!1&&b.isObject(a)?c=a:c.contexts=a,c=b.extend({},i,c),this.on("_"+c.ID+":",b.bind(function(a){this.axes=this._contextualize(c.ID,a.context,this.axes),this._respond(this.axes,this.elms)},this));var j={ID:c.ID,current:null,contexts:c.contexts,respond:b.bind(this._responder(c.ID,c.contexts,c.matcher,c.measure),this)};return this.axes[c.ID]=j,this.axes.__keys__=this.priority,this.priority.unshift(c.ID),j},elements:function(c){return c||(c=document),a("[data-intent],[intent],[data-in],[in]",c).each(b.bind(function(b,c){this.add(a(c))},this)),this},add:function(c,d){var e;return d||(d={}),c.each(b.bind(function(c,f){var g=!1;this.elms.each(function(a,b){return f===b.elm?(g=!0,!1):!0}),g===!1&&(e=this._fillSpec(b.extend(d,this._attrsToSpec(f.attributes,this.axes))),this._makeChanges(a(f),e,this.axes),this.elms.push({elm:f,spec:e}))},this)),this},remove:function(a){var b=this.elms;return a.each(function(a,c){b.each(function(a,d){return c===d.elm?(b.splice(a,1),!1):!0})}),this},is:function(a){var c=this.axes;return b.some(c.__keys__,function(b){return a===c[b].current})},current:function(a){return this.axes.hasOwnProperty(a)?this.axes[a].current:!1},on:function(a,b){var c=a.split(" "),d=0;for(d;d v0.9.6.2 of intention.js 3 | * http://intentionjs.com/ 4 | * 5 | * Copyright 2011, 2013 Dowjones and other contributors 6 | * Released under the MIT license 7 | * 8 | */ 9 | (function () { 10 | 'use strict'; 11 | var context = function ($, Intention) { 12 | // create a brand spankin new intention object 13 | var intent = new Intention(), 14 | // placeholder for the horizontal axis 15 | horizontal_axis, orientation_axis; 16 | // throttle function used for keeping calls to the resize responsive 17 | // callback to a minimum 18 | function throttle(callback, interval) { 19 | var lastExec = new Date(), timer = null; 20 | return function (e) { 21 | var d = new Date(); 22 | if (d - lastExec < interval) { 23 | if (timer) { 24 | window.clearTimeout(timer); 25 | } 26 | var callbackWrapper = function (event) { 27 | return function () { 28 | callback(event); 29 | }; 30 | }; 31 | timer = window.setTimeout(callbackWrapper(e), interval); 32 | return false; 33 | } 34 | callback(e); 35 | lastExec = d; 36 | }; 37 | } 38 | // catchall 39 | // ======================================================================= 40 | intent.responsive([{ name: 'base' }]).respond('base'); 41 | // width context? 42 | // ======================================================================= 43 | horizontal_axis = intent.responsive({ 44 | ID: 'width', 45 | contexts: [ 46 | { 47 | name: 'standard', 48 | min: 840 49 | }, 50 | { 51 | name: 'tablet', 52 | min: 510 53 | }, 54 | { 55 | name: 'mobile', 56 | min: 0 57 | } 58 | ], 59 | matcher: function (test, context) { 60 | if (typeof test === 'string') { 61 | return test === context.name; 62 | } 63 | return test >= context.min; 64 | }, 65 | measure: function (arg) { 66 | if (typeof arg === 'string') { 67 | return arg; 68 | } 69 | return $(window).width(); 70 | } 71 | }); 72 | // orientation context? 73 | // ======================================================================= 74 | orientation_axis = intent.responsive({ 75 | ID: 'orientation', 76 | contexts: [ 77 | { 78 | name: 'portrait', 79 | rotation: 0 80 | }, 81 | { 82 | name: 'landscape', 83 | rotation: 90 84 | } 85 | ], 86 | matcher: function (measure, ctx) { 87 | return measure === ctx.rotation; 88 | }, 89 | measure: function () { 90 | var test = Math.abs(window.orientation); 91 | if (test > 0) { 92 | test = 180 - test; 93 | } 94 | return test; 95 | } 96 | }); 97 | // ONE TIME CHECK AXES: 98 | // touch device? 99 | // ======================================================================= 100 | intent.responsive({ 101 | ID: 'touch', 102 | contexts: [{ name: 'touch' }], 103 | matcher: function () { 104 | return 'ontouchstart' in window; 105 | } 106 | }).respond(); 107 | // retina display? 108 | // ======================================================================= 109 | intent.responsive({ 110 | ID: 'highres', 111 | contexts: [{ name: 'highres' }], 112 | matcher: function () { 113 | return window.devicePixelRatio > 1; 114 | } 115 | }).respond(); 116 | // bind events to the window 117 | $(window).on('resize', throttle(horizontal_axis.respond, 100)).on('orientationchange', horizontal_axis.respond).on('orientationchange', orientation_axis.respond); 118 | // register the current width and orientation without waiting for a window 119 | // resize 120 | horizontal_axis.respond(); 121 | orientation_axis.respond(); 122 | $(function () { 123 | // at doc ready grab all of the elements in the doc 124 | intent.elements(document); 125 | }); 126 | // return the intention object so that it can be extended by other plugins 127 | return intent; 128 | }; 129 | (function (root, factory) { 130 | if (typeof define === 'function' && define.amd) { 131 | // AMD. Register as an anonymous module. 132 | define('context', [ 133 | 'jquery', 134 | 'intention' 135 | ], factory); 136 | } else { 137 | // Browser globals 138 | root.intent = factory(root.jQuery, root.Intention); 139 | } 140 | }(this, function ($, Intention) { 141 | return context($, Intention); 142 | })); 143 | }.call(this)); -------------------------------------------------------------------------------- /examples/960gs/css/960fluid.css: -------------------------------------------------------------------------------- 1 | /* 2 | 960 Grid System ~ Core CSS. 3 | Learn more ~ http://960.gs/ 4 | 5 | Licensed under GPL and MIT. 6 | */ 7 | 8 | /* =Containers 9 | --------------------------------------------------------------------------------*/ 10 | .container_6, 11 | .container_12, 12 | .container_16 13 | { 14 | width: 92%; 15 | margin-left: 4%; 16 | margin-right: 4%; 17 | } 18 | 19 | /* =Grid >> Global 20 | --------------------------------------------------------------------------------*/ 21 | 22 | .grid_1, 23 | .grid_2, 24 | .grid_3, 25 | .grid_4, 26 | .grid_5, 27 | .grid_6, 28 | .grid_7, 29 | .grid_8, 30 | .grid_9, 31 | .grid_10, 32 | .grid_11, 33 | .grid_12, 34 | .grid_13, 35 | .grid_14, 36 | .grid_15, 37 | .grid_16 38 | { 39 | display: inline; 40 | float: left; 41 | margin-left: 1%; 42 | margin-right: 1%; 43 | } 44 | 45 | .container_6 .grid_2, 46 | .container_12 .grid_3, 47 | .container_16 .grid_4 48 | { 49 | width: 23%; 50 | } 51 | 52 | .container_6 .grid_3, 53 | .container_12 .grid_6, 54 | .container_16 .grid_8 55 | { 56 | width: 48%; 57 | } 58 | 59 | .container_6 .grid_4, 60 | .container_12 .grid_9, 61 | .container_16 .grid_12 62 | { 63 | width: 73%; 64 | } 65 | 66 | .container_6 .grid_6, 67 | .container_12 .grid_12, 68 | .container_16 .grid_16 69 | { 70 | width: 98%; 71 | } 72 | 73 | /* =Grid >> Children (Alpha ~ First, Omega ~ Last) 74 | --------------------------------------------------------------------------------*/ 75 | 76 | .alpha 77 | { 78 | margin-left: 0; 79 | } 80 | 81 | .omega 82 | { 83 | margin-right: 0; 84 | } 85 | 86 | /* =Grid >> 6 Columns 87 | --------------------------------------------------------------------------------*/ 88 | 89 | .container_6 .grid_1 90 | { 91 | width: 15.333%; 92 | } 93 | 94 | .container_6 .grid_2 95 | { 96 | width: 31.666%; 97 | } 98 | 99 | .container_6 .grid_3 100 | { 101 | width: 47.999%; 102 | } 103 | 104 | .container_6 .grid_4 105 | { 106 | width: 64.332%; 107 | } 108 | 109 | .container_6 .grid_5 110 | { 111 | width: 80.665%; 112 | } 113 | 114 | .container_6 .grid_6 115 | { 116 | width: 98%; 117 | } 118 | 119 | /*.container_6 .grid_7 120 | { 121 | width: 56.333%; 122 | } 123 | 124 | .container_6 .grid_8 125 | { 126 | width: 64.666%; 127 | } 128 | 129 | .container_6 .grid_10 130 | { 131 | width: 81.333%; 132 | } 133 | 134 | .container_6 .grid_11 135 | { 136 | width: 89.666%; 137 | 138 | }*/ 139 | 140 | /* =Grid >> 12 Columns 141 | --------------------------------------------------------------------------------*/ 142 | 143 | .container_12 .grid_1 144 | { 145 | width: 6.333%; 146 | } 147 | 148 | .container_12 .grid_2 149 | { 150 | width: 14.666%; 151 | } 152 | 153 | .container_12 .grid_4 154 | { 155 | width: 31.333%; 156 | } 157 | 158 | .container_12 .grid_5 159 | { 160 | width: 39.666%; 161 | } 162 | 163 | .container_12 .grid_7 164 | { 165 | width: 56.333%; 166 | } 167 | 168 | .container_12 .grid_8 169 | { 170 | width: 64.666%; 171 | } 172 | 173 | .container_12 .grid_10 174 | { 175 | width: 81.333%; 176 | } 177 | 178 | .container_12 .grid_11 179 | { 180 | width: 89.666%; 181 | } 182 | 183 | /* =Grid >> 16 Columns 184 | --------------------------------------------------------------------------------*/ 185 | 186 | .container_16 .grid_1 187 | { 188 | width: 4.25%; 189 | } 190 | 191 | .container_16 .grid_2 192 | { 193 | width: 10.5%; 194 | } 195 | 196 | .container_16 .grid_3 197 | { 198 | width: 16.75%; 199 | } 200 | 201 | .container_16 .grid_5 202 | { 203 | width: 29.25%; 204 | } 205 | 206 | .container_16 .grid_6 207 | { 208 | width: 35.5%; 209 | } 210 | 211 | .container_16 .grid_7 212 | { 213 | width: 41.75%; 214 | } 215 | 216 | .container_16 .grid_9 217 | { 218 | width: 54.25%; 219 | } 220 | 221 | .container_16 .grid_10 222 | { 223 | width: 60.5%; 224 | } 225 | 226 | .container_16 .grid_11 227 | { 228 | width: 66.75%; 229 | } 230 | 231 | .container_16 .grid_13 232 | { 233 | width: 79.25%; 234 | } 235 | 236 | .container_16 .grid_14 237 | { 238 | width: 85.5%; 239 | } 240 | 241 | .container_16 .grid_15 242 | { 243 | width: 91.75%; 244 | } 245 | 246 | /* =Prefix Extra Space >> Global 247 | --------------------------------------------------------------------------------*/ 248 | 249 | .container_12 .prefix_3, 250 | .container_16 .prefix_4 251 | { 252 | padding-left: 25%; 253 | } 254 | 255 | .container_12 .prefix_6, 256 | .container_16 .prefix_8 257 | { 258 | padding-left: 50%; 259 | } 260 | 261 | .container_12 .prefix_9, 262 | .container_16 .prefix_12 263 | { 264 | padding-left: 75%; 265 | } 266 | 267 | /* =Prefix Extra Space >> 12 Columns 268 | --------------------------------------------------------------------------------*/ 269 | 270 | .container_12 .prefix_1 271 | { 272 | padding-left: 8.333%; 273 | } 274 | 275 | .container_12 .prefix_2 276 | { 277 | padding-left: 16.666%; 278 | } 279 | 280 | .container_12 .prefix_4 281 | { 282 | padding-left: 33.333%; 283 | } 284 | 285 | .container_12 .prefix_5 286 | { 287 | padding-left: 41.666%; 288 | } 289 | 290 | .container_12 .prefix_7 291 | { 292 | padding-left: 58.333%; 293 | } 294 | 295 | .container_12 .prefix_8 296 | { 297 | padding-left: 66.666%; 298 | } 299 | 300 | .container_12 .prefix_10 301 | { 302 | padding-left: 83.333%; 303 | } 304 | 305 | .container_12 .prefix_11 306 | { 307 | padding-left: 91.666%; 308 | } 309 | 310 | /* =Prefix Extra Space >> 16 Columns 311 | --------------------------------------------------------------------------------*/ 312 | 313 | .container_16 .prefix_1 314 | { 315 | padding-left: 6.25%; 316 | } 317 | 318 | .container_16 .prefix_2 319 | { 320 | padding-left: 12.5%; 321 | } 322 | 323 | .container_16 .prefix_3 324 | { 325 | padding-left: 18.75%; 326 | } 327 | 328 | .container_16 .prefix_5 329 | { 330 | padding-left: 31.25%; 331 | } 332 | 333 | .container_16 .prefix_6 334 | { 335 | padding-left: 37.5%; 336 | } 337 | 338 | .container_16 .prefix_7 339 | { 340 | padding-left: 43.75%; 341 | } 342 | 343 | .container_16 .prefix_9 344 | { 345 | padding-left: 56.25%; 346 | } 347 | 348 | .container_16 .prefix_10 349 | { 350 | padding-left: 62.5%; 351 | } 352 | 353 | .container_16 .prefix_11 354 | { 355 | padding-left: 68.75%; 356 | } 357 | 358 | .container_16 .prefix_13 359 | { 360 | padding-left: 81.25%; 361 | } 362 | 363 | .container_16 .prefix_14 364 | { 365 | padding-left: 87.5%; 366 | } 367 | 368 | .container_16 .prefix_15 369 | { 370 | padding-left: 93.75%; 371 | } 372 | 373 | /* =Suffix Extra Space >> Global 374 | --------------------------------------------------------------------------------*/ 375 | 376 | .container_12 .suffix_3, 377 | .container_16 .suffix_4 378 | { 379 | padding-right: 25%; 380 | } 381 | 382 | .container_12 .suffix_6, 383 | .container_16 .suffix_8 384 | { 385 | padding-right: 50%; 386 | } 387 | 388 | .container_12 .suffix_9, 389 | .container_16 .suffix_12 390 | { 391 | padding-right: 75%; 392 | } 393 | 394 | /* =Suffix Extra Space >> 12 Columns 395 | --------------------------------------------------------------------------------*/ 396 | 397 | .container_12 .suffix_1 398 | { 399 | padding-right: 8.333%; 400 | } 401 | 402 | .container_12 .suffix_2 403 | { 404 | padding-right: 16.666%; 405 | } 406 | 407 | .container_12 .suffix_4 408 | { 409 | padding-right: 33.333%; 410 | } 411 | 412 | .container_12 .suffix_5 413 | { 414 | padding-right: 41.666%; 415 | } 416 | 417 | .container_12 .suffix_7 418 | { 419 | padding-right: 58.333%; 420 | } 421 | 422 | .container_12 .suffix_8 423 | { 424 | padding-right: 66.666%; 425 | } 426 | 427 | .container_12 .suffix_10 428 | { 429 | padding-right: 83.333%; 430 | } 431 | 432 | .container_12 .suffix_11 433 | { 434 | padding-right: 91.666%; 435 | } 436 | 437 | /* =Suffix Extra Space >> 16 Columns 438 | --------------------------------------------------------------------------------*/ 439 | 440 | .container_16 .suffix_1 441 | { 442 | padding-right: 6.25%; 443 | } 444 | 445 | .container_16 .suffix_2 446 | { 447 | padding-right: 16.5%; 448 | } 449 | 450 | .container_16 .suffix_3 451 | { 452 | padding-right: 18.75%; 453 | } 454 | 455 | .container_16 .suffix_5 456 | { 457 | padding-right: 31.25%; 458 | } 459 | 460 | .container_16 .suffix_6 461 | { 462 | padding-right: 37.5%; 463 | } 464 | 465 | .container_16 .suffix_7 466 | { 467 | padding-right: 43.75%; 468 | } 469 | 470 | .container_16 .suffix_9 471 | { 472 | padding-right: 56.25%; 473 | } 474 | 475 | .container_16 .suffix_10 476 | { 477 | padding-right: 62.5%; 478 | } 479 | 480 | .container_16 .suffix_11 481 | { 482 | padding-right: 68.75%; 483 | } 484 | 485 | .container_16 .suffix_13 486 | { 487 | padding-right: 81.25%; 488 | } 489 | 490 | .container_16 .suffix_14 491 | { 492 | padding-right: 87.5%; 493 | } 494 | 495 | .container_16 .suffix_15 496 | { 497 | padding-right: 93.75%; 498 | } 499 | 500 | /* =Clear Floated Elements 501 | --------------------------------------------------------------------------------*/ 502 | 503 | /* http://sonspring.com/journal/clearing-floats */ 504 | 505 | html body * span.clear, 506 | html body * div.clear, 507 | html body * li.clear, 508 | html body * dd.clear 509 | { 510 | background: none; 511 | border: 0; 512 | clear: both; 513 | display: block; 514 | float: none; 515 | font-size: 0; 516 | list-style: none; 517 | margin: 0; 518 | padding: 0; 519 | overflow: hidden; 520 | visibility: hidden; 521 | width: 0; 522 | height: 0; 523 | } 524 | 525 | /* http://www.positioniseverything.net/easyclearing.html */ 526 | 527 | .clearfix:after 528 | { 529 | clear: both; 530 | content: '.'; 531 | display: block; 532 | visibility: hidden; 533 | height: 0; 534 | } 535 | 536 | .clearfix 537 | { 538 | display: inline-block; 539 | } 540 | 541 | * html .clearfix 542 | { 543 | height: 1%; 544 | } 545 | 546 | .clearfix 547 | { 548 | display: block; 549 | } -------------------------------------------------------------------------------- /examples/960gs/css/demo.css: -------------------------------------------------------------------------------- 1 | body { 2 | background: #123; 3 | color: #333; 4 | font-size: 11px; 5 | height: auto; 6 | padding-bottom: 20px; 7 | } 8 | 9 | a { 10 | color: #fff; 11 | text-decoration: none; 12 | } 13 | 14 | a:hover { 15 | text-decoration: underline; 16 | } 17 | 18 | h1 { 19 | font-family: Georgia, serif; 20 | font-weight: normal; 21 | padding-top: 20px; 22 | text-align: center; 23 | } 24 | 25 | h2 { 26 | padding-top: 20px; 27 | text-align: center; 28 | } 29 | 30 | p { 31 | border: 1px solid #666; 32 | overflow: hidden; 33 | padding: 10px 0; 34 | text-align: center; 35 | } 36 | 37 | .container_6, 38 | .container_12, 39 | .container_16, 40 | .container_24 { 41 | background-color: #fff; 42 | background-repeat: repeat-y; 43 | margin-bottom: 20px; 44 | } 45 | 46 | .container_12 { 47 | /* background-image: url(../img/12_col.gif);*/ 48 | } 49 | 50 | .container_16 { 51 | /* background-image: url(../img/16_col.gif);*/ 52 | } 53 | 54 | .container_24 { 55 | /* background-image: url(../img/24_col.gif);*/ 56 | } 57 | 58 | .container_12 h2:before{ 59 | content:"Container 12"; 60 | } 61 | 62 | .container_6 h2:before{ 63 | content:"Container 6"; 64 | } 65 | 66 | .grid_12 p:before { 67 | content:"Grid 12"; 68 | } 69 | 70 | .grid_11 p:before { 71 | content:"Grid 11"; 72 | } 73 | 74 | .grid_10 p:before { 75 | content:"Grid 10"; 76 | } 77 | 78 | .grid_9 p:before { 79 | content:"Grid 9"; 80 | } 81 | 82 | .grid_8 p:before { 83 | content:"Grid 8"; 84 | } 85 | 86 | .grid_7 p:before { 87 | content:"Grid 7"; 88 | } 89 | 90 | .grid_6 p:before { 91 | content:"Grid 6"; 92 | } 93 | 94 | .grid_5 p:before { 95 | content:"Grid 5"; 96 | } 97 | 98 | .grid_4 p:before { 99 | content:"Grid 4"; 100 | } 101 | 102 | .grid_3 p:before { 103 | content:"Grid 3"; 104 | } 105 | 106 | .grid_2 p:before { 107 | content:"Grid 2"; 108 | } 109 | 110 | .grid_1 p:before { 111 | content:"Grid 1"; 112 | } 113 | -------------------------------------------------------------------------------- /examples/960gs/css/reset.css: -------------------------------------------------------------------------------- 1 | /* `XHTML, HTML4, HTML5 Reset 2 | ----------------------------------------------------------------------------------------------------*/ 3 | 4 | a, 5 | abbr, 6 | acronym, 7 | address, 8 | applet, 9 | article, 10 | aside, 11 | audio, 12 | b, 13 | big, 14 | blockquote, 15 | body, 16 | canvas, 17 | caption, 18 | center, 19 | cite, 20 | code, 21 | dd, 22 | del, 23 | details, 24 | dfn, 25 | dialog, 26 | div, 27 | dl, 28 | dt, 29 | em, 30 | embed, 31 | fieldset, 32 | figcaption, 33 | figure, 34 | font, 35 | footer, 36 | form, 37 | h1, 38 | h2, 39 | h3, 40 | h4, 41 | h5, 42 | h6, 43 | header, 44 | hgroup, 45 | hr, 46 | html, 47 | i, 48 | iframe, 49 | img, 50 | ins, 51 | kbd, 52 | label, 53 | legend, 54 | li, 55 | main, 56 | mark, 57 | menu, 58 | meter, 59 | nav, 60 | object, 61 | ol, 62 | output, 63 | p, 64 | pre, 65 | progress, 66 | q, 67 | rp, 68 | rt, 69 | ruby, 70 | s, 71 | samp, 72 | section, 73 | small, 74 | span, 75 | strike, 76 | strong, 77 | sub, 78 | summary, 79 | sup, 80 | table, 81 | tbody, 82 | td, 83 | tfoot, 84 | th, 85 | thead, 86 | time, 87 | tr, 88 | tt, 89 | u, 90 | ul, 91 | var, 92 | video, 93 | xmp { 94 | border: 0; 95 | margin: 0; 96 | padding: 0; 97 | font-size: 100%; 98 | } 99 | 100 | html, 101 | body { 102 | height: 100%; 103 | } 104 | 105 | article, 106 | aside, 107 | details, 108 | figcaption, 109 | figure, 110 | footer, 111 | header, 112 | hgroup, 113 | main, 114 | menu, 115 | nav, 116 | section { 117 | /* 118 | Override the default (display: inline) for 119 | browsers that do not recognize HTML5 tags. 120 | 121 | IE8 (and lower) requires a shiv: 122 | http://ejohn.org/blog/html5-shiv 123 | */ 124 | display: block; 125 | } 126 | 127 | b, 128 | strong { 129 | /* 130 | Makes browsers agree. 131 | IE + Opera = font-weight: bold. 132 | Gecko + WebKit = font-weight: bolder. 133 | */ 134 | font-weight: bold; 135 | } 136 | 137 | img { 138 | color: transparent; 139 | font-size: 0; 140 | vertical-align: middle; 141 | /* 142 | For IE. 143 | http://css-tricks.com/ie-fix-bicubic-scaling-for-images 144 | */ 145 | -ms-interpolation-mode: bicubic; 146 | } 147 | 148 | ol, 149 | ul { 150 | list-style: none; 151 | } 152 | 153 | li { 154 | /* 155 | For IE6 + IE7: 156 | 157 | "display: list-item" keeps bullets from 158 | disappearing if hasLayout is triggered. 159 | */ 160 | display: list-item; 161 | } 162 | 163 | table { 164 | border-collapse: collapse; 165 | border-spacing: 0; 166 | } 167 | 168 | th, 169 | td, 170 | caption { 171 | font-weight: normal; 172 | vertical-align: top; 173 | text-align: left; 174 | } 175 | 176 | q { 177 | quotes: none; 178 | } 179 | 180 | q:before, 181 | q:after { 182 | content: ""; 183 | content: none; 184 | } 185 | 186 | sub, 187 | sup, 188 | small { 189 | font-size: 75%; 190 | } 191 | 192 | sub, 193 | sup { 194 | line-height: 0; 195 | position: relative; 196 | vertical-align: baseline; 197 | } 198 | 199 | sub { 200 | bottom: -0.25em; 201 | } 202 | 203 | sup { 204 | top: -0.5em; 205 | } 206 | 207 | svg { 208 | /* 209 | For IE9. Without, occasionally draws shapes 210 | outside the boundaries of rectangle. 211 | */ 212 | overflow: hidden; 213 | } -------------------------------------------------------------------------------- /examples/960gs/css/text.css: -------------------------------------------------------------------------------- 1 | /* 2 | 960 Grid System ~ Text CSS. 3 | Learn more ~ http://960.gs/ 4 | 5 | Licensed under GPL and MIT. 6 | */ 7 | 8 | /* `Basic HTML 9 | ----------------------------------------------------------------------------------------------------*/ 10 | 11 | body { 12 | font: 13px/1.5 "Helvetica Neue", Arial, "Liberation Sans", FreeSans, sans-serif; 13 | } 14 | 15 | pre, 16 | code { 17 | font-family: "DejaVu Sans Mono", Menlo, Consolas, monospace; 18 | } 19 | 20 | hr { 21 | border: 0 solid #ccc; 22 | border-top-width: 1px; 23 | clear: both; 24 | height: 0; 25 | } 26 | 27 | /* `Headings 28 | ----------------------------------------------------------------------------------------------------*/ 29 | 30 | h1 { 31 | font-size: 25px; 32 | } 33 | 34 | h2 { 35 | font-size: 23px; 36 | } 37 | 38 | h3 { 39 | font-size: 21px; 40 | } 41 | 42 | h4 { 43 | font-size: 19px; 44 | } 45 | 46 | h5 { 47 | font-size: 17px; 48 | } 49 | 50 | h6 { 51 | font-size: 15px; 52 | } 53 | 54 | /* `Spacing 55 | ----------------------------------------------------------------------------------------------------*/ 56 | 57 | ol { 58 | list-style: decimal; 59 | } 60 | 61 | ul { 62 | list-style: disc; 63 | } 64 | 65 | li { 66 | margin-left: 30px; 67 | } 68 | 69 | p, 70 | dl, 71 | hr, 72 | h1, 73 | h2, 74 | h3, 75 | h4, 76 | h5, 77 | h6, 78 | ol, 79 | ul, 80 | pre, 81 | table, 82 | address, 83 | fieldset, 84 | figure { 85 | margin-bottom: 20px; 86 | } -------------------------------------------------------------------------------- /examples/960gs/img/12_col.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/960gs/img/12_col.gif -------------------------------------------------------------------------------- /examples/960gs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Intentional 960 Grid System — Demo 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |

14 | Intentional 960 Fluid Grid System 15 |

16 |
17 |

18 | 19 |

20 |
21 |

22 | 23 |

24 |
25 | 26 |
27 |
28 |

29 | 30 |

31 |
32 | 33 |
34 |

35 | 36 |

37 |
38 | 39 |
40 |
41 |

42 | 43 |

44 |
45 | 46 |
47 |

48 | 49 |

50 |
51 | 52 |
53 |
54 |

55 | 56 |

57 |
58 | 59 |
60 |

61 | 62 |

63 |
64 | 65 |
66 |
67 |

68 | 69 |

70 |
71 | 72 |
73 |

74 | 75 |

76 |
77 | 78 |
79 |
80 |

81 | 82 |

83 |
84 | 85 |
86 |

87 | 88 |

89 |
90 | 91 |
92 |
93 |

94 | 95 |

96 |
97 | 98 |
99 |

100 | 101 |

102 |
103 | 104 |
105 |
106 |

107 | 108 |

109 |
110 | 111 |
112 |

113 | 114 |

115 |
116 | 117 |
118 |
119 |

120 | 121 |

122 |
123 | 124 |
125 |

126 | 127 |

128 |
129 | 130 |
131 |
132 |

133 | 134 |

135 |
136 | 137 |
138 |

139 | 140 |

141 |
142 | 143 |
144 |
145 |

146 | 147 |

148 |
149 | 150 |
151 |

152 | 153 |

154 |
155 | 156 |
157 |
158 |

159 | 160 |

161 |
162 | 163 |
164 |

165 | 166 |

167 |
168 | 169 |
170 |
171 | 172 | 173 | 174 | 175 | 176 | 177 | -------------------------------------------------------------------------------- /examples/960gs/main.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | appDir: './', 3 | baseUrl: '../../', 4 | paths: { 5 | jquery: 'test/vendor/jquery', 6 | underscore: 'test/vendor/underscore' 7 | } 8 | }); 9 | 10 | define([ 11 | 'Context' 12 | ]); -------------------------------------------------------------------------------- /examples/animation/img/Brooklyn_Panorama_2_small.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/animation/img/Brooklyn_Panorama_2_small.jpg -------------------------------------------------------------------------------- /examples/animation/img/walking.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/animation/img/walking.png -------------------------------------------------------------------------------- /examples/animation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | animation 78 | 79 | 80 | 81 |
82 |
87 | 88 | 89 |
90 | 146 | 147 | 148 | -------------------------------------------------------------------------------- /examples/animation/testC.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 106 | 107 | 108 | 109 | 110 | 111 | 112 | animation 113 | 114 | 115 | 116 |
117 |
127 | 128 | 129 | 130 | 131 |
132 | 133 | 134 | 203 | 204 | -------------------------------------------------------------------------------- /examples/bootstrap_grid/bootstrap/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/bootstrap_grid/bootstrap/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /examples/bootstrap_grid/bootstrap/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/bootstrap_grid/bootstrap/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /examples/bootstrap_grid/css/intentions_bootstrap.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color:gainsboro; 3 | } 4 | 5 | div[class*="span"] { 6 | background-color:white; 7 | border:1px solid black; 8 | border-radius: 5px 5px; 9 | padding:10px; 10 | 11 | } 12 | 13 | 14 | .span12:before{ 15 | content:"Fluid 12"; 16 | } 17 | 18 | .span6:before{ 19 | content:"Fluid 6"; 20 | } 21 | 22 | .span12~.span12 { 23 | margin:0; 24 | } -------------------------------------------------------------------------------- /examples/bootstrap_grid/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Intentions + Bootstrap 101 Template 5 | 6 | 7 | 8 | 9 | 10 | 11 |

Hello, intentional world!

12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 26 | 27 | 28 | 29 | 30 | -------------------------------------------------------------------------------- /examples/bootstrap_grid/main.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | appDir: './', 3 | baseUrl: '../../', 4 | paths: { 5 | jquery: 'test/vendor/jquery', 6 | underscore: 'test/vendor/underscore' 7 | } 8 | }); 9 | 10 | define([ 11 | 'context' 12 | ]); -------------------------------------------------------------------------------- /examples/bootstrapddd/img/glyphicons-halflings-white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/bootstrapddd/img/glyphicons-halflings-white.png -------------------------------------------------------------------------------- /examples/bootstrapddd/img/glyphicons-halflings.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/bootstrapddd/img/glyphicons-halflings.png -------------------------------------------------------------------------------- /examples/bootstrapddd/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Bootstrap, from Twitter 7 | 8 | 9 | 10 | 11 | 12 | 13 | 31 | 32 | 33 | 34 | 37 | 38 | 39 | 40 | 41 |
42 |
43 |
44 | 53 | Project name 54 |
55 |

56 | Logged in as Username 57 |

58 | 63 |
64 |
65 |
66 |
67 | 68 |
69 |
70 |
71 |
72 | 90 |
91 |
92 |
93 |
94 |

Hello, world!

95 |

This is a template for a simple marketing or informational website. It includes a large callout called the hero unit and three supporting pieces of content. Use it as a starting point to create something more unique.

96 |

Learn more »

97 |
98 |
99 |
100 |

Heading

101 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

102 |

View details »

103 |
104 |
105 |

Heading

106 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

107 |

View details »

108 |
109 |
110 |

Heading

111 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

112 |

View details »

113 |
114 |
115 |
116 |
117 |

Heading

118 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

119 |

View details »

120 |
121 |
122 |

Heading

123 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

124 |

View details »

125 |
126 |
127 |

Heading

128 |

Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui.

129 |

View details »

130 |
131 |
132 |
133 |
134 | 135 |
136 | 137 |
138 |

© Company 2013

139 |
140 | 141 |
142 | 143 | 145 | 146 | 147 | 148 | 149 | 150 | 151 | 152 | 153 | 154 | 155 | 156 | -------------------------------------------------------------------------------- /examples/bootstrapddd/js/Context.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | 3 | 'use strict'; 4 | var context = function($, Intention){ 5 | 6 | function throttle(callback, interval){ 7 | var lastExec = new Date(), 8 | timer = null; 9 | 10 | return function(e){ 11 | var d = new Date(); 12 | if (d-lastExec < interval) { 13 | if (timer) { 14 | window.clearTimeout(timer); 15 | } 16 | var callbackWrapper = function(event){ 17 | return function(){ 18 | callback(event); 19 | }; 20 | }; 21 | timer = window.setTimeout(callbackWrapper(e), interval); 22 | return false; 23 | } 24 | callback(e); 25 | lastExec = d; 26 | }; 27 | } 28 | 29 | if(window.intent === undefined) { 30 | window.intent = new Intention; 31 | } 32 | 33 | // horizontal resize contexts 34 | var resizeContexts = [ 35 | // {name:'luxury', min:900}, 36 | {name:'standard', min:769}, 37 | {name:'tablet', min:321}, 38 | {name:'mobile', min:0}], 39 | // horizontal responsive function 40 | hResponder = intent.responsive(resizeContexts, 41 | // compare the return value of the callback to each context 42 | // return true for a match 43 | function(test, context){ 44 | return test>=context.min 45 | }, 46 | // callback, return value is passed to matcher() 47 | // to compare against current context 48 | function(e){ 49 | return $(window).width(); 50 | }); 51 | // create a base context that is always on 52 | $(window).on('resize', throttle(hResponder, 100)) 53 | .on('orientationchange', hResponder); 54 | 55 | // catchall, false as the second arg suppresses the event being fired 56 | intent.responsive([{name:'base'}])('base') 57 | // touch device? 58 | .responsive([{name:'touch'}], function() { 59 | return "ontouchstart" in window; 60 | })() 61 | // retina display? 62 | .responsive( 63 | // contexts 64 | [{name:'highres'}], 65 | // matching: 66 | function(measure, context){ 67 | return window.devicePixelRatio > 1; 68 | })(); 69 | 70 | // width context 71 | hResponder() 72 | .elements(document); 73 | 74 | return intent; 75 | }; 76 | 77 | (function (root, factory) { 78 | if (typeof define === 'function' && define.amd) { 79 | // AMD. Register as an anonymous module. 80 | define(['jquery', 'Intention'], factory); 81 | } else { 82 | // Browser globals 83 | root.intent = factory(root.jQuery, root.Intention); 84 | } 85 | }(this, function ($, intent) { 86 | return context($, intent); 87 | })); 88 | }).call(this); -------------------------------------------------------------------------------- /examples/bootstrapddd/js/Intention.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | var intentionWrapper = function($, _){ 3 | 4 | var Intention = function(params){ 5 | var intent = $.extend(this, params, 6 | {_listeners:{}, contexts:[], elms:$()}); 7 | 8 | return intent; 9 | }; 10 | 11 | Intention.prototype = { 12 | 13 | // public methods 14 | // TODO: break this function down a bit 15 | responsive:function(contexts, matcher, measure){ 16 | var currentContext; 17 | 18 | // if no matcher function is specified expect to compare a 19 | // string to the ctx.name property 20 | if(_.isFunction(matcher) === false) { 21 | matcher = function(measure, ctx){ 22 | return measure === ctx.name; 23 | }; 24 | } 25 | // check for measure and if not there 26 | // function takes one arg and returns it 27 | if(_.isFunction(measure) === false) { 28 | measure = _.identity; 29 | } 30 | // bind an the respond function to each context name 31 | _.each(contexts, function(ctx){ 32 | this.on(ctx.name, _.bind( 33 | function(){this._respond(this.contexts, this.elms);}, this)); 34 | }, this); 35 | 36 | var responder = _.bind(function(){ 37 | 38 | var measurement = measure.apply(this, arguments); 39 | 40 | _.every(contexts, function(ctx){ 41 | if( matcher(measurement, ctx)) { 42 | // first time, or different than last context 43 | if( (currentContext===undefined) || 44 | (ctx.name !== currentContext.name)){ 45 | currentContext = ctx; 46 | this.contexts = this._contextualize(ctx, contexts, 47 | this.contexts); 48 | // emit the context event 49 | this._emitter($.extend({}, {type:currentContext.name}, 50 | currentContext), this); 51 | 52 | // done, break the loop 53 | return false; 54 | } 55 | // same context, break the loop 56 | return false; 57 | } 58 | return true; 59 | }, this); 60 | // return the intention object for chaining 61 | return this; 62 | 63 | }, this); 64 | // this makes the contexts accessible from the outside world 65 | responder.axis = contexts; 66 | 67 | return responder; 68 | }, 69 | 70 | elements: function(scope){ 71 | 72 | // find all responsive elms in a specific dom scope 73 | if(!scope) scope = document; 74 | 75 | $('[data-intent],[intent],[data-in],[in]', 76 | scope).each(_.bind(function(i, elm){ 77 | this.add($(elm)); 78 | }, this)); 79 | 80 | return this; 81 | }, 82 | 83 | add: function(elms, spec){ 84 | // is expecting a jquery object 85 | elms.each(_.bind(function(i, elm){ 86 | var exists = false; 87 | this.elms.each(function(i, respElm){ 88 | if(elm === respElm) { 89 | exists=true; 90 | return false; 91 | } 92 | }); 93 | 94 | if(exists === false){ 95 | // create the elements responsive data 96 | $(elm).data('intent.spec', 97 | this._fillSpec( 98 | $.extend(true, spec, this._attrsToSpec(elm.attributes)))); 99 | // make any appropriate changes based on the current contexts 100 | this._makeChanges($(elm), this._changes( 101 | $(elm).data('intent.spec'), this.contexts)); 102 | 103 | this.elms.push(elm); 104 | } 105 | 106 | }, this)); 107 | 108 | return this; 109 | }, 110 | 111 | remove: function(elms){ 112 | // is expecting a jquery object 113 | var respElms = this.elms; 114 | // elms to remove 115 | elms.each(function(i, elm){ 116 | // elms to check against 117 | respElms.each(function(i, candidate){ 118 | if(elm === candidate){ 119 | respElms.splice(i, 1); 120 | // found the match, break the loop 121 | return false; 122 | } 123 | }); 124 | }); 125 | return this; 126 | }, 127 | 128 | is: function(ctxName){ 129 | return _.some(this.contexts, function(ctx){ 130 | return ctxName === ctx.name; 131 | }); 132 | }, 133 | 134 | // code and concept taken from simple implementation of 135 | // observer pattern outlined here: 136 | // http://www.nczonline.net/blog/2010/03/09/custom-events-in-javascript/ 137 | on: function(type, listener){ 138 | if(this._listeners[type] === undefined) { 139 | this._listeners[type]=[]; 140 | } 141 | this._listeners[type].push(listener); 142 | }, 143 | 144 | off: function(type, listener){ 145 | if(_.isArray(this._listeners[type])){ 146 | var listeners = this._listeners[type], 147 | i; 148 | for(i=0;listeners.length; i++){ 149 | if(listeners[i] === listener){ 150 | listeners.splice(i,1); 151 | break; 152 | } 153 | } 154 | } 155 | }, 156 | 157 | _emitter: function(event){ 158 | if(typeof event === 'string') { 159 | event={type:event}; 160 | } 161 | if(!event.target){ 162 | event.target=this; 163 | } 164 | if(!event.type){ 165 | throw new Error(event.type + ' is not a supported event.'); 166 | } 167 | if(_.isArray(this._listeners[event.type])){ 168 | var listeners = this._listeners[event.type], 169 | i; 170 | for(i=0; i 2 | 3 | 4 | very simple stylesheet loader 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 49 | 50 | -------------------------------------------------------------------------------- /examples/grid/css/demo-grid-modules.css: -------------------------------------------------------------------------------- 1 | .ux.theme .module > h2 { 2 | font-size:2em; 3 | font-weight:bold; 4 | } 5 | 6 | .ux.theme .module.orange { 7 | background-color:rgba(255,142,0,.2); 8 | } 9 | 10 | .ux.theme .module.green { 11 | background-color:rgba(49,142,0,.2); 12 | } 13 | 14 | .ux.theme .module.pink { 15 | background-color:rgba(255,142,188,.2); 16 | } 17 | 18 | .ux.theme .module.blue { 19 | background-color:rgba(0,142,188,.2); 20 | } 21 | 22 | .ux.theme .module.slimAd { 23 | min-height:50px; 24 | } 25 | 26 | .ux.theme .module.wideAd { 27 | min-height:100px; 28 | } 29 | 30 | .ux.theme .module.squareAd { 31 | min-height:300px; 32 | } 33 | -------------------------------------------------------------------------------- /examples/grid/css/responsivegrid.css: -------------------------------------------------------------------------------- 1 | /* global */ 2 | body { 3 | margin: 0; 4 | } 5 | 6 | /* end global */ 7 | /* module styles */ 8 | .module { 9 | display: block; 10 | overflow: hidden; 11 | } 12 | 13 | .module:not(:last-child) { 14 | margin-bottom: 1rem; 15 | } 16 | 17 | .module:before, 18 | .module:after, 19 | .column:before, 20 | .column:after, 21 | .colgroup:before, 22 | .colgroup:after { 23 | content: ""; 24 | display: block; 25 | height: 0; 26 | overflow: hidden; 27 | } 28 | 29 | .module:after, 30 | .column:after, 31 | .colgroup:after { 32 | clear: both; 33 | } 34 | 35 | /* end module styles */ 36 | /* component styles */ 37 | /* end component styles */ 38 | /* grid */ 39 | .column { 40 | float: left; 41 | margin-left: 1.15%; 42 | /* Margin in a 10-col */ 43 | } 44 | 45 | .column:first-child { 46 | margin-left: 0 !important; 47 | } 48 | 49 | .column + .column:last-child { 50 | float: right; /* <- makes alignment look neater */ 51 | margin-left: 0 !important; /* <- reduces likelihood of inadvertent wrapping */ 52 | } 53 | 54 | .col10wide { 55 | width: 100%; 56 | } 57 | 58 | .col9wide { 59 | width: 89.9%; 60 | } 61 | 62 | .col8wide { 63 | width: 79.7%; 64 | } 65 | 66 | .col7wide { 67 | width: 69.6%; 68 | } 69 | 70 | .col6wide { 71 | width: 59.54%; 72 | } 73 | 74 | .col5wide { 75 | width: 49.4%; 76 | } 77 | 78 | .col4wide { 79 | width: 39.3%; 80 | } 81 | 82 | .col3wide { 83 | width: 29.17%; 84 | } 85 | 86 | .col2wide { 87 | width: 19.06%; 88 | } 89 | 90 | .col1wide { 91 | width: 8.96%; 92 | } 93 | 94 | .placeholder { 95 | display: none !important; 96 | } 97 | 98 | /* Inside a col6wide */ 99 | .col6wide .colgroup > .col3wide { 100 | width: 49.1%; 101 | } 102 | 103 | .col6wide .colgroup > .col2wide { 104 | width: 32%; 105 | } 106 | 107 | .col6wide .colgroup > .column { 108 | margin-left: 2%; /* <- This value is larger than it should be. */ 109 | } 110 | 111 | /* Inside a col4wide */ 112 | .col4wide .colgroup > .col2wide { 113 | width: 48.54%; 114 | } 115 | 116 | .col4wide .colgroup > .column { 117 | margin-left: 2.92%; 118 | } 119 | 120 | .col3wide .column.col3wide { 121 | margin-left: 0 !important; /* <- No column margins in phone view */ 122 | } 123 | 124 | /* reset nested columns */ 125 | .col1wide > .col1wide, 126 | .col2wide > .col2wide, 127 | .col3wide > .col3wide, 128 | .col4wide > .col4wide, 129 | .col5wide > .col5wide, 130 | .col6wide > .col6wide, 131 | .col7wide > .col7wide, 132 | .col8wide > .col8wide, 133 | .col9wide > .col9wide, 134 | .col10wide > .col10wide, 135 | .col11wide > .col11wide, 136 | .col12wide > .col12wide, 137 | .col13wide > .col13wide, 138 | .col14wide > .col14wide, 139 | .col2wide > .colgroup > .col2wide, 140 | .col3wide > .colgroup > .col3wide, 141 | .col4wide > .colgroup > .col4wide, 142 | .col6wide > .colgroup > .col6wide { 143 | width: 100%; 144 | } 145 | 146 | /* handle non-10-col-based contexts */ 147 | .luxury .col14wide, 148 | .tablet .col6wide, 149 | .mobile .col3wide { 150 | width: 100%; 151 | } 152 | 153 | body>.grid { 154 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA78AAAABCAMAAAAhFukwAAAABlBMVEXR0dH///9WxthCAAAAH0lEQVR42u3NIQEAAADCMOhfGkmCu6/AwugZGBhQwQC9YABkomSpkAAAAABJRU5ErkJggg==); 155 | background-size: 100% 100%; 156 | } 157 | 158 | body.tablet>.grid { 159 | background-size: 168% 168%; 160 | } 161 | 162 | body.mobile>.grid { 163 | background-size: 343% 343%; 164 | } 165 | -------------------------------------------------------------------------------- /examples/grid/main.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | appDir: './', 3 | baseUrl: '../../', 4 | // shim: { 5 | // underscore: { 6 | // exports: '_' 7 | // }, 8 | // }, 9 | paths: { 10 | jquery: 'test/vendor/jquery', 11 | underscore: 'test/vendor/underscore' 12 | } 13 | }); 14 | 15 | define([ 16 | 'Context' 17 | ]); -------------------------------------------------------------------------------- /examples/mediaquery_link/css/mobile.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color:green; 3 | } 4 | 5 | body:after{ 6 | content:"Mobile CSS Loaded"; 7 | } 8 | -------------------------------------------------------------------------------- /examples/mediaquery_link/css/standard.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color:blue; 3 | } 4 | 5 | body:after{ 6 | content:"Standard CSS Loaded"; 7 | } 8 | -------------------------------------------------------------------------------- /examples/mediaquery_link/css/tablet.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color:yellow; 3 | } 4 | 5 | body:after{ 6 | content:"Tablet CSS Loaded"; 7 | } 8 | -------------------------------------------------------------------------------- /examples/mediaquery_link/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | very simple media query optimizer 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /examples/mediaquery_link/main.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | appDir: './', 3 | baseUrl: '../../', 4 | paths: { 5 | jquery: 'test/vendor/jquery', 6 | underscore: 'test/vendor/underscore' 7 | } 8 | }); 9 | 10 | define([ 11 | 'context' 12 | ]); -------------------------------------------------------------------------------- /examples/orientation/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | orientation 5 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /examples/performance/img/src.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/performance/img/src.jpg -------------------------------------------------------------------------------- /examples/performance/img/tn-src.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/performance/img/tn-src.jpg -------------------------------------------------------------------------------- /examples/performance/img/tn-src2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/performance/img/tn-src2.jpg -------------------------------------------------------------------------------- /examples/performance/img/tn-src3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/performance/img/tn-src3.jpg -------------------------------------------------------------------------------- /examples/performance/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | image loading performance test 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 22 | 23 | -------------------------------------------------------------------------------- /examples/scrolldepth/img/FT.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/FT.jpg -------------------------------------------------------------------------------- /examples/scrolldepth/img/S1.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/S1.JPG -------------------------------------------------------------------------------- /examples/scrolldepth/img/S2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/S2.jpg -------------------------------------------------------------------------------- /examples/scrolldepth/img/S3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/S3.jpg -------------------------------------------------------------------------------- /examples/scrolldepth/img/S4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/S4.jpg -------------------------------------------------------------------------------- /examples/scrolldepth/img/S5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/S5.jpg -------------------------------------------------------------------------------- /examples/scrolldepth/img/Untitled-1.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/Untitled-1.psd -------------------------------------------------------------------------------- /examples/scrolldepth/img/f1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/f1.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/f2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/f2.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/f3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/f3.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/f4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/f4.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/f5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/f5.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/fis.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/fis.ai -------------------------------------------------------------------------------- /examples/scrolldepth/img/fish1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/fish1.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/fish2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/fish2.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/fish3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/fish3.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/fish4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/fish4.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/fish5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/fish5.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/fish_tank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/fish_tank.jpg -------------------------------------------------------------------------------- /examples/scrolldepth/img/moire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/moire.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/moire.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/moire.psd -------------------------------------------------------------------------------- /examples/scrolldepth/img/ob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/ob.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/obst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/obst.png -------------------------------------------------------------------------------- /examples/scrolldepth/img/tank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/scrolldepth/img/tank.jpg -------------------------------------------------------------------------------- /examples/scrolldepth/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 105 | 106 | 107 |
109 |
110 | 111 |
112 | 113 |

120 | a 123 | b 126 | c 129 | 130 |

131 | 132 |

137 | 138 | 139 | 142 | 143 | -------------------------------------------------------------------------------- /examples/scrolldepth/scrolldepth.js: -------------------------------------------------------------------------------- 1 | (function($){ 2 | 3 | if(!window.localStorage.getItem('visits')){ 4 | window.localStorage.setItem('visits', 0); 5 | } 6 | 7 | var visits = parseInt(window.localStorage.getItem('visits'), 10) + 1; 8 | window.localStorage.setItem('visits', visits); 9 | 10 | var tn = new Intention, 11 | resizeContexts = [ 12 | {name:'standard', min:769}, 13 | {name:'tablet', min:521}, 14 | {name:'mobile', min:0}], 15 | baseResponder = tn.responsive([{name:'base'}]).respond('base'), 16 | hResponder = tn.responsive({ 17 | contexts: resizeContexts, 18 | matcher: function(test, context){ 19 | return test>=context.min; 20 | }, 21 | measure: function(){ 22 | return $(window).width(); 23 | } 24 | }).respond; 25 | 26 | hResponder(); 27 | 28 | $(window).on('resize', hResponder); 29 | // visitTracker(); 30 | 31 | var visitTracker = tn.responsive({ 32 | ID:'visits', 33 | contexts:[ 34 | {name: 'frequenter', visits:5}, 35 | {name:'returning', visits:2}, 36 | {name:'first', visits:1}], 37 | matcher: function(measure, ctx){ 38 | return measure >= ctx.visits; 39 | }, 40 | measure: function(){ 41 | return parseInt(window.localStorage.getItem('visits')); 42 | } 43 | }).respond; 44 | 45 | var depthTracker = tn.responsive({ 46 | ID:'depth', 47 | contexts:[ 48 | {name: 'shallow', depth:25}, 49 | {name:'beyond', depth:Infinity}], 50 | matcher: function(measure, ctx){ 51 | return measure < ctx.depth; 52 | }, 53 | measure: function(){ 54 | return window.pageYOffset; 55 | } 56 | }).respond; 57 | 58 | depthTracker(); 59 | 60 | $(window).on('scroll', depthTracker); 61 | 62 | 63 | 64 | var flipper = tn.responsive({ 65 | ID:'depth', 66 | contexts:[ 67 | {name: 'f1', div:0}, 68 | {name:'f2', div:1}, 69 | {name:'f3', div:2}, 70 | {name:'f4', div:3}], 71 | matcher: function(measure, ctx){ 72 | if((Math.floor(measure/100) % 4) === ctx.div) return true; 73 | return false; 74 | }, 75 | measure: function(){ 76 | return window.pageYOffset; 77 | } 78 | 79 | }).respond; 80 | 81 | flipper(); 82 | 83 | $(window).on('scroll', flipper); 84 | 85 | tn.elements(); 86 | })(jQuery) 87 | -------------------------------------------------------------------------------- /examples/scrolldepth/slideshow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 345 | 346 | 347 | 348 | 349 | 350 | 355 | 356 |

364 | 365 |

373 | 374 |

382 | 383 |

391 | 392 |

400 | 401 | 405 | 406 |
407 |
415 | 416 |
417 | How many fish can you tap at once? 418 |
419 | 420 |
421 | 422 |
423 | 424 |
425 | 426 |
427 | 428 |
429 |
430 | 431 | 432 |
Garibaldi Damselfish 433 |
434 | 435 |
GloFish 436 |
437 | 438 |
Cherub Fish 439 |
440 | 441 |
Koi Fish 442 |
443 | 444 |
Gold Fish 445 |
446 | 447 |
448 |
449 | 450 | 519 | 520 | 521 | 522 | 523 | 524 | -------------------------------------------------------------------------------- /examples/scrolldepth/ss2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 292 | 293 | 294 | 295 | 296 | 297 |
302 | 303 |

1

308 | 309 |

2

314 | 315 |

3

320 | 321 |

4

326 | 327 |

5

332 |
333 | 334 |
335 |
343 | 344 |
345 | How many fish can you tap at once? 346 |
347 | 348 |
356 |
357 | 358 | 359 |
367 |
368 | 369 |
377 |
378 | 379 |
387 |
388 | 389 |
397 |
398 |
399 | 400 | 401 |
Garibaldi Damselfish 402 |
403 | 404 |
GloFish 405 |
406 | 407 |
Cherub Fish 408 |
409 | 410 |
Koi Fish 411 |
412 | 413 |
Gold Fish 414 |
415 | 416 |
417 |
418 | 419 | 488 | 489 | 490 | 491 | 492 | 493 | -------------------------------------------------------------------------------- /examples/scrolldepth/testCM.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 235 | 236 | 237 | 238 |
242 |
243 | 244 | 245 | 246 |
250 |
251 | 317 | 318 |
323 | 324 | 325 | 326 | 327 | 328 | -------------------------------------------------------------------------------- /examples/scrolldepth/touch.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 219 | 220 | 221 | 222 | 223 | 224 |
225 | 226 |

1

231 | 232 |

2

237 | 238 |

3

243 | 244 |

4

249 | 250 |

5

255 |
256 | 257 |
258 |
265 | 266 |
1
267 |
2
268 |
3
269 |
4
270 |
5
271 | 272 |
273 |
274 | 275 | 347 | 348 | 349 | 350 | 351 | 352 | -------------------------------------------------------------------------------- /examples/touch/img/FT.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/FT.jpg -------------------------------------------------------------------------------- /examples/touch/img/S1.JPG: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/S1.JPG -------------------------------------------------------------------------------- /examples/touch/img/S2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/S2.jpg -------------------------------------------------------------------------------- /examples/touch/img/S3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/S3.jpg -------------------------------------------------------------------------------- /examples/touch/img/S4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/S4.jpg -------------------------------------------------------------------------------- /examples/touch/img/S5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/S5.jpg -------------------------------------------------------------------------------- /examples/touch/img/Untitled-1.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/Untitled-1.psd -------------------------------------------------------------------------------- /examples/touch/img/f1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/f1.png -------------------------------------------------------------------------------- /examples/touch/img/f2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/f2.png -------------------------------------------------------------------------------- /examples/touch/img/f3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/f3.png -------------------------------------------------------------------------------- /examples/touch/img/f4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/f4.png -------------------------------------------------------------------------------- /examples/touch/img/f5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/f5.png -------------------------------------------------------------------------------- /examples/touch/img/fis.ai: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/fis.ai -------------------------------------------------------------------------------- /examples/touch/img/fish1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/fish1.png -------------------------------------------------------------------------------- /examples/touch/img/fish2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/fish2.png -------------------------------------------------------------------------------- /examples/touch/img/fish3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/fish3.png -------------------------------------------------------------------------------- /examples/touch/img/fish4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/fish4.png -------------------------------------------------------------------------------- /examples/touch/img/fish5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/fish5.png -------------------------------------------------------------------------------- /examples/touch/img/fish_tank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/fish_tank.jpg -------------------------------------------------------------------------------- /examples/touch/img/moire.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/moire.png -------------------------------------------------------------------------------- /examples/touch/img/moire.psd: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/moire.psd -------------------------------------------------------------------------------- /examples/touch/img/ob.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/ob.png -------------------------------------------------------------------------------- /examples/touch/img/obst.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/obst.png -------------------------------------------------------------------------------- /examples/touch/img/tank.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/touch/img/tank.jpg -------------------------------------------------------------------------------- /examples/touch/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 219 | 220 | 221 | 222 | 223 | 224 |
225 | 226 |

1

231 | 232 |

2

237 | 238 |

3

243 | 244 |

4

249 | 250 |

5

255 |
256 | 257 |
258 |
265 | 266 |
1
267 |
2
268 |
3
269 |
4
270 |
5
271 | 272 |
273 |
274 | 275 | 347 | 348 | 349 | 350 | 351 | 352 | -------------------------------------------------------------------------------- /examples/touch/slideshow.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 345 | 346 | 347 | 348 | 349 | 350 | 355 | 356 |

364 | 365 |

373 | 374 |

382 | 383 |

391 | 392 |

400 | 401 | 405 | 406 |
407 |
415 | 416 |
417 | How many fish can you tap at once? 418 |
419 | 420 |
421 | 422 |
423 | 424 |
425 | 426 |
427 | 428 |
429 |
430 | 431 | 432 |
Garibaldi Damselfish 433 |
434 | 435 |
GloFish 436 |
437 | 438 |
Cherub Fish 439 |
440 | 441 |
Koi Fish 442 |
443 | 444 |
Gold Fish 445 |
446 | 447 |
448 |
449 | 450 | 528 | 529 | 530 | 531 | 532 | 533 | -------------------------------------------------------------------------------- /examples/touch/testCM.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 235 | 236 | 237 | 238 |
242 |
243 | 244 | 245 | 246 |
250 |
251 | 317 | 318 |
323 | 324 | 325 | 326 | 327 | 328 | -------------------------------------------------------------------------------- /examples/wsj/css/html5reset.css: -------------------------------------------------------------------------------- 1 | /* 2 | HTML5 Reset :: style.css 3 | ---------------------------------------------------------- 4 | We have learned much from/been inspired by/taken code where offered from: 5 | 6 | Eric Meyer :: http://ericmeyer.com 7 | HTML5 Doctor :: http://html5doctor.com 8 | and the HTML5 Boilerplate :: http://html5boilerplate.com 9 | 10 | -------------------------------------------------------------------------------*/ 11 | 12 | /* Let's default this dog out 13 | -------------------------------------------------------------------------------*/ 14 | 15 | html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, menu, time, mark, audio, video { 16 | margin: 0; 17 | padding: 0; 18 | border: 0; 19 | outline: 0; 20 | font-size: 100%; 21 | font-weight: normal; 22 | font-style: normal; 23 | vertical-align: baseline; 24 | background: transparent; 25 | } 26 | 27 | article, aside, figure, footer, header, hgroup, nav, section {display: block;} 28 | 29 | /* Responsive images and other embedded objects 30 | Note: keeping IMG here will cause problems if you're using foreground images as sprites, like, say for Google Maps custom placemarkers. 31 | There has been a report of problems with standard Google maps as well, but we haven't been able to duplicate or diagnose the issue. */ 32 | img, 33 | object, 34 | embed {max-width: 100%;} 35 | 36 | /* force a vertical scrollbar to prevent a jumpy page */ 37 | html {overflow-y: scroll;} 38 | 39 | /* we use a lot of ULs that aren't bulleted. 40 | don't forget to restore the bullets within content. */ 41 | ul, menu {list-style: none;} 42 | 43 | blockquote, q {quotes: none;} 44 | 45 | blockquote:before, 46 | blockquote:after, 47 | q:before, 48 | q:after {content: ''; content: none;} 49 | 50 | a {margin: 0; padding: 0; font-size: 100%; vertical-align: baseline; background: transparent;} 51 | 52 | del {text-decoration: line-through;} 53 | 54 | abbr[title], dfn[title] {border-bottom: 1px dotted #000; cursor: help;} 55 | 56 | /* tables still need cellspacing="0" in the markup */ 57 | table {border-collapse: collapse; border-spacing: 0;} 58 | th {vertical-align: bottom;} 59 | td {font-weight: normal; vertical-align: top;} 60 | 61 | hr {display: block; height: 1px; border: 0; border-top: 1px solid #ccc; margin: 1rem 0; padding: 0;} 62 | 63 | input, select {vertical-align: middle;} 64 | 65 | pre { 66 | white-space: pre; /* CSS2 */ 67 | white-space: pre-wrap; /* CSS 2.1 */ 68 | white-space: pre-line; /* CSS 3 (and 2.1 as well, actually) */ 69 | word-wrap: break-word; /* IE */ 70 | } 71 | 72 | input[type="radio"] {vertical-align: text-bottom;} 73 | input[type="checkbox"] {vertical-align: bottom; *vertical-align: baseline;} 74 | 75 | /* 76 | select, input, textarea {font: 99% sans-serif;} 77 | */ 78 | 79 | table {font-size: inherit; font: 100%;} 80 | 81 | /* Accessible focus treatment 82 | people.opera.com/patrickl/experiments/keyboard/test */ 83 | a:hover, a:active {outline: none;} 84 | 85 | strong {font-weight: bold;} 86 | 87 | em {font-style: italic;} 88 | 89 | td, td img {vertical-align: top;} 90 | 91 | /* Make sure sup and sub don't screw with your line-heights 92 | gist.github.com/413930 */ 93 | sub, sup {font-size: 75%; line-height: 0; position: relative;} 94 | sup {top: -0.5rem;} 95 | sub {bottom: -0.25rem;} 96 | 97 | /* standardize any monospaced elements */ 98 | pre, code, kbd, samp {font-family: monospace, sans-serif;} 99 | 100 | /* hand cursor on clickable elements */ 101 | input[type=button], 102 | input[type=submit], 103 | button {cursor: pointer;} 104 | 105 | /* Webkit browsers add a 2px margin outside the chrome of form elements */ 106 | button, input, select, textarea {margin: 0; padding: 0;} 107 | 108 | -------------------------------------------------------------------------------- /examples/wsj/css/responsivegrid.css: -------------------------------------------------------------------------------- 1 | /* global */ 2 | body { 3 | margin: 0; 4 | } 5 | 6 | /* end global */ 7 | /* module styles */ 8 | .module { 9 | display: block; 10 | overflow: hidden; 11 | } 12 | 13 | .module:not(:last-child) { 14 | margin-bottom: 1rem; 15 | } 16 | 17 | .module:before, 18 | .module:after, 19 | .column:before, 20 | .column:after, 21 | .colgroup:before, 22 | .colgroup:after { 23 | content: ""; 24 | display: block; 25 | height: 0; 26 | overflow: hidden; 27 | } 28 | 29 | .module:after, 30 | .column:after, 31 | .colgroup:after { 32 | clear: both; 33 | } 34 | 35 | /* end module styles */ 36 | /* component styles */ 37 | /* end component styles */ 38 | /* grid */ 39 | .column { 40 | float: left; 41 | margin-left: 1.15%; 42 | /* Margin in a 10-col */ 43 | } 44 | 45 | .column:first-child { 46 | margin-left: 0 !important; 47 | } 48 | 49 | .column + .column:last-child { 50 | float: right; /* <- makes alignment look neater */ 51 | margin-left: 0 !important; /* <- reduces likelihood of inadvertent wrapping */ 52 | } 53 | 54 | .col10wide { 55 | width: 100%; 56 | } 57 | 58 | .col9wide { 59 | width: 89.9%; 60 | } 61 | 62 | .col8wide { 63 | width: 79.7%; 64 | } 65 | 66 | .col7wide { 67 | width: 69.6%; 68 | } 69 | 70 | .col6wide { 71 | width: 59.54%; 72 | } 73 | 74 | .col5wide { 75 | width: 49.4%; 76 | } 77 | 78 | .col4wide { 79 | width: 39.3%; 80 | } 81 | 82 | .col3wide { 83 | width: 29.17%; 84 | } 85 | 86 | .col2wide { 87 | width: 19.06%; 88 | } 89 | 90 | .col1wide { 91 | width: 8.96%; 92 | } 93 | 94 | .placeholder { 95 | display: none !important; 96 | } 97 | 98 | /* Inside a col6wide */ 99 | .col6wide .colgroup > .col3wide { 100 | width: 49.1%; 101 | } 102 | 103 | .col6wide .colgroup > .col2wide { 104 | width: 32%; 105 | } 106 | 107 | .col6wide .colgroup > .column { 108 | margin-left: 2%; /* <- This value is larger than it should be. */ 109 | } 110 | 111 | /* Inside a col4wide */ 112 | .col4wide .colgroup > .col2wide { 113 | width: 48.54%; 114 | } 115 | 116 | .col4wide .colgroup > .column { 117 | margin-left: 2.92%; 118 | } 119 | 120 | .col3wide .column.col3wide { 121 | margin-left: 0 !important; /* <- No column margins in phone view */ 122 | } 123 | 124 | /* reset nested columns */ 125 | .col1wide > .col1wide, 126 | .col2wide > .col2wide, 127 | .col3wide > .col3wide, 128 | .col4wide > .col4wide, 129 | .col5wide > .col5wide, 130 | .col6wide > .col6wide, 131 | .col7wide > .col7wide, 132 | .col8wide > .col8wide, 133 | .col9wide > .col9wide, 134 | .col10wide > .col10wide, 135 | .col11wide > .col11wide, 136 | .col12wide > .col12wide, 137 | .col13wide > .col13wide, 138 | .col14wide > .col14wide, 139 | .col2wide > .colgroup > .col2wide, 140 | .col3wide > .colgroup > .col3wide, 141 | .col4wide > .colgroup > .col4wide, 142 | .col6wide > .colgroup > .col6wide { 143 | width: 100%; 144 | } 145 | 146 | /* handle non-10-col-based contexts */ 147 | .luxury .col14wide, 148 | .tablet .col6wide, 149 | .mobile .col3wide { 150 | width: 100%; 151 | } 152 | 153 | body>.grid { 154 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA78AAAABCAMAAAAhFukwAAAABlBMVEXR0dH///9WxthCAAAAH0lEQVR42u3NIQEAAADCMOhfGkmCu6/AwugZGBhQwQC9YABkomSpkAAAAABJRU5ErkJggg==); 155 | background-size: 100% 100%; 156 | } 157 | 158 | body.tablet>.grid { 159 | background-size: 168% 168%; 160 | } 161 | 162 | body.mobile>.grid { 163 | background-size: 343% 343%; 164 | } 165 | -------------------------------------------------------------------------------- /examples/wsj/css/rw-general.css: -------------------------------------------------------------------------------- 1 | figure.imgType-D { 2 | max-width: 100%; 3 | } 4 | 5 | figure.imgType-A { 6 | max-width: 29.17%; 7 | } 8 | 9 | figure img { 10 | height: auto; 11 | } 12 | 13 | h3.section { 14 | font-size: 1.2em; 15 | font-family: Arial, Helvetica, sans-serif; 16 | padding: .8rem .8rem .6rem .8rem; 17 | display: block; 18 | background-color: #eee; 19 | font-weight: bold; 20 | border-bottom: 1px dotted #999; 21 | text-transform: uppercase; 22 | } 23 | 24 | .type-search h3.section { 25 | background-color: #e4e1d9; 26 | } 27 | 28 | h3.section a { 29 | color: #333; 30 | } 31 | 32 | h3.section a:before { 33 | content: "//"; 34 | margin: 0 .67em 0 .33em; 35 | } 36 | 37 | h3.section a:first-child:before { 38 | content: ""; 39 | margin: 0; 40 | } 41 | 42 | .sectionsBox { 43 | background-color: #f6f4ee; 44 | } 45 | 46 | .sectionsBox h3.section { 47 | background-color: transparent; 48 | /* 49 | text-transform: uppercase; 50 | */ 51 | padding: .8rem 0 .6rem 0; 52 | margin: 0 .8rem 0 .8rem; 53 | } 54 | 55 | .content.module.announcement { 56 | background-color: #ffffff; 57 | } 58 | 59 | .content.module.announcement > h4 { 60 | padding: 0.8rem 0.8rem 0.8rem 0.8rem; 61 | border-bottom: 0.1rem dotted #ccc; 62 | font-size: 1.4rem; 63 | color: #e36627; 64 | font-weight: bold; 65 | } 66 | 67 | .content.module.announcement > h4 > a { 68 | text-transform: uppercase; 69 | font-weight: normal; 70 | font-size: 1.1rem; 71 | margin-left: 0.5em; 72 | } 73 | 74 | .content.module.announcement > h4 > a:after { 75 | content: "»"; 76 | font-size: 1.1rem; 77 | margin-left: 0.333em; 78 | position: relative; 79 | top: -.1rem; 80 | } 81 | 82 | .content.module.announcement > h4 > a:after { 83 | content: "»"; 84 | font-size: 1.1rem; 85 | margin-left: 0.333em; 86 | position: relative; 87 | top: -.1rem; 88 | } 89 | 90 | .content.module nav.sectional > ul { 91 | -webkit-column-count: 2; 92 | -webkit-column-gap: 1rem; 93 | padding: 1.2rem .8rem; 94 | } 95 | 96 | .content.module nav.sectional > ul > li { 97 | font-size: 1.6em; 98 | line-height: 1em; 99 | font-weight: bold; 100 | margin-bottom: 1.6rem; 101 | display: block; 102 | -webkit-column-break-inside: avoid; 103 | } 104 | 105 | .content.module nav.sectional > ul > li.active a { 106 | color: #e36627; 107 | } 108 | 109 | .content.module nav.sectional > ul > li.active a:before { 110 | content: "»"; 111 | margin-right: .333em; 112 | } 113 | 114 | .content.module nav.table > ul > li { 115 | border-bottom: 0.15rem solid #999; 116 | font-size: 1.3rem; 117 | } 118 | 119 | .content.module nav.table > ul > li > a { 120 | font-weight: bold; 121 | display: block; 122 | padding: 1rem 0 .8rem .8rem; 123 | color: #333; 124 | } 125 | 126 | .content.module blockquote { 127 | font-size: 1.86em; 128 | line-height: 1.333em; 129 | color: #333; 130 | margin: 1rem 2rem 1rem 2rem; 131 | } 132 | 133 | .content.module a.loadMoreLink { 134 | font-family: Arial, Helvetica, sans-serif; 135 | font-style: italic; 136 | display: block; 137 | padding: 2rem 0 2rem .8rem; 138 | font-size: 1.6em; 139 | line-height: 1em; 140 | position: relative; 141 | text-align: center; 142 | } 143 | 144 | .content.module a.loadMoreLink:after { 145 | /* 146 | content: "..."; 147 | */ 148 | content: "\2026;"; 149 | padding-left: .25em; 150 | } 151 | 152 | .pageFrame > footer, 153 | .pageFrame > div > footer, 154 | .pageFrame .sliderBox > div > footer { 155 | background-color: #f1eee4; 156 | position: relative; 157 | } 158 | 159 | .pageFrame > footer:before, 160 | .pageFrame > div > footer:before, 161 | .pageFrame .sliderBox > div > footer:before { 162 | content: ""; 163 | position: absolute; 164 | top: -.1rem; 165 | display: block; 166 | width: 100%; 167 | height: .1rem; 168 | background-color: #999; 169 | border-top: .2rem solid #ccc; 170 | } 171 | 172 | .footplate.module nav .navLinks { 173 | -webkit-column-count: 2; 174 | -webkit-column-gap: .8rem; 175 | margin: 1rem .8rem 0 .8rem; 176 | } 177 | 178 | .footplate.module .footerOps { 179 | font-size: 1.2em; 180 | border-bottom: 1px dotted #999; 181 | margin: .8rem; 182 | padding-bottom: .8rem; 183 | } 184 | 185 | .footplate.module .footerOps:after { 186 | content: ""; 187 | display: block; 188 | height: 0; 189 | clear: both; 190 | visibility: hidden; 191 | font-size: 0; 192 | } 193 | 194 | .footplate.module .footerOps .editionSwitch { 195 | float: left; 196 | } 197 | 198 | .footplate.module .footerOps .fontSwitch { 199 | float: right; 200 | } 201 | 202 | .footplate.module .footerOps .editionSwitch label, 203 | .footplate.module .footerOps .fontSwitch label { 204 | font-weight: bold; 205 | padding: .5rem .75rem 0 0; 206 | float: left; 207 | } 208 | 209 | .footplate.module .footerOps .editionSwitch select, 210 | .footplate.module .footerOps .fontSwitch select { 211 | float: left; 212 | border: .15rem solid #999; 213 | background-color: #FFFFFF; 214 | padding: .5rem 2rem .5rem .5rem; 215 | -webkit-appearance: none; 216 | -webkit-border-radius: 0; 217 | background-repeat: no-repeat; 218 | background-position: 90% center; 219 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAKCAYAAABrGwT5AAAAgklEQVR42pXLMQrCMBSA4QdCDlDwAJ0CHqOTB3DtKvQqhdzDyak3cM3kDcShq5NTIP3fUAiByHP4pp9f3lfvcEf800VnNSAhGz1w0HE3G8cPekg5O0TDPELqWXl8f4w3SGtWU2N8oWvNpaUaEwaIZT5iLeYAsc7qjIwnnGWuBZxafQN45htdj3eT5AAAAABJRU5ErkJggg=="); 220 | background-size: .75rem .5rem; 221 | } 222 | 223 | .footplate.module .footerOps .editionSwitch select > option, 224 | .footplate.module .footerOps .fontSwitch select > option { 225 | font-weight: bold; 226 | font-size: 1.2em; 227 | font-family: Arial, Helvetica, sans-serif; 228 | } 229 | 230 | .footplate.module .folio { 231 | padding: 0.8rem; 232 | text-align: center; 233 | } 234 | 235 | .footplate.module .folio > p { 236 | font-size: 1.2em; 237 | margin-bottom: 1rem; 238 | } 239 | 240 | .footplate.module .folio > p .welcome { 241 | font-style: normal; 242 | font-weight: bold; 243 | } 244 | 245 | .footplate.module .folio > p .welcome a { 246 | color: #e36627; 247 | } 248 | 249 | .footplate.module .folio > p .loginOps:not(:first-child):before { 250 | content: "|"; 251 | margin: 0 .67rem 0 .67rem; 252 | } 253 | 254 | .footplate.module .folio > p .loginOps a { 255 | font-weight: bold; 256 | color: #004176; 257 | } 258 | 259 | .footplate.module .folio > small { 260 | font-size: 1em; 261 | } 262 | 263 | .footplate.module nav ul li a { 264 | color: #004176; 265 | } 266 | 267 | .footplate.module .folio nav ul { 268 | display: inline-block; 269 | margin: .8rem auto 0 auto; 270 | } 271 | 272 | .footplate.module .folio nav ul > li { 273 | display: inline-block; 274 | float: left; 275 | font-size: 1.2em; 276 | } 277 | 278 | .footplate.module .folio nav ul > li:after { 279 | content: "|"; 280 | padding: 0 .8rem 0 .8rem; 281 | } 282 | 283 | .footplate.module .folio nav ul > li:last-child:after { 284 | content: ""; 285 | padding: 0; 286 | } 287 | 288 | .footplate.module .searchBar { 289 | background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f3ed), color-stop(.1, #ebe8de), to(#f5f2ec)); 290 | } 291 | 292 | .footplate.module .searchBar > .searchContents { 293 | position: relative; 294 | padding: 1.1rem 3.9rem 1rem 0.9rem; 295 | text-align: center; 296 | } 297 | 298 | .footplate.module .searchBar > .searchContents input[type="search"] { 299 | width: 26rem; 300 | font-size: 1.4em; 301 | /* <- Safari search fields are only allowed to have three sizes: small, medium and large. Anything 16px and over is large. */ 302 | border: .15rem solid #b9b9b9; 303 | border-radius: 1.8rem; 304 | -webkit-box-shadow: inset 0 .15rem .5rem rgba(0,0,0,0.33); 305 | -webkit-appearance: none; 306 | padding: .5rem .9rem; 307 | } 308 | 309 | .footplate.module .searchBar > .searchContents .searchButton { 310 | border: none; 311 | text-indent: -9999rem; 312 | background-color: transparent; 313 | position: absolute; 314 | right: 1.2rem; 315 | top: 1.2rem; 316 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAArCAYAAADhXXHAAAAC/0lEQVR42s3XUWQbcRzA8XKEI4zQpzKOPpVSSuhTn0oJpZQySp9CKaWMMvZUwhijlFBipYRQRhhlZEqnhFL6VKuFUG3FbsvcpEv33zfk+Pu5ddf/XdZ7+BCXf36+7v7JXYY+fXwbRgo5FFHHGRRc1PEBG3Aw9BBKqdD+NSyD1/CgQqpj9n/HrsGFMlSDM+hYG6V7Ipqoo4xD1NGFCtDC9KBiUziCEtooYDJoCMefYKEfr4QuFuOPDT6jJQwHfHj4L+E5XIoZHibijF0NOCOr/sLfd3c21nEEpbnEFka14BEci3kNZOKIHUFbH66Hdn/dTqEBdY8OXoitcS5mbscR+0Zeen/BbcebRQcqpKIWPIa2uFpPo8TaYmDb36M/vW8jcKEeKK8FF6A0m1Fin4lhBf/NH+1WCcrANdL92Aw8sXeNY4sidrz3xnf3yoYHZSjfj+2pQmkc09gT/QffH/C11cxBBXBRRREHaEIF2NNiV0TsnGlsSxty4A9o3XxZgdIcYRGWHMKxMWyhra0/1GKnROyaUay4VZb9ATdXn1egcIyZMMNYl0EB1/igxToidsMoVmz+qj/g+vLcgtN7bYLPprXYcRG7bhrbFI93YpE5LXZGxC6ZxtbEPdweQOyGiJ0yjZU/2rkBxB6KE5IyjZ0WsRUMxWhMfInfR7kpWLgQwRMxxlbE7PmoDzLLYuAJ7BhCFwIeE62osRbOxOByxNAJePLOFdfDdxYdKLG/0gahcwHPx+/i/luzDCVcYDlkpIMdqAAuslFjpedQARp4hVlMwobTf72EfXFl7gt2sI2USay0AA8qogM0ZbB2bB8pk1hpHMeGkS7y/tYQwVIFKdNYaR5VdEJENrCOdMBebpgEy9iw0v3wlyiigmLfGkbF+jCxMtgyiI3dpggzCBaxA1aMFixjB28nZHAZVlBsooNl7GMohQzegyVikx8sYhMdvJuEWOsBwfnHipTBuyFiTx89lssbNthLQmzY4FoSYmXwHpTQRTYpsTJ6FafwUEO2d/wPc9idzGOb5qcAAAAASUVORK5CYII=); 317 | background-repeat: no-repeat; 318 | width: 2.2rem; 319 | height: 2.2rem; 320 | background-size: 2.15rem 2.15rem; 321 | background-position: center center; 322 | -webkit-tap-highlight-color: rgba(0,0,0,0); 323 | } 324 | 325 | .continuation { 326 | text-align: center; 327 | /* 328 | border: none; 329 | */ 330 | border-top: 1px dotted #999; 331 | } 332 | 333 | .continuation p { 334 | font-size: 1.4em; 335 | } 336 | 337 | .continuation a { 338 | display: block; 339 | padding: 1.4rem; 340 | /* color: #ff99ff; */ 341 | text-transform: uppercase; 342 | font-weight: bold; 343 | } 344 | 345 | @media all { 346 | .pageFrame { 347 | /* 348 | width: 320px; 349 | */ 350 | margin: 0 auto 0 auto; 351 | } 352 | 353 | /* This prevents the user from being able to select text */ 354 | 355 | /* div { 356 | 357 | -webkit-user-select: none; 358 | } 359 | */ 360 | 361 | input[type="search"]:focus { 362 | outline-width: 0; 363 | } 364 | 365 | body.fontSize-small .module .articleBody p { 366 | font-size: 1.28em; 367 | } 368 | 369 | body.fontSize-large .module .articleBody p { 370 | font-size: 2.4em; 371 | } 372 | 373 | body.fontSize-small .module .hedSumm p { 374 | font-size: 1em; 375 | } 376 | 377 | body.fontSize-large .module .hedSumm p { 378 | font-size: 2em; 379 | } 380 | } 381 | 382 | @media all { 383 | html { 384 | font-size: 10px; 385 | } 386 | } 387 | 388 | @media all and (orientation:landscape) { 389 | html { 390 | -webkit-text-size-adjust: none; 391 | } 392 | 393 | html:not(.orientation-portrait) { /* <- The :not() is to work around Android's insane triggering of portrait mode when the keyboard is invoked. */ 394 | font-size: 6.667px; 395 | } 396 | } 397 | 398 | @media all and (device-width: 768px) and (device-height: 1024px) { 399 | /* These styles will apply to tablets with iPad's resolution only. */ 400 | html { 401 | font-size: 12.5px; 402 | } 403 | 404 | .module.set figure.imgType-D, 405 | article.module figure.imgType-D { 406 | float: left; 407 | margin-right: 1.9rem; 408 | } 409 | 410 | .module.set figure.imgType-D + h2, 411 | article.module figure.imgType-D + h2 { 412 | margin-top: 1.6rem; 413 | } 414 | } 415 | -------------------------------------------------------------------------------- /examples/wsj/css/rw-hedSumm.css: -------------------------------------------------------------------------------- 1 | .hedSumm { 2 | font-family: Arial, Helvetica, sans-serif; 3 | padding: .7rem .8rem .8rem; 4 | } 5 | 6 | .hedSumm:first-child { 7 | border: none; 8 | } 9 | 10 | .hedSumm h2 { 11 | font-family: Georgia, "Century Schoolbook", "Times New Roman", Times, serif; 12 | font-size: 1.4em; 13 | line-height: 1.1em; 14 | color: #333; 15 | font-weight: bold; 16 | } 17 | 18 | .hedType-large .hedSumm h2 { 19 | font-size: 2.1em; 20 | font-weight: normal; 21 | } 22 | 23 | .setList.type-search .hedSumm h2 { 24 | font-size: 1.8em; 25 | line-height: 1.25em; 26 | font-weight: normal; 27 | } 28 | 29 | .subType-unsubscribed .hedSumm.subPrev h2 a:before { 30 | content: ""; 31 | /* background-image: url("../img/ICN_key.svg"); */ 32 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAb4AAADxAQMAAACOOkCnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFAAAAkYBgL4eSGwAAAAF0Uk5TAEDm2GYAAAOJSURBVGje7ZtNkuMgDIVNeeGlj+CjcDQzN+Mo7GbLkqqm0CzcFUjMj/TcTqamxut8ia33JBMhpqm8diIyk/zSREQk5xYiIqIgBvcDFN/s/M2Rh56QiJKMU/S4LBIaeXh0BmX3SoTd61KCkrhuJRgB9UloO/XECR5yeQb5D7k+gxFRUaYkvVwGiw0/Ossr6LHY8H2uX8EE+YbvnVNsuNGZz6DDgsoN63oGAxZUbljPQWWGtcKx3KpqoMXU4Omx1ECPqcHTY6uBEZORJ2RNRpaQVY4hpKqDFpORI+RSBz0mI0fIrQ5GTEaOkDBY15/hgAY3dIBqgRYFHWacMbi0QI8ZZ2wdGNxaYMSMM7YODLYcN/RcGzSYVUegaoP2HnBugw4FPebxC2DAPH4BjFhyXAATlhwXQAKT4wJosKz6BGixdOzfCQRaFHT9PO4nKgQGFIz9AtD3IgYaFLTdytHXAwM9CoZuyenrsT2+QwvAlEEji+8DTIPMPAups/t2kZA6J8omElLn1FxFQupcQWeRkDoXeyUSci/eSwAYhkW9AfproJaDbvSObYF2tBz4QbB8LS1vBIfLup8G00VQvQ+MnwKnfxkMbwfjf/BvMnn6FDi/vTy+s5LDIPy2svIXK117I8NrANZy5etpZSVYIPmtXD3u/CWZU+VCd+cvAm3WKzxAw9Df5IexD5CzXs3/i1KWwDPUyIqF/Ok4ViPlOLjiZ8ZBjdldJeiGjxhyspdgGhbVkGuv7D+Dz70RywR/l126TQD+KvsXKx9Mh1A2VzTm35twfLvJVZsJusNpRTvG8EAzqbLzpXkpcRB70aTbuKA/PhyLZiUP/I5EKPqqHBDpy/abgTMnlwDQo10yh4IWa+h1e4FgUAdgBNuk3b71jqkxqN8OBQ0Kgn3yfr97A9XoFh2Pgg7c7+hv6iygGt1MRjeDIrpvFdAtNo+CDt0NtDdtI2pMjY7L013giunfMWu4C5xB4+DzAPAEwgSDO+a4tufQEZR0H7hijmtaZzxmM2PGaTqAMRMG6t9yAGPuTWP6N4TkjIStmIwNITljbzMmY0NI1qglKGNdSNawrcbUqOrBGyheMDWqejCne8Gg1sLKnGDWSG5Uw8qd0l6woFbc6pjgBAb1HB0uh0+wwzPzCozNq3cMH9zkyVh5SNGZEkjFVyUlHH6iREFiPN+rjMPP6cAng/CzSPDpJ9F5qz9jD8gBLATNNAAAAABJRU5ErkJggg=="); 33 | display: inline-block; 34 | width: 1em; 35 | height: .7em; 36 | background-size: 1em; 37 | background-repeat: no-repeat; 38 | background-position: 0 .1em; 39 | margin-right: 0.25em; 40 | } 41 | 42 | .hedSumm p { 43 | font-size: 1.5em; 44 | line-height: 1.333em; 45 | margin-top: .67rem; 46 | color: #333; 47 | } 48 | 49 | .hedSumm figure.imgType-video { 50 | width: 76px; /* 7.6rem; */ 51 | height: auto; 52 | float: right; 53 | margin-left: 1.6rem; 54 | } 55 | 56 | .hedSumm figure.imgType-A { 57 | width: 76px; /* 7.6rem; */ 58 | height: auto; 59 | float: right; 60 | margin-left: 1.6rem; 61 | } 62 | 63 | .hedSumm figure.imgType-C { 64 | width: 165px; /* 16.5rem; */ 65 | height: auto; 66 | float: right; 67 | margin-left: 1.6rem; 68 | } 69 | 70 | .hedSumm figure.imgType-D { 71 | width: 262px; /* 26.2rem; */ 72 | height: auto; 73 | margin: 1.6rem auto 1.6rem auto; 74 | } 75 | 76 | .hedSumm > ul > li { 77 | font-size: 1.1em; 78 | line-height: 1.1em; 79 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADAQMAAABs5if8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAANQTFRF/2wA0KotnAAAAAtJREFUCB1jYAABAAAGAAEJaVcEAAAAAElFTkSuQmCC"); 80 | background-repeat: no-repeat; 81 | background-position: 0 0.4em; 82 | padding: 0 0 0.2rem 0.6rem; 83 | margin-bottom: 0.1rem; 84 | } 85 | 86 | .hedSumm li a.icon { 87 | position: relative; 88 | display: inline; 89 | padding-left: 1.2em; 90 | } 91 | 92 | .hedSumm li a.icon:before { 93 | content: ""; 94 | display: block; 95 | position: absolute; 96 | top: 0; 97 | left: 0; 98 | background-repeat: no-repeat; 99 | background-position: 0 0; 100 | width: 1.6em; 101 | height: 1.6em; 102 | } 103 | 104 | .hedSumm li a.icon.interactive:before { 105 | top: .2em; 106 | width: 1.2em; 107 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAKCAMAAAC38k/IAAAAclBMVEU/aJLAzdsJPXP////7/P3s7/OitsoWR3r3+Pnw8/a8y9nK1eH2+PokUoKar8UURnmRqMG3xtYfT4Dx8/d3lLLR2uX7/PzF0d7x8/YyXYsPQnY6ZI/2+Pnf5u2Opr7W3+jO2OMMP3V1krDr7/NRdpz////trch6AAAAJnRSTlP/////////////////////////////////////////////////AKd6gbwAAABXSURBVHjaNcpHEoAgEAXR8QuomHPOzv2vKGLRu1fVxORiJo/8P1gI0Yl+FT+WMExUFbNFVEdDgVxbSHnLDZiUQQqAMyCYD/K++ArGx2xsK/f21AauRvELijkH92erNSAAAAAASUVORK5CYII="); 108 | } 109 | 110 | .hedSumm li a.icon.pro { 111 | padding-left: 2.6em; 112 | } 113 | 114 | .hedSumm li a.icon.pro:before { 115 | top: .1em; 116 | width: 2.5em; 117 | height: 1.1em; 118 | background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAALCAMAAAC9KdbBAAABAlBMVEUYokj//////v/+//+d06ye0av///2c0quf0q6p1rYaokj+//3+/v8aoUie0a0TokoTo0gUo0uc0a3o9euo17eb0q3Q6Nep1rcrqVX1+fVRs3IYo0jp8+xku34RokkWoUl0wImd0K70+flfvH9kun0YokyAx5djunwsqVnD5M2ExpT+/v1jvH1jvH4Rokt1wYzC5MyBxpcTo0ab0avm9esVpUfy+fb0+vT0+PVkuXyn2LWc0q3p9OpFrmP1+vQuqFjc7+HO6dZBrmV0wIpBrmeY0a4XokjO6NbP59TH486CxpUTpEic0a/0+fT+/vz+/v6r1reb0qtErWRywYn///5ywop4MRv0AAAAmElEQVR42p3MRRbCQABEwemZhAhECO7u7u7ufv+rsCC5AH9br5v8GWywD4n4djAqEWK47OPN1pSbGECQw4JPIrKibTWMoymozmlawL41xaTOPsqrdLDebOjFBIDRRtOLgbPMdtbGIyx1Dg+DFqJu+BTJcTeFOmUtw7ORv0tz6wu7ov/8icrrcuhUOae0OFcj+WIiO+uQv/oCGvwPMxq/yUoAAAAASUVORK5CYII="); 119 | } 120 | 121 | .hedSumm figure.imageFormat-A { 122 | float: right; 123 | } 124 | 125 | .hedSumm figure.imageFormat-D { 126 | width: 262px; 127 | } 128 | 129 | .hedSumm figure.imageFormat-A img { 130 | margin: .2rem 0 .8rem .8rem; 131 | } 132 | 133 | .hedSumm figure cite { 134 | font-size: 1em; 135 | display: block; 136 | text-align: right; 137 | line-height: 1.15em; 138 | color: #959595; 139 | margin: .2rem 0 .1rem 0; 140 | } 141 | 142 | .hedSumm figure figcaption { 143 | color: #656565; 144 | font-size: 1.1em; 145 | line-height: 1.1em; 146 | margin: 0; 147 | } 148 | 149 | .hedSumm li.marketTickerSymbolStory span { 150 | font-weight: bold; 151 | } 152 | 153 | .hedSumm li.marketTickerSymbolStory .marketDelta.negative { 154 | color: #c00; 155 | } 156 | 157 | .hedSumm li.marketTickerSymbolStory .marketDelta.positive { 158 | color: #090; 159 | } 160 | 161 | -------------------------------------------------------------------------------- /examples/wsj/css/rw-mobilemain.css: -------------------------------------------------------------------------------- 1 | @import url("html5reset.css"); 2 | @import url("rw-typography.css"); 3 | /*@import url("rw-grid.css");*/ 4 | @import url("rw-general.css"); 5 | /*@import url("rw-article.css");*/ 6 | @import url("rw-nameplate.css"); 7 | @import url("rw-set.css"); 8 | @import url("rw-hedSumm.css"); 9 | /*@import url("reswebPanel.css");*/ 10 | @import url("rw-mostPopular.css"); 11 | /*@import url("rw-shareMenu.css");*/ 12 | /*@import url("rw-breakingNews.css");*/ 13 | /*@import url("rw-welcome.css");*/ 14 | /*@import url("fxAnimation.css");*/ 15 | /*@import url("rw-noncompliant.css");*/ 16 | /*@import url("rw-generic.css");*/ 17 | -------------------------------------------------------------------------------- /examples/wsj/css/rw-mostPopular.css: -------------------------------------------------------------------------------- 1 | .module.mostPopular > ul, 2 | .module.mostPopular > ol { 3 | padding-left: 3.6rem; 4 | position: relative; 5 | margin: 0 .1rem 0 .1rem; 6 | } 7 | 8 | .module.mostPopular > ul li, 9 | .module.mostPopular > ol li { 10 | font-family: Georgia, "Century Schoolbook", "Times New Roman", Times, serif; 11 | color: #ca5700; 12 | font-size: 2.1em; /* <- Font size specified here to control the size of the orange numbers */ 13 | position: relative; 14 | z-index: 1; 15 | padding: 1rem 0 1rem 0rem; 16 | list-style-type: decimal; 17 | } 18 | 19 | .module.mostPopular > ul li:after, 20 | .module.mostPopular > ol li:after { 21 | content: ""; 22 | position: absolute; 23 | bottom: 0; 24 | left: 0; 25 | width: 100%; 26 | height: .15rem; 27 | border-bottom: .15rem dotted #bdbdbd; 28 | margin-left: -3.5rem; 29 | padding-right: 3.5rem; 30 | } 31 | 32 | .module.mostPopular > ul li:first-child, 33 | .module.mostPopular > ol li:first-child { 34 | padding-top: 0.5rem; 35 | margin-top: 1rem; 36 | } 37 | 38 | .module.mostPopular > ul li h2, 39 | .module.mostPopular > ol li h2 { 40 | font-size: 0.95em; /* <- equivalent to 2.0rem */ 41 | line-height: 1.1em; 42 | font-weight: normal; 43 | } 44 | 45 | .module.mostPopular > ul li:first-child h2, 46 | .module.mostPopular > ol li:first-child h2 { 47 | font-size: 1.143em; /* <- equivalent to 2.4rem */ 48 | } 49 | 50 | .module.mostPopular > ul li > span, 51 | .module.mostPopular > ul li .tooltipBox { 52 | display: none; 53 | } 54 | -------------------------------------------------------------------------------- /examples/wsj/css/rw-set.css: -------------------------------------------------------------------------------- 1 | .setList > li.hedSumm + li.hedSumm, 2 | .setList > li.hedSumm + li.promotion, 3 | .setList > li.promotion + li.hedSumm, 4 | .setList > li.promotion + li.section, 5 | .setList > li.section + li.hedSumm { 6 | border-top: 1px dotted #999; 7 | } 8 | 9 | .setList > li:first-child { 10 | border: none; 11 | } 12 | 13 | .setList > li:after { 14 | content: ""; 15 | display: block; 16 | height: 0; 17 | clear: both; 18 | visibility: hidden; 19 | font-size: 0; 20 | } 21 | 22 | .setList > li.pType-none.imgType-A, 23 | .setList > li.pType-none.imgType-B, 24 | .setList > li.pType-none.imgType-C { 25 | display: -webkit-box; 26 | -webkit-box-orient: horizontal; 27 | -webkit-box-pack: center; 28 | -webkit-box-align: center; 29 | } 30 | 31 | .setList > li.pType-none h2 { 32 | -webkit-box-flex: 1; 33 | -webkit-box-ordinal-group: 1; 34 | } 35 | 36 | .setList > li.pType-none.imgType-A figure { 37 | float: none; 38 | -webkit-box-ordinal-group: 2; 39 | } 40 | 41 | .setList > li.section > .section { 42 | border: none; 43 | } 44 | 45 | .setList.type-search .sourceStamp { 46 | font-size: 1.2em; 47 | color: #6b6b6b; 48 | display: block; 49 | margin-bottom: .4rem; 50 | margin-top: .4rem; 51 | } 52 | 53 | .setList.type-search .sourceStamp .source { 54 | text-transform: uppercase; 55 | font-weight: bold; 56 | } 57 | 58 | .noresults .setList.type-search { 59 | padding: .5rem .8rem .6rem .8rem; 60 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 61 | } 62 | 63 | .pageNotFound .setList.type-404 { 64 | padding: .5rem 1.6rem .6rem 1.6rem; 65 | font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; 66 | } 67 | 68 | .noresults .setList.type-search h2 { 69 | font-size: 1.8em; 70 | font-weight: bold; 71 | line-height: 1.25em; 72 | margin-bottom: 1em; 73 | } 74 | 75 | .pageNotFound .setList.type-404 h2 { 76 | font-size: 1.8em; 77 | font-weight: bold; 78 | line-height: 1.25em; 79 | margin-bottom: 0.5em; 80 | } 81 | 82 | .noresults .setList.type-search h3 { 83 | font-size: 1.4em; 84 | line-height: 1.1em; 85 | color: #333; 86 | margin-bottom: 0.75em; 87 | } 88 | 89 | .pageNotFound .setList.type-404 p { 90 | font-size: 1.4em; 91 | line-height: 1.1em; 92 | color: #333; 93 | margin-bottom: 0.75em; 94 | } 95 | 96 | .noresults .setList.type-search .tips li { 97 | font-size: 1.4rem; 98 | line-height: 1.333em; 99 | margin-top: .67rem; 100 | color: #333; 101 | background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAMAAADz0U65AAAABlBMVEWZmZkAAACDUBULAAAAFUlEQVR42q3BAQEAAACAkP6vdiKaAABIAAGDHiG2AAAAAElFTkSuQmCC); 102 | background-repeat: no-repeat; 103 | background-size: 0.4rem 0.4rem; 104 | background-position: left 0.5em; 105 | padding-left: 0.75em; 106 | } 107 | 108 | .module.set .listOps { 109 | border-bottom: 1px dotted #999; 110 | padding: 1.2rem .8rem; 111 | } 112 | 113 | .module.set .listOps > .listOp { 114 | display: inline-block; 115 | margin-right: 1em; 116 | } 117 | 118 | .module.set .listOps > .listOp > button { 119 | border: .15rem solid #fff; 120 | background-color: #fff; 121 | font-weight: bold; 122 | font-size: 1.2rem; 123 | color: #004176; 124 | padding: 0.25rem 0.5rem 0.25rem 0.5rem; 125 | text-transform: uppercase; 126 | } 127 | 128 | .module.set .listOps > .listOp.active > button { 129 | border: .15rem solid #999; 130 | color: #c64d0b; 131 | } 132 | 133 | -------------------------------------------------------------------------------- /examples/wsj/css/rw-typography.css: -------------------------------------------------------------------------------- 1 | /* 2 | 3 | Date: 44/11/08 7:45:09 PM 4 | 5 | File: typography.css 6 | 7 | Disc: global typography 8 | 9 | Notes: should be used in conjunction with typography, grids, and 10 | things like that. 11 | 12 | */ 13 | 14 | html { 15 | font-size: 10px; 16 | /* Standard starting point for web browsers; easy baseline for rem units. Will be overridden by media queries on mobile devices. */ 17 | } 18 | 19 | body { 20 | text-align: left; 21 | /* font-family: Georgia, 'Century Schoolbook', 'Times New Roman', Times, serif; */ 22 | font-family: Arial, Helvetica, sans-serif; 23 | color: #333; 24 | } 25 | 26 | img { 27 | border: 0; 28 | /* no borders around images */ 29 | display: block; 30 | /* no spaces under images */ 31 | } 32 | 33 | /* = Links - Basic 34 | ---------------------------------------------------------- */ 35 | 36 | a:link, 37 | a:visited, 38 | a:active { 39 | color: #093d72; 40 | text-decoration: none; 41 | outline: none; 42 | } 43 | 44 | a:hover { 45 | color: #c74b15; 46 | } 47 | 48 | a:active { 49 | outline: none; 50 | } 51 | 52 | /* = Headers - Basic 53 | ---------------------------------------------------------- */ 54 | 55 | h1, h2, h3, h4, h5, h6 { 56 | font-weight: normal; 57 | margin: 0; 58 | padding: 0; 59 | } 60 | 61 | -------------------------------------------------------------------------------- /examples/wsj/img/IMG_grumpy-167.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/wsj/img/IMG_grumpy-167.jpg -------------------------------------------------------------------------------- /examples/wsj/img/IMG_grumpy-262.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/wsj/img/IMG_grumpy-262.jpg -------------------------------------------------------------------------------- /examples/wsj/img/IMG_grumpy-76.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/wsj/img/IMG_grumpy-76.jpg -------------------------------------------------------------------------------- /examples/wsj/img/littlemac.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/wsj/img/littlemac.gif -------------------------------------------------------------------------------- /examples/wsj/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Intentional Grid 7 | 8 | 9 | 10 | 11 | 12 |
13 |
14 |
15 |
16 |
17 |

18 | The Wall Street Journal 19 |

20 |
21 |
22 |
23 |
24 |
25 |
26 | 57 |
58 |
59 |

60 | Most Popular 61 |

62 |
    63 |
  1. 64 |

    65 | Opinion: Stephen Moore: The Education of John Boehner 66 |

    67 |
    2. 68 |
  2. 69 |

    70 | For Newly Minted M.B.A.s, a Smaller Paycheck Awaits 71 |

    72 |
    3. 73 |
  3. 74 |

    75 | BofA Deal Resolves Mortgage Headache 76 |

    77 |
    4. 78 |
  4. 79 |

    80 | Opinion: Crovitz: Inconvenient Truths About Al Jazeera 81 |

    82 |
    5. 83 |
  5. 84 |

    85 | Law-Firm Partners Face Layoffs 86 |

    87 |
    6. 88 |
89 |
90 |
91 |
92 |
93 |

94 | World 95 |

96 |
    97 |
  • 98 |
    99 | cat 100 |
    101 |

    102 | Around the World in Eight Days 103 |

    104 |

    105 | A writer attempts an art-inspired challenge, traveling around the globe on a tight budget to visit all 11 Gagosian Galleries in hopes of winning a Damien Hirst print. 106 |

    107 |
    • 108 |
  • 109 |
    110 | cat 111 |
    112 |

    113 | Model Lara Stone 114 |

    115 |

    116 | The Dutch beauty discusses quitting smoking, taking up knitting and marriage. 117 |

    118 |
    • 119 |
  • 120 |
    121 | cat 122 |
    123 |

    124 | In Praise of the Gross 125 |

    126 |

    127 | Making a case that it was the insolent tone of "Tropic of Cancer"—more than the now tame sex scenes—that incited the book-banners. Lee Sandlin reviews "Renegade." 128 |

    129 |
    • 130 |
131 |
132 |
133 |
134 |
135 |
136 |
137 |
138 |
139 | 140 | 143 |
144 |
145 | 146 | 151 |
152 |
153 |
154 |

155 | Welcome, Ben Rubenstein Log Out 156 |

157 | ©2011 Dow Jones & Company, Inc. All Rights Reserved. 165 |
166 |
167 |
168 |
169 |
170 |
171 | 172 | 173 | 174 | -------------------------------------------------------------------------------- /examples/wsj/main.js: -------------------------------------------------------------------------------- 1 | require.config({ 2 | appDir: './', 3 | baseUrl: '../../', 4 | // shim: { 5 | // underscore: { 6 | // exports: '_' 7 | // }, 8 | // }, 9 | paths: { 10 | jquery: 'test/vendor/jquery', 11 | underscore: 'test/vendor/underscore', 12 | page: 'example/page' 13 | } 14 | }); 15 | 16 | define([ 17 | 'Context' 18 | ]); -------------------------------------------------------------------------------- /examples/wsj/page.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/examples/wsj/page.js -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "intention.js", 3 | "version": "0.9.9", 4 | "description": "DOM Manipulation via html attribute specification", 5 | "repository": { 6 | "type": "git", 7 | "url": "http://github.com/wsjdesign/intentionjs" 8 | }, 9 | "homepage": "http://intentionjs.com/", 10 | "author": "Joe Kendall", 11 | "license": "MIT", 12 | "copyright": "Copyright 2008", 13 | "banner": "Dowjones and other contributors. \n* Released under the MIT license. \n*", 14 | "main": "intention.js", 15 | "keywords": [ 16 | "responsive", 17 | "design", 18 | "intention", 19 | "ui" 20 | ], 21 | "dependencies": { 22 | "jquery": "*", 23 | "underscore": "*" 24 | }, 25 | "devDependencies": { 26 | "grunt-contrib-uglify": "~0.2.2", 27 | "chai": "*", 28 | "mocha": "*", 29 | "grunt-release": "~0.5.1" 30 | }, 31 | "bugs": { 32 | "url": "https://github.com/wsjdesign/intentionjs/issues" 33 | }, 34 | "directories": { 35 | "example": "examples", 36 | "test": "test" 37 | }, 38 | "scripts": { 39 | "test": "mocha" 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /test/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/test/.DS_Store -------------------------------------------------------------------------------- /test/context-tests.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | intention tests 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 29 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /test/context.tests.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | describe('context.js', function () { 3 | describe('initialize in context', function () { 4 | }); 5 | }); -------------------------------------------------------------------------------- /test/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | intention tests 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | -------------------------------------------------------------------------------- /test/init.js: -------------------------------------------------------------------------------- 1 | /* global intent: false */ 2 | 'use strict'; 3 | function in_init(contexts, callback) { 4 | /* jshint validthis: true */ 5 | var dfds = []; 6 | _.each(contexts, function (ctx) { 7 | var dfd = $.Deferred(); 8 | dfds.push(dfd); 9 | if (intent.is(ctx)) { 10 | dfd.resolve(); 11 | } else { 12 | intent.on(ctx, dfd.resolve); 13 | } 14 | }); 15 | if (!contexts || contexts.length === 0) { 16 | callback(); 17 | } 18 | $.when.apply(this, dfds).done(callback); 19 | } 20 | in_init(['standard'], function () { 21 | console.log('standard has been entered'); 22 | }); -------------------------------------------------------------------------------- /test/vendor/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/dowjones/intentionjs/85977cd1583b5ce7dd3f1cd11b42e39a743e8fb1/test/vendor/.DS_Store -------------------------------------------------------------------------------- /test/vendor/mocha.css: -------------------------------------------------------------------------------- 1 | 2 | body { 3 | font: 20px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif; 4 | padding: 60px 50px; 5 | } 6 | 7 | #mocha h1, h2 { 8 | margin: 0; 9 | } 10 | 11 | #mocha h1 { 12 | margin-top: 15px; 13 | font-size: 1em; 14 | font-weight: 200; 15 | } 16 | 17 | #mocha .suite .suite h1 { 18 | margin-top: 0; 19 | font-size: .8em; 20 | } 21 | 22 | #mocha h2 { 23 | font-size: 12px; 24 | font-weight: normal; 25 | cursor: pointer; 26 | } 27 | 28 | #mocha .suite { 29 | margin-left: 15px; 30 | } 31 | 32 | #mocha .test { 33 | margin-left: 15px; 34 | } 35 | 36 | #mocha .test:hover h2::after { 37 | position: relative; 38 | top: 0; 39 | right: -10px; 40 | content: '(view source)'; 41 | font-size: 12px; 42 | font-family: arial; 43 | color: #888; 44 | } 45 | 46 | #mocha .test.pending:hover h2::after { 47 | content: '(pending)'; 48 | font-family: arial; 49 | } 50 | 51 | #mocha .test.pass.medium .duration { 52 | background: #C09853; 53 | } 54 | 55 | #mocha .test.pass.slow .duration { 56 | background: #B94A48; 57 | } 58 | 59 | #mocha .test.pass::before { 60 | content: '✓'; 61 | font-size: 12px; 62 | display: block; 63 | float: left; 64 | margin-right: 5px; 65 | } 66 | 67 | #mocha .test.pass .duration { 68 | font-size: 9px; 69 | margin-left: 5px; 70 | padding: 2px 5px; 71 | color: white; 72 | -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.2); 73 | -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,.2); 74 | box-shadow: inset 0 1px 1px rgba(0,0,0,.2); 75 | -webkit-border-radius: 5px; 76 | -moz-border-radius: 5px; 77 | -ms-border-radius: 5px; 78 | -o-border-radius: 5px; 79 | border-radius: 5px; 80 | } 81 | 82 | #mocha .test.pass.fast .duration { 83 | display: none; 84 | } 85 | 86 | #mocha .test.pending { 87 | color: #0b97c4; 88 | } 89 | 90 | #mocha .test.pending::before { 91 | content: '◦'; 92 | color: #0b97c4; 93 | } 94 | 95 | #mocha .test.fail { 96 | color: #c00; 97 | } 98 | 99 | #mocha .test.fail pre { 100 | color: black; 101 | } 102 | 103 | #mocha .test.fail::before { 104 | content: '✖'; 105 | font-size: 12px; 106 | display: block; 107 | float: left; 108 | margin-right: 5px; 109 | color: #c00; 110 | } 111 | 112 | #mocha .test pre.error { 113 | color: #c00; 114 | } 115 | 116 | #mocha .test pre { 117 | display: inline-block; 118 | font: 12px/1.5 monaco, monospace; 119 | margin: 5px; 120 | padding: 15px; 121 | border: 1px solid #eee; 122 | border-bottom-color: #ddd; 123 | -webkit-border-radius: 3px; 124 | -webkit-box-shadow: 0 1px 3px #eee; 125 | } 126 | 127 | #error { 128 | color: #c00; 129 | font-size: 1.5 em; 130 | font-weight: 100; 131 | letter-spacing: 1px; 132 | } 133 | 134 | #stats { 135 | position: fixed; 136 | top: 15px; 137 | right: 10px; 138 | font-size: 12px; 139 | margin: 0; 140 | color: #888; 141 | } 142 | 143 | #stats .progress { 144 | float: right; 145 | padding-top: 0; 146 | } 147 | 148 | #stats em { 149 | color: black; 150 | } 151 | 152 | #stats li { 153 | display: inline-block; 154 | margin: 0 5px; 155 | list-style: none; 156 | padding-top: 11px; 157 | } 158 | 159 | code .comment { color: #ddd } 160 | code .init { color: #2F6FAD } 161 | code .string { color: #5890AD } 162 | code .keyword { color: #8A6343 } 163 | code .number { color: #2F6FAD } 164 | --------------------------------------------------------------------------------