From 11a66a3d72f5e9e5adbbb73d8ae32f9deb2d9626 Mon Sep 17 00:00:00 2001 From: Gion Kunz Date: Tue, 25 Feb 2014 22:24:50 +0100 Subject: [PATCH] Refactored structure and added basic website / documentation --- .bowerrc | 3 + .editorconfig | 21 + .gitattributes | 1 + .gitignore | 5 + .jshintrc | 28 + .travis.yml | 7 + Gruntfile.js | 377 ++++++++ app/.buildignore | 1 + app/404.html | 157 ++++ app/favicon.ico | Bin 0 -> 4286 bytes app/images/chartist-guy.svg | 127 +++ app/images/yeoman.png | Bin 0 -> 13501 bytes app/index.html | 94 ++ app/robots.txt | 3 + app/scripts/chartist.js | 329 +++++++ app/scripts/main.js | 67 ++ app/styles/main.scss | 164 ++++ app/styles/settings/_chartist-web.scss | 33 + app/styles/settings/_foundation.scss | 1194 ++++++++++++++++++++++++ bower.json | 10 + karma-e2e.conf.js | 54 ++ karma.conf.js | 54 ++ package.json | 51 + test/.jshintrc | 36 + test/runner.html | 9 + 25 files changed, 2825 insertions(+) create mode 100644 .bowerrc create mode 100644 .editorconfig create mode 100644 .gitattributes create mode 100644 .gitignore create mode 100644 .jshintrc create mode 100644 .travis.yml create mode 100644 Gruntfile.js create mode 100644 app/.buildignore create mode 100644 app/404.html create mode 100644 app/favicon.ico create mode 100755 app/images/chartist-guy.svg create mode 100644 app/images/yeoman.png create mode 100644 app/index.html create mode 100644 app/robots.txt create mode 100644 app/scripts/chartist.js create mode 100644 app/scripts/main.js create mode 100644 app/styles/main.scss create mode 100644 app/styles/settings/_chartist-web.scss create mode 100644 app/styles/settings/_foundation.scss create mode 100644 bower.json create mode 100644 karma-e2e.conf.js create mode 100644 karma.conf.js create mode 100644 package.json create mode 100644 test/.jshintrc create mode 100644 test/runner.html diff --git a/.bowerrc b/.bowerrc new file mode 100644 index 0000000..ba0accc --- /dev/null +++ b/.bowerrc @@ -0,0 +1,3 @@ +{ + "directory": "app/bower_components" +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..c2cdfb8 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,21 @@ +# EditorConfig helps developers define and maintain consistent +# coding styles between different editors and IDEs +# editorconfig.org + +root = true + + +[*] + +# Change these settings to your own preference +indent_style = space +indent_size = 2 + +# We recommend you to keep these unchanged +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.md] +trim_trailing_whitespace = false diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 0000000..2125666 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +* text=auto \ No newline at end of file diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..7911b28 --- /dev/null +++ b/.gitignore @@ -0,0 +1,5 @@ +node_modules +dist +.tmp +.sass-cache +app/bower_components diff --git a/.jshintrc b/.jshintrc new file mode 100644 index 0000000..513ca92 --- /dev/null +++ b/.jshintrc @@ -0,0 +1,28 @@ +{ + "node": true, + "browser": true, + "esnext": true, + "bitwise": true, + "camelcase": false, + "curly": true, + "eqeqeq": true, + "immed": true, + "indent": 2, + "latedef": true, + "newcap": false, + "noarg": true, + "quotmark": "single", + "regexp": true, + "undef": true, + "unused": true, + "strict": true, + "trailing": true, + "smarttabs": true, + "globals": { + "angular": false, + "jQuery": false, + "$": false, + "Snap": false, + "Foundation": false + } +} diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..83f4e22 --- /dev/null +++ b/.travis.yml @@ -0,0 +1,7 @@ +language: node_js +node_js: + - '0.8' + - '0.10' +before_script: + - 'npm install -g bower grunt-cli' + - 'bower install' diff --git a/Gruntfile.js b/Gruntfile.js new file mode 100644 index 0000000..83642ee --- /dev/null +++ b/Gruntfile.js @@ -0,0 +1,377 @@ +'use strict'; + +// # Globbing +// for performance reasons we're only matching one level down: +// 'test/spec/{,*/}*.js' +// use this if you want to recursively match all subfolders: +// 'test/spec/**/*.js' + +module.exports = function (grunt) { + + // Load grunt tasks automatically + require('load-grunt-tasks')(grunt); + + // Time how long tasks take. Can help when optimizing build times + require('time-grunt')(grunt); + + // Define the configuration for all the tasks + grunt.initConfig({ + + // Project settings + settings: { + // configurable paths + app: require('./bower.json').appPath || 'app', + dist: 'dist' + }, + + // Watches files for changes and runs tasks based on the changed files + watch: { + js: { + files: ['<%= settings.app %>/scripts/{,*/}*.js'], + tasks: ['newer:jshint:all'], + options: { + livereload: true + } + }, + jsTest: { + files: ['test/spec/{,*/}*.js'], + tasks: ['newer:jshint:test', 'karma'] + }, + compass: { + files: ['<%= settings.app %>/styles/{,*/}*.{scss,sass}'], + tasks: ['compass:server'] + }, + gruntfile: { + files: ['Gruntfile.js'] + }, + livereload: { + options: { + livereload: '<%= connect.options.livereload %>' + }, + files: [ + '<%= settings.app %>/{,*/}*.html', + '.tmp/styles/{,*/}*.css', + '<%= settings.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' + ] + } + }, + + // The actual grunt server settings + connect: { + options: { + port: 9000, + // Change this to '0.0.0.0' to access the server from outside. + hostname: '0.0.0.0', + livereload: 35729 + }, + livereload: { + options: { + open: true, + base: [ + '.tmp', + '<%= settings.app %>' + ] + } + }, + test: { + options: { + port: 9001, + base: [ + '.tmp', + 'test', + '<%= settings.app %>' + ] + } + }, + dist: { + options: { + base: '<%= settings.dist %>' + } + } + }, + + // Make sure code styles are up to par and there are no obvious mistakes + jshint: { + options: { + jshintrc: '.jshintrc', + reporter: require('jshint-stylish') + }, + all: [ + 'Gruntfile.js', + '<%= settings.app %>/scripts/{,*/}*.js' + ], + test: { + options: { + jshintrc: 'test/.jshintrc' + }, + src: ['test/spec/{,*/}*.js'] + } + }, + + // Empties folders to start fresh + clean: { + dist: { + files: [{ + dot: true, + src: [ + '.tmp', + '<%= settings.dist %>/*', + '!<%= settings.dist %>/.git*' + ] + }] + }, + server: '.tmp' + }, + + // Add vendor prefixed styles +/* autoprefixer: { + options: { + browsers: ['last 1 version'] + }, + dist: { + files: [{ + expand: true, + cwd: '.tmp/styles/', + src: '{,*//*}*.css', + dest: '.tmp/styles/' + }] + } + },*/ + + // Automatically inject Bower components into the app + 'bower-install': { + app: { + html: '<%= settings.app %>/index.html', + ignorePath: '<%= settings.app %>/', + exclude: ['bower_components/foundation/css/foundation.css'] + } + }, + + + + + // Compiles Sass to CSS and generates necessary files if requested + compass: { + options: { + sassDir: '<%= settings.app %>/styles', + cssDir: '.tmp/styles', + generatedImagesDir: '.tmp/images/generated', + imagesDir: '<%= settings.app %>/images', + javascriptsDir: '<%= settings.app %>/scripts', + fontsDir: '<%= settings.app %>/styles/fonts', + importPath: '<%= settings.app %>/bower_components', + httpImagesPath: '/images', + httpGeneratedImagesPath: '/images/generated', + httpFontsPath: '/styles/fonts', + relativeAssets: false, + assetCacheBuster: false, + raw: 'Sass::Script::Number.precision = 10\n' + }, + dist: { + options: { + generatedImagesDir: '<%= settings.dist %>/images/generated' + } + }, + server: { + options: { + debugInfo: true + } + } + }, + + // Renames files for browser caching purposes + rev: { + dist: { + files: { + src: [ + '<%= settings.dist %>/scripts/{,*/}*.js', + '<%= settings.dist %>/styles/{,*/}*.css', + '<%= settings.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}', + '<%= settings.dist %>/styles/fonts/*' + ] + } + } + }, + + // Reads HTML for usemin blocks to enable smart builds that automatically + // concat, minify and revision files. Creates configurations in memory so + // additional tasks can operate on them + useminPrepare: { + html: '<%= settings.app %>/index.html', + options: { + dest: '<%= settings.dist %>' + } + }, + + // Performs rewrites based on rev and the useminPrepare configuration + usemin: { + html: ['<%= settings.dist %>/{,*/}*.html'], + css: ['<%= settings.dist %>/styles/{,*/}*.css'], + options: { + assetsDirs: ['<%= settings.dist %>'] + } + }, + + // The following *-min tasks produce minified files in the dist folder + imagemin: { + dist: { + files: [{ + expand: true, + cwd: '<%= settings.app %>/images', + src: '{,*/}*.{png,jpg,jpeg,gif}', + dest: '<%= settings.dist %>/images' + }] + } + }, + svgmin: { + dist: { + files: [{ + expand: true, + cwd: '<%= settings.app %>/images', + src: '{,*/}*.svg', + dest: '<%= settings.dist %>/images' + }] + } + }, + htmlmin: { + dist: { + options: { + collapseWhitespace: true, + collapseBooleanAttributes: true, + removeCommentsFromCDATA: true, + removeOptionalTags: true + }, + files: [{ + expand: true, + cwd: '<%= settings.dist %>', + src: ['*.html'], + dest: '<%= settings.dist %>' + }] + } + }, + + // Allow the use of non-minsafe AngularJS files. Automatically makes it + // minsafe compatible so Uglify does not destroy the ng references + ngmin: { + dist: { + files: [{ + expand: true, + cwd: '.tmp/concat/scripts', + src: '*.js', + dest: '.tmp/concat/scripts' + }] + } + }, + + // Replace Google CDN references + cdnify: { + dist: { + html: ['<%= settings.dist %>/*.html'] + } + }, + + // Copies remaining files to places other tasks can use + copy: { + dist: { + files: [{ + expand: true, + dot: true, + cwd: '<%= settings.app %>', + dest: '<%= settings.dist %>', + src: [ + '*.{ico,png,txt}', + '.htaccess', + '*.html', + 'views/{,*/}*.html', + 'bower_components/**/*', + 'images/{,*/}*.{webp}', + 'fonts/*' + ] + }, { + expand: true, + cwd: '.tmp/images', + dest: '<%= settings.dist %>/images', + src: ['generated/*'] + }] + }, + styles: { + expand: true, + cwd: '<%= settings.app %>/styles', + dest: '.tmp/styles/', + src: '{,*/}*.css' + } + }, + + // Run some tasks in parallel to speed up the build process + concurrent: { + server: [ + 'compass:server' + ], + test: [ + 'compass' + ], + dist: [ + 'compass:dist', + 'imagemin', + 'svgmin' + ] + }, + + // Test settings + karma: { + unit: { + configFile: 'karma.conf.js', + singleRun: true + } + } + }); + + + grunt.registerTask('serve', function (target) { + if (target === 'dist') { + return grunt.task.run(['build', 'connect:dist:keepalive']); + } + + grunt.task.run([ + 'clean:server', + 'bower-install', + 'concurrent:server', + 'connect:livereload', + 'watch' + ]); + }); + + grunt.registerTask('server', function () { + grunt.log.warn('The `server` task has been deprecated. Use `grunt serve` to start a server.'); + grunt.task.run(['serve']); + }); + + grunt.registerTask('test', [ + 'clean:server', + 'concurrent:test', + 'connect:test', + 'karma' + ]); + + grunt.registerTask('build', [ + 'clean:dist', + 'bower-install', + 'useminPrepare', + 'concurrent:dist', + 'concat', + 'ngmin', + 'copy:dist', + 'cdnify', + 'cssmin', + 'uglify', + 'rev', + 'usemin', + 'htmlmin' + ]); + + grunt.registerTask('default', [ + 'newer:jshint', + 'test', + 'build' + ]); +}; diff --git a/app/.buildignore b/app/.buildignore new file mode 100644 index 0000000..fc98b8e --- /dev/null +++ b/app/.buildignore @@ -0,0 +1 @@ +*.coffee \ No newline at end of file diff --git a/app/404.html b/app/404.html new file mode 100644 index 0000000..ec98e3c --- /dev/null +++ b/app/404.html @@ -0,0 +1,157 @@ + + + + + Page Not Found :( + + + +
+

Not found :(

+

Sorry, but the page you were trying to view does not exist.

+

It looks like this was the result of either:

+
    +
  • a mistyped address
    • +
  • an out-of-date link
    • +
+ + +
+ + diff --git a/app/favicon.ico b/app/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..6527905307f19ba00762f9241f7eb535fa84a2f9 GIT binary patch literal 4286 zcmchaPe@cz6vpqQW1y54B@{_hhFD-kWPgyXjSGVaf);_51TESOlSPOdvy}@W5Q+** zs6~RrtlR}7(V|sCkP&1f7!5{Hixw@4+x@+HXSm*Z^WGalm2d8S=brO@=iGm9MyZ7P zPo)%}YN|=8W~EfSfibDm2H3qnGq$y%h@zqVv#zn@@WvhIGJ8*ECePe@roq(*vwGys z4?Q;bI~MRIM&jXu6Yg@wqQ#8&8x#z55E}ONd3<&rw_h!5AbBx{CcZ%&z736jHxFa0 zsBLqly3+dQ%MZGH{QU}GW6bsq=@$a@sXtac^<8>8uP>*+d!Qdtv&&mnKlvE_T-+SC z*QNCVwcvq%+&DDc+T}Uf(2_FavDN{-&hCpIs?aW=A$mcrzyD+9(025i1~K&uVf&w4 zItQLK9T{7k?s@bnU*&p+<^UI*aHA1aH+Fo^PAzM|xjNK09?2V(Cme7IFB(BP?7#at z(>DB3w`AUFS~=(LUBdZ>v-SG4J~%Mrfj&05Z)oj13l5tbEq4x>8+;FC0Dvr zbJY#7PS$+yE_Cf7gxqQEC@RoZX5J^}71l+`Q~qnOF4D za`lhjUuqZa-sj)EHDleV2i|mc!Ly-@7IwzPM{?pBUt(+@IHi8HTz#Iq9)9h|hrL3) zfOT#@|5$JCxmRjsOj>&kUt(m8*57|W(FoE`CX*8edYv%j=3sR5>!hvglJ#@8K6j$g z&IuUbRC_{)p}sbyx%UD6Fki;t6nDk0gT5&6Q_at7FbVVOu?4VK{oR#!kyYbCc;<4+LITzoZ8-~O5L+9MiLHL4NyME>! z;Ky7<)UR!gN_~GXhMvPMHNB;EmmIK}eHD&~cRx89jth}IM#tU%ablw0|GxfE9IjRR zl-)b-IvC#UD!IewzPL77SI>R+?}<2ERr|R2o~zCC8rJUR8>DI5*0O$6+k~wZ)Mt;b z(Hul-OFl+F))}lK&&Yi*+S2kJmHDbdBWOQnaSA6S|#* + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/images/yeoman.png b/app/images/yeoman.png new file mode 100644 index 0000000000000000000000000000000000000000..92497addf96c5c009ac24007f55eb989f3bf74c6 GIT binary patch literal 13501 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 literal 0 HcmV?d00001 diff --git a/app/index.html b/app/index.html new file mode 100644 index 0000000..dfb1e9f --- /dev/null +++ b/app/index.html @@ -0,0 +1,94 @@ + + + + + + + + + + + + + + + + + + + + + + + + +
+

Chartist.js Simple responsive charts

+
+ Chartist Guy +
+
+ +
+
+

Chart CSS animation example

+
+
+
+ +
+
+
+

Specifying the style of your chart in CSS is not only cleaner but also enables you to use awesome CSS animations and transitions to be applied to your SVG elements!

+
+
+ + +
+ + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/robots.txt b/app/robots.txt new file mode 100644 index 0000000..9417495 --- /dev/null +++ b/app/robots.txt @@ -0,0 +1,3 @@ +# robotstxt.org + +User-agent: * diff --git a/app/scripts/chartist.js b/app/scripts/chartist.js new file mode 100644 index 0000000..798f4a8 --- /dev/null +++ b/app/scripts/chartist.js @@ -0,0 +1,329 @@ +//TODO: The whole library needs to be extracted into its own library project and not together with the website / documentation +//TODO: Add more chart types! +//TODO: Refactor library structure to optimize scopes and closures +(function (document, window, undefined) { + 'use strict'; + + // Some utility functions + function extend(target, source) { + target = target || {}; + for (var prop in source) { + if (typeof source[prop] === 'object') { + target[prop] = extend(target[prop], source[prop]); + } else { + target[prop] = source[prop]; + } + } + return target; + } + + var LineChartHelpers = { + // Internal functions + getDataArray: function (data) { + var array = []; + + for (var i = 0; i < data.series.length; i++) { + array[i] = data.series[i].data; + } + + return array; + }, + + // Add missing values at the end of the arrays + normalizeDataArray: function (dataArray, length) { + for (var i = 0; i < dataArray.length; i++) { + if (dataArray[i].length === length) { + continue; + } + + for (var j = dataArray[i].length; j < length; j++) { + dataArray[i][j] = 0; + } + } + + return dataArray; + }, + + // Create points from positions + createPoints: function (paper, positions, options) { + var points = []; + for (var i = 0; i < positions.length; i++) { + var point = paper.line(positions[i].x, positions[i].y, positions[i].x, positions[i].y); + if (options.classNames.point) { + point.node.setAttribute('class', options.classNames.point); + + } + points.push(point); + } + + return points; + }, + + // Create lines from positions + createLines: function (paper, positions, options) { + var path = 'M' + positions[0].x + ',' + positions[0].y + ' ' + (options.lineSmooth ? 'R' : 'L'); + for (var i = 1; i < positions.length; i++) { + path += ' ' + positions[i].x + ',' + positions[i].y; + } + + var snapPath = paper.path(path); + snapPath.node.setAttribute('class', options.classNames.line); + + return snapPath; + }, + + createLabels: function (paper, labels, positions, options) { + var labelElements = []; + for (var i = 0; i < positions.length; i++) { + + // Exit based on sampling to skip label rendering + if (i % options.labelSampling !== 0) { + continue; + } + + // Add labels with configured padding (left) + var label = paper.text(positions[i].x + options.labelPadding, positions[i].y, options.labelInterpolationFnc(labels[i])); + if (options.classNames.labels) { + label.node.setAttribute('class', options.classNames.labels); + } + labelElements.push(label); + } + + return labelElements; + }, + + createVerticalGrid: function (paper, positions, options) { + var gridElements = []; + for (var i = 0; i < positions.length; i++) { + + // Exit based on sampling to skip grid line rendering + if (i % options.verticalGridSampling !== 0) { + continue; + } + + // Add grid line + var gridElement = paper.line(positions[i].x, positions[i].y, positions[i].x, options.chartPadding); + if (options.classNames.verticalGridLine) { + gridElement.node.setAttribute('class', options.classNames.verticalGridLine); + } + gridElements.push(gridElement); + } + + return gridElements; + }, + + createHorizontalGrid: function (paper, bounds, options) { + var gridElements = []; + for (var i = bounds.min; i <= bounds.max; i += bounds.step) { + // Add grid line + var gridLineY = LineChartHelpers.projectPoint(paper, i, bounds, options); + var gridElement = paper.line(options.chartPadding, gridLineY, paper.node.clientWidth - options.chartPadding, gridLineY); + if (options.classNames.horizontalGridLine) { + gridElement.node.setAttribute('class', options.classNames.horizontalGridLine); + } + gridElements.push(gridElement); + } + + return gridElements; + }, + + orderOfMagnitude: function (value) { + return Math.floor(Math.log(Math.abs(value)) / Math.LN10); + }, + + projectPoint: function (paper, value, bounds, options) { + var availableHeight = LineChartHelpers.getAvailableHeight(paper, options); + return availableHeight - (value / bounds.range * availableHeight) + options.chartPadding + (bounds.min / bounds.range * availableHeight); + }, + + projectLength: function (paper, length, bounds, options) { + var availableHeight = LineChartHelpers.getAvailableHeight(paper, options); + return (length / bounds.range * availableHeight); + }, + + getAvailableHeight: function (paper, options) { + return paper.node.clientHeight - (options.chartPadding * 2) - options.labelOffset; + }, + + // Find the highest and lowest values in a two dimensional array and calculate scale based on order of magnitude + getBounds: function (paper, dataArray, options) { + var i, + j, + newMin, + newMax, + bounds = { + low: Number.MAX_VALUE, + high: Number.MIN_VALUE + }; + + for (i = 0; i < dataArray.length; i++) { + for (j = 0; j < dataArray[i].length; j++) { + if (dataArray[i][j] > bounds.high) { + bounds.high = dataArray[i][j]; + } + + if (dataArray[i][j] < bounds.low) { + bounds.low = dataArray[i][j]; + } + } + } + + bounds.valueRange = bounds.high - bounds.low; + bounds.oom = LineChartHelpers.orderOfMagnitude(bounds.valueRange); + bounds.min = Math.floor(bounds.low / Math.pow(10, bounds.oom)) * Math.pow(10, bounds.oom); + bounds.max = Math.ceil(bounds.high / Math.pow(10, bounds.oom)) * Math.pow(10, bounds.oom); + bounds.range = bounds.max - bounds.min; + bounds.step = Math.pow(10, bounds.oom); + bounds.numberOfSteps = Math.round(bounds.range / bounds.step); + + // Optimize scale step by checking if subdivision is possible based on horizontalGridMinSpace + while (true) { + var length = LineChartHelpers.projectLength(paper, bounds.step / 2, bounds, options); + if (length >= options.horizontalGridMinSpace) { + bounds.step /= 2; + } else { + break; + } + } + + // Narrow min and max based on new step + newMin = bounds.min; + newMax = bounds.max; + for (i = bounds.min; i <= bounds.max; i += bounds.step) { + if (i + bounds.step < bounds.low) { + newMin += bounds.step; + } + + if (i - bounds.step > bounds.high) { + newMax -= bounds.step; + } + } + bounds.min = newMin; + bounds.max = newMax; + bounds.range = bounds.max - bounds.min; + + return bounds; + } + }; + + window.Chartist = function (query, data, baseOptions) { + var responsiveOptions, + paper = Snap(query), + dataArray = LineChartHelpers.normalizeDataArray(LineChartHelpers.getDataArray(data), data.labels.length), + i, + j; + + if (arguments[3]) { + responsiveOptions = arguments[3]; + } + + this.reflow = function () { + reflow(); + }; + + function reflow() { + createChart(); + } + + // Callback for matchMedia to trigger reflow + function mediaQueryTrigger() { + reflow(); + } + + if (!window.matchMedia) { + throw 'window.matchMedia not found! Make sure you\'re using a polyfill.'; + } else if (responsiveOptions) { + + for (i = 0; i < responsiveOptions.length; i++) { + var mql = window.matchMedia(responsiveOptions[i][0]); + mql.addListener(mediaQueryTrigger); + // Trigger the first time manually + if (mql.matches) { + mediaQueryTrigger(); + } + } + } + + function createChart() { + var options, + positions = [], + labelPositions = [], + seriesGroups = [], + bounds; + + // Clear the stage + paper.clear(); + + // Construct current options based on responsive option overrides (overrides in sequence of responsiveOptions) + options = extend({}, baseOptions); + for (i = 0; i < responsiveOptions.length; i++) { + var mql = window.matchMedia(responsiveOptions[i][0]); + if (mql.matches) { + options = extend(options, responsiveOptions[i][1]); + } + } + + // initialize bounds + bounds = LineChartHelpers.getBounds(paper, dataArray, options); + + // initialize series groups and position array + for (j = 0; j < data.series.length; j++) { + seriesGroups[j] = paper.g(); + seriesGroups[j].node.setAttribute('class', options.classNames.series + ' ' + data.series[j].className); + positions[j] = []; + } + + for (i = 0; i < data.labels.length; i++) { + for (j = 0; j < dataArray.length; j++) { + positions[j][i] = { + x: ((paper.node.clientWidth - options.chartPadding * 2) / data.labels.length * i) + options.chartPadding, + y: LineChartHelpers.projectPoint(paper, dataArray[j][i], bounds, options) + }; + + labelPositions[i] = { + x: ((paper.node.clientWidth - options.chartPadding * 2) / data.labels.length * i) + options.chartPadding, + y: paper.node.clientHeight - options.chartPadding + }; + } + } + + // Create SVG objects based on positions + // TODO: Optimize performance so we only loop once + + // First draw the grids + if (options.showVerticalGrid) { + var verticalGrid = paper.g(); + verticalGrid.add(LineChartHelpers.createVerticalGrid(paper, labelPositions, options)); + verticalGrid.prependTo(paper); + } + + if (options.showHorizontalGrid) { + var horizontalGrid = paper.g(); + horizontalGrid.add(LineChartHelpers.createHorizontalGrid(paper, bounds, options)); + horizontalGrid.prependTo(paper); + } + + // Draw the series + for (j = 0; j < data.series.length; j++) { + if (options.showLines) { + seriesGroups[j].add(LineChartHelpers.createLines(paper, positions[j], options)); + } + + if (options.showPoint) { + seriesGroups[j].add(LineChartHelpers.createPoints(paper, positions[j], options)); + } + } + + if (options.showLabels) { + var labels = paper.g(); + labels.add(LineChartHelpers.createLabels(paper, data.labels, labelPositions, options)); + labels.appendTo(paper); + } + } + + createChart(); + + return this; + }; + +}(document, window)); \ No newline at end of file diff --git a/app/scripts/main.js b/app/scripts/main.js new file mode 100644 index 0000000..cc11fbf --- /dev/null +++ b/app/scripts/main.js @@ -0,0 +1,67 @@ +'use strict'; + +var options = { + labelOffset: 40, + labelPadding: 5, + labelSampling: 1, + labelInterpolationFnc: function (l) { + return l; + }, + showLines: true, + showPoint: true, + showLabels: true, + showVerticalGrid: true, + showHorizontalGrid: true, + horizontalGridMinSpace: 40, + verticalGridSampling: 1, + lineSmooth: true, + chartPadding: 20, + classNames: { + labels: 'crt-label', + series: 'crt-series', + line: 'crt-line', + point: 'crt-point', + verticalGridLine: 'crt-vertical-grid', + horizontalGridLine: 'crt-horizontal-grid' + } +}; + +var optionsSmall = { + labelSampling: 2, + chartPadding: 10, + labelOffset: 20 +}; + +var data = { + labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], + series: [ + { + name: 'Investment', + className: 'investment', + data: [1, 2, 2.7, 0, 3, 5, 3, 4, 8, 10, 12, 7] + }, + { + name: 'Income', + className: 'income', + data: [0, 1.2, 2, 7, 2.5, 9, 5, 8, 9, 11, 20] + } + ] +}; + +/*// Create new +var chartistGuySnap = Snap('#chartist-guy'); +// Load Chartist guy SVG +Snap.load('/images/chartist-guy.svg', function(fragment) { + fragment.select('svg').attr({ + 'width': '100%', + 'height': '100%' + }); + chartistGuySnap.append(fragment); +});*/ + +// Initialize test line chart with override settings for small breakpoint +var chartist = window.Chartist('#chart', data, options, [[Foundation.media_queries.small, optionsSmall]]); +// On window resize trigger reflow +window.addEventListener('resize', function() { + chartist.reflow(); +}); \ No newline at end of file diff --git a/app/styles/main.scss b/app/styles/main.scss new file mode 100644 index 0000000..a1a9942 --- /dev/null +++ b/app/styles/main.scss @@ -0,0 +1,164 @@ +@import "settings/chartist-web"; +@import "settings/foundation"; +@import "foundation/scss/normalize"; +@import "foundation/scss/foundation"; +@import "compass/css3"; + +body { + line-height: 1.4; +} + +* { + box-sizing: border-box; +} + +h1, h2, h3, h4, h5, h6 { + font-family: "Oxygen"; + font-weight: 300; + text-transform: uppercase; + color: $color-gray; +} + +h1 { + font-size: rem-calc(32px); + + @media #{$medium-up} { + font-size: 46px; + } +} + +h2 { + font-size: 26px; + + @media #{$medium-up} { + font-size: 34px; + } +} + +.page-header { + background-color: $color-yellow; + @include background(linear-gradient(top, $color-yellow 0%, lighten($color-yellow, 5%) 70%, $color-yellow 100%)); + min-height: 200px; + text-align: center; + + > h1 { + font-size: rem-calc(48px); + margin: 0; + display: inline-block; + width: 100%; + font-weight: 700; + color: white; + line-height: 0.5; + margin-top: 2rem; + @include text-shadow(1px 1px rgba(0, 0, 0, 0.2)); + + @media #{$medium-up} { + font-size: rem-calc(80px); + } + + > small { + font-size: rem-calc(19px); + display: inline-block; + width: 100%; + } + } + + > figure { + display: inline-block; + max-width: 380px; + } +} + +.documentation-section { + @include grid-row(); + + > header { + @include grid-column(12); + } + + > .content { + @include grid-column(12); + + @media #{$medium-up} { + @include grid-column(9); + } + + > .chart-container { + width: 100%; + height: 0; + padding-bottom: 67%; + background-color: $color-black; + } + } + + > .side-notes { + @include grid-column(12); + + @media #{$medium-up} { + @include grid-column(3); + } + } +} + +@include keyframes(dashoffset) { + 0% { + stroke-dashoffset: 0px; + } + + 100% { + stroke-dashoffset: -20px; + } +} + +.crt-label { + fill: $color-white; + font-size: 13px; +} + +.crt-vertical-grid { + stroke: lighten($color-black, 5%); + stroke-dasharray: 3px; + stroke-width: 1px; +} + +.crt-horizontal-grid { + stroke: lighten($color-black, 10%); + stroke-dasharray: 3px; + stroke-width: 1px; +} + +.crt-series { + &.investment { + .crt-point { + stroke: $color-grapefruit; + stroke-width: 10px; + stroke-linecap: square; + } + + .crt-line { + fill: none; + stroke-dasharray: 5px; + stroke-dashoffset: 0px; + stroke: $color-grapefruit; + stroke-width: 4px; + + @include animation(dashoffset, 1s linear infinite); + } + } + + &.income { + .crt-point { + stroke: $color-mint; + stroke-width: 13px; + stroke-linecap: round; + } + + .crt-line { + fill: none; + stroke: $color-mint; + stroke-width: 4px; + } + } +} + +@import url("http://fonts.googleapis.com/css?family=Varela+Round|Oxygen:400,300,700"); \ No newline at end of file diff --git a/app/styles/settings/_chartist-web.scss b/app/styles/settings/_chartist-web.scss new file mode 100644 index 0000000..c0dccee --- /dev/null +++ b/app/styles/settings/_chartist-web.scss @@ -0,0 +1,33 @@ +@mixin keyframes($name) { + @-webkit-keyframes #{$name} { + @content; + } + @-moz-keyframes #{$name} { + @content; + } + @-ms-keyframes #{$name} { + @content; + } + @keyframes #{$name} { + @content; + } +} + +@mixin animation($name, $params) { + -webkit-animation: #{$name} $params; /* Safari 4+ */ + -moz-animation: #{$name} $params; /* Fx 5+ */ + -o-animation: #{$name} $params; /* Opera 12+ */ + animation: #{$name} $params; /* IE 10+ */ +} + +$color-white: #EADBC4; +$color-mint: #A8DACF; +$color-green: #046971; +$color-dark-green: #001A25; +$color-grapefruit: #F05B4F; +$color-red: #D70206; +$color-yellow: #F4C63D; +$color-black: #222222; +$color-gray: #453D3F; + +$font-body: "Oxygen"; \ No newline at end of file diff --git a/app/styles/settings/_foundation.scss b/app/styles/settings/_foundation.scss new file mode 100644 index 0000000..2c833a6 --- /dev/null +++ b/app/styles/settings/_foundation.scss @@ -0,0 +1,1194 @@ +// +// FOUNDATION SETTINGS +// + +// This is the default html and body font-size for the base rem value. +// $rem-base: 16px; + +// Allows the use of rem-calc() or lower-bound() in your settings +@import "foundation/scss/foundation/functions"; + +// $experimental: true; + +// The default font-size is set to 100% of the browser style sheet (usually 16px) +// for compatibility with browser-based text zoom or user-set defaults. + +// Since the typical default browser font-size is 16px, that makes the calculation for grid size. +// If you want your base font-size to be different and not have it affect the grid breakpoints, +// set $rem-base to $base-font-size and make sure $base-font-size is a px value. +// $base-font-size: 100%; + +// The $base-line-height is 100% while $base-font-size is 150% +$base-line-height: 150%; + +// We use this to control whether or not CSS classes come through in the gem files. +$include-html-classes: false; +// $include-print-styles: true; +$include-html-global-classes: true; + +// Grid + +// $include-html-grid-classes: $include-html-classes; +// $include-xl-html-grid-classes: false; + +$row-width: rem-calc(1000); +$column-gutter: rem-calc(30); +$total-columns: 12; + +// We use these to control various global styles +$body-bg: $color-white; +$body-font-color: $color-black; +$body-font-family: $font-body; +// $body-font-weight: normal; +// $body-font-style: normal; + +// We use this to control font-smoothing +// $font-smoothing: antialiased; + +// We use these to control text direction settings +// $text-direction: ltr; +// $opposite-direction: right; +// $default-float: left; + +// We use these as default colors throughout +// $primary-color: #008CBA; +// $secondary-color: #e7e7e7; +// $alert-color: #f04124; +// $success-color: #43AC6A; +// $warning-color: #f08a24; +// $info-color: #a0d3e8; + +// We use these to make sure border radius matches unless we want it different. +// $global-radius: 3px; +// $global-rounded: 1000px; + +// We use these to control inset shadow shiny edges and depressions. +// $shiny-edge-size: 0 1px 0; +// $shiny-edge-color: rgba(#fff, .5); +// $shiny-edge-active-color: rgba(#000, .2); + +// Media Query Ranges +$small-range: (0em, 40em); +$medium-range: (40.063em, 64em); +$large-range: (64.063em, 90em); +$xlarge-range: (90.063em, 120em); +$xxlarge-range: (120.063em); + +$screen: "only screen"; + +$landscape: "#{$screen} and (orientation: landscape)"; +$portrait: "#{$screen} and (orientation: portrait)"; + +$small-up: $screen; +$small-only: "#{$screen} and (max-width: #{upper-bound($small-range)})"; + +$medium-up: "#{$screen} and (min-width:#{lower-bound($medium-range)})"; +$medium-only: "#{$screen} and (min-width:#{lower-bound($medium-range)}) and (max-width:#{upper-bound($medium-range)})"; + +$large-up: "#{$screen} and (min-width:#{lower-bound($large-range)})"; +$large-only: "#{$screen} and (min-width:#{lower-bound($large-range)}) and (max-width:#{upper-bound($large-range)})"; + +$xlarge-up: "#{$screen} and (min-width:#{lower-bound($xlarge-range)})"; +$xlarge-only: "#{$screen} and (min-width:#{lower-bound($xlarge-range)}) and (max-width:#{upper-bound($xlarge-range)})"; + +$xxlarge-up: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)})"; +$xxlarge-only: "#{$screen} and (min-width:#{lower-bound($xxlarge-range)}) and (max-width:#{upper-bound($xxlarge-range)})"; + +// Legacy +// $small: $medium-up; +// $medium: $medium-up; +// $large: $large-up; + +//We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet +// $cursor-crosshair-value: crosshair; +// $cursor-default-value: default; +// $cursor-pointer-value: pointer; +// $cursor-help-value: help; +// $cursor-text-value: text; + +// +// TYPOGRAPHY +// + +// $include-html-type-classes: $include-html-classes; + +// We use these to control header font styles +// $header-font-family: $body-font-family; +// $header-font-weight: 300; +// $header-font-style: normal; +// $header-font-color: #222; +// $header-line-height: 1.4; +// $header-top-margin: .2rem; +// $header-bottom-margin: .5rem; +// $header-text-rendering: optimizeLegibility; + +// We use these to control header font sizes +// $h1-font-size: rem-calc(44); +// $h2-font-size: rem-calc(37); +// $h3-font-size: rem-calc(27); +// $h4-font-size: rem-calc(23); +// $h5-font-size: rem-calc(18); +// $h6-font-size: 1rem; + +// These control how subheaders are styled. +// $subheader-line-height: 1.4; +// $subheader-font-color: scale-color($header-font-color, $lightness: 35%); +// $subheader-font-weight: 300; +// $subheader-top-margin: .2rem; +// $subheader-bottom-margin: .5rem; + +// A general styling +// $small-font-size: 60%; +// $small-font-color: scale-color($header-font-color, $lightness: 35%); + +// We use these to style paragraphs +// $paragraph-font-family: inherit; +// $paragraph-font-weight: normal; +// $paragraph-font-size: 1rem; +// $paragraph-line-height: 1.6; +// $paragraph-margin-bottom: rem-calc(20); +// $paragraph-aside-font-size: rem-calc(14); +// $paragraph-aside-line-height: 1.35; +// $paragraph-aside-font-style: italic; +// $paragraph-text-rendering: optimizeLegibility; + +// We use these to style tags +// $code-color: scale-color($alert-color, $lightness: -27%); +// $code-font-family: Consolas, 'Liberation Mono', Courier, monospace; +// $code-font-weight: bold; + +// We use these to style anchors +// $anchor-text-decoration: none; +// $anchor-font-color: $primary-color; +// $anchor-font-color-hover: scale-color($primary-color, $lightness: -14%); + +// We use these to style the
element +// $hr-border-width: 1px; +// $hr-border-style: solid; +// $hr-border-color: #ddd; +// $hr-margin: rem-calc(20); + +// We use these to style lists +// $list-style-position: outside; +// $list-side-margin: 1.1rem; +// $list-ordered-side-margin: 1.4rem; +// $list-side-margin-no-bullet: 0; +// $list-nested-margin: rem-calc(20); +// $definition-list-header-weight: bold; +// $definition-list-header-margin-bottom: .3rem; +// $definition-list-margin-bottom: rem-calc(12); + +// We use these to style blockquotes +// $blockquote-font-color: scale-color($header-font-color, $lightness: 35%); +// $blockquote-padding: rem-calc(9 20 0 19); +// $blockquote-border: 1px solid #ddd; +// $blockquote-cite-font-size: rem-calc(13); +// $blockquote-cite-font-color: scale-color($header-font-color, $lightness: 23%); +// $blockquote-cite-link-color: $blockquote-cite-font-color; + +// Acronym styles +// $acronym-underline: 1px dotted #ddd; + +// We use these to control padding and margin +// $microformat-padding: rem-calc(10 12); +// $microformat-margin: rem-calc(0 0 20 0); + +// We use these to control the border styles +// $microformat-border-width: 1px; +// $microformat-border-style: solid; +// $microformat-border-color: #ddd; + +// We use these to control full name font styles +// $microformat-fullname-font-weight: bold; +// $microformat-fullname-font-size: rem-calc(15); + +// We use this to control the summary font styles +// $microformat-summary-font-weight: bold; + +// We use this to control abbr padding +// $microformat-abbr-padding: rem-calc(0 1); + +// We use this to control abbr font styles +// $microformat-abbr-font-weight: bold; +// $microformat-abbr-font-decoration: none; + +// Accordion + +// $include-html-accordion-classes: $include-html-classes; + +// $accordion-navigation-padding: rem-calc(16); +// $accordion-navigation-bg-color: #efefef ; +// $accordion-navigation-hover-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -5%); +// $accordion-navigation-active-bg-color: scale-color($accordion-navigation-bg-color, $lightness: -3%); +// $accordion-navigation-font-color: #222; +// $accordion-navigation-font-size: rem-calc(16); +// $accordion-navigation-font-family: $body-font-family; + +// $accordion-content-padding: $column-gutter/2; +// $accordion-content-active-bg-color: #fff; + +// Alert Boxes + +// $include-html-alert-classes: $include-html-classes; + +// We use this to control alert padding. +// $alert-padding-top: rem-calc(14); +// $alert-padding-default-float: $alert-padding-top; +// $alert-padding-opposite-direction: $alert-padding-top + rem-calc(10); +// $alert-padding-bottom: $alert-padding-top; + +// We use these to control text style. +// $alert-font-weight: normal; +// $alert-font-size: rem-calc(13); +// $alert-font-color: #fff; +// $alert-font-color-alt: scale-color($secondary-color, $lightness: -66%); + +// We use this for close hover effect. +// $alert-function-factor: -14%; + +// We use these to control border styles. +// $alert-border-style: solid; +// $alert-border-width: 1px; +// $alert-border-color: scale-color($primary-color, $lightness: $alert-function-factor); +// $alert-bottom-margin: rem-calc(20); + +// We use these to style the close buttons +// $alert-close-color: #333; +// $alert-close-top: 50%; +// $alert-close-position: rem-calc(5); +// $alert-close-font-size: rem-calc(22); +// $alert-close-opacity: 0.3; +// $alert-close-opacity-hover: 0.5; +// $alert-close-padding: 9px 6px 4px; + +// We use this to control border radius +// $alert-radius: $global-radius; + +// Block Grid + +// $include-html-grid-classes: $include-html-classes; + +// We use this to control the maximum number of block grid elements per row +// $block-grid-elements: 12; +// $block-grid-default-spacing: rem-calc(20); + +// Enables media queries for block-grid classes. Set to false if writing semantic HTML. +// $block-grid-media-queries: true; + +// Breadcrumbs + +// $include-html-nav-classes: $include-html-classes; + +// We use this to set the background color for the breadcrumb container. +// $crumb-bg: scale-color($secondary-color, $lightness: 55%); + +// We use these to set the padding around the breadcrumbs. +// $crumb-padding: rem-calc(9 14 9); +// $crumb-side-padding: rem-calc(12); + +// We use these to control border styles. +// $crumb-function-factor: -10%; +// $crumb-border-size: 1px; +// $crumb-border-style: solid; +// $crumb-border-color: scale-color($crumb-bg, $lightness: $crumb-function-factor); +// $crumb-radius: $global-radius; + +// We use these to set various text styles for breadcrumbs. +// $crumb-font-size: rem-calc(11); +// $crumb-font-color: $primary-color; +// $crumb-font-color-current: #333; +// $crumb-font-color-unavailable: #999; +// $crumb-font-transform: uppercase; +// $crumb-link-decor: underline; + +// We use these to control the slash between breadcrumbs +// $crumb-slash-color: #aaa; +// $crumb-slash: "/"; + +// +// BUTTONS +// + +// $include-html-button-classes: $include-html-classes; + +// We use these to build padding for buttons. +// $button-tny: rem-calc(10); +// $button-sml: rem-calc(14); +// $button-med: rem-calc(16); +// $button-lrg: rem-calc(18); + +// We use this to control the display property. +// $button-display: inline-block; +// $button-margin-bottom: rem-calc(20); + +// We use these to control button text styles. +// $button-font-family: $body-font-family; +// $button-font-color: #fff; +// $button-font-color-alt: #333; +// $button-font-tny: rem-calc(11); +// $button-font-sml: rem-calc(13); +// $button-font-med: rem-calc(16); +// $button-font-lrg: rem-calc(20); +// $button-font-weight: normal; +// $button-font-align: center; + +// We use these to control various hover effects. +// $button-function-factor: 5%; + +// We use these to control button border styles. +// $button-border-width: 1px; +// $button-border-style: solid; + +// We use this to set the default radius used throughout the core. +// $button-radius: $global-radius; +// $button-round: $global-rounded; + +// We use this to set default opacity for disabled buttons. +// $button-disabled-opacity: 0.7; + +// Button Groups + +// $include-html-button-classes: $include-html-classes; + +// Sets the margin for the right side by default, and the left margin if right-to-left direction is used +// $button-bar-margin-opposite: rem-calc(10); +// $button-group-border-width: 1px; + +// Clearing + +// $include-html-clearing-classes: $include-html-classes; + +// We use these to set the background colors for parts of Clearing. +// $clearing-bg: #333; +// $clearing-caption-bg: $clearing-bg; +// $clearing-carousel-bg: rgba (51,51,51,0.8); +// $clearing-img-bg: $clearing-bg; + +// We use these to style the close button +// $clearing-close-color: #ccc; +// $clearing-close-size: 30px; + +// We use these to style the arrows +// $clearing-arrow-size: 12px; +// $clearing-arrow-color: $clearing-close-color; + +// We use these to style captions +// $clearing-caption-font-color: #ccc; +// $clearing-caption-font-size: 0.875em; +// $clearing-caption-padding: 10px 30px 20px; + +// We use these to make the image and carousel height and style +// $clearing-active-img-height: 85%; +// $clearing-carousel-height: 120px; +// $clearing-carousel-thumb-width: 120px; +// $clearing-carousel-thumb-active-border: 1px solid rgb(255,255,255); + +// Dropdown + +// $include-html-dropdown-classes: $include-html-classes; + +// We use these to controls height and width styles. +// $f-dropdown-max-width: 200px; +// $f-dropdown-height: auto; +// $f-dropdown-max-height: none; +// $f-dropdown-margin-top: 2px; + +// We use this to control the background color +// $f-dropdown-bg: #fff; + +// We use this to set the border styles for dropdowns. +// $f-dropdown-border-style: solid; +// $f-dropdown-border-width: 1px; +// $f-dropdown-border-color: scale-color(#fff, $lightness: -20%); + +// We use these to style the triangle pip. +// $f-dropdown-triangle-size: 6px; +// $f-dropdown-triangle-color: #fff; +// $f-dropdown-triangle-side-offset: 10px; + +// We use these to control styles for the list elements. +// $f-dropdown-list-style: none; +// $f-dropdown-font-color: #555; +// $f-dropdown-font-size: rem-calc(14); +// $f-dropdown-list-padding: rem-calc(5, 10); +// $f-dropdown-line-height: rem-calc(18); +// $f-dropdown-list-hover-bg: #eeeeee ; +// $dropdown-mobile-default-float: 0; + +// We use this to control the styles for when the dropdown has custom content. +// $f-dropdown-content-padding: rem-calc(20); + +// Dropdown Buttons + +// $include-html-button-classes: $include-html-classes; + +// We use these to set the color of the pip in dropdown buttons +// $dropdown-button-pip-color: #fff; +// $dropdown-button-pip-color-alt: #333; + +// $button-pip-tny: rem-calc(6); +// $button-pip-sml: rem-calc(7); +// $button-pip-med: rem-calc(9); +// $button-pip-lrg: rem-calc(11); + +// We use these to style tiny dropdown buttons +// $dropdown-button-padding-tny: $button-pip-tny * 7; +// $dropdown-button-pip-size-tny: $button-pip-tny; +// $dropdown-button-pip-opposite-tny: $button-pip-tny * 3; +// $dropdown-button-pip-top-tny: -$button-pip-tny / 2 + rem-calc(1); + +// We use these to style small dropdown buttons +// $dropdown-button-padding-sml: $button-pip-sml * 7; +// $dropdown-button-pip-size-sml: $button-pip-sml; +// $dropdown-button-pip-opposite-sml: $button-pip-sml * 3; +// $dropdown-button-pip-top-sml: -$button-pip-sml / 2 + rem-calc(1); + +// We use these to style medium dropdown buttons +// $dropdown-button-padding-med: $button-pip-med * 6 + rem-calc(3); +// $dropdown-button-pip-size-med: $button-pip-med - rem-calc(3); +// $dropdown-button-pip-opposite-med: $button-pip-med * 2.5; +// $dropdown-button-pip-top-med: -$button-pip-med / 2 + rem-calc(2); + +// We use these to style large dropdown buttons +// $dropdown-button-padding-lrg: $button-pip-lrg * 5 + rem-calc(3); +// $dropdown-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); +// $dropdown-button-pip-opposite-lrg: $button-pip-lrg * 2.5; +// $dropdown-button-pip-top-lrg: -$button-pip-lrg / 2 + rem-calc(3); + +// Flex Video + +// $include-html-media-classes: $include-html-classes; + +// We use these to control video container padding and margins +// $flex-video-padding-top: rem-calc(25); +// $flex-video-padding-bottom: 67.5%; +// $flex-video-margin-bottom: rem-calc(16); + +// We use this to control widescreen bottom padding +// $flex-video-widescreen-padding-bottom: 57.25%; + +// Forms + +// $include-html-form-classes: $include-html-classes; + +// We use this to set the base for lots of form spacing and positioning styles +// $form-spacing: rem-calc(16); + +// We use these to style the labels in different ways +// $form-label-pointer: pointer; +// $form-label-font-size: rem-calc(14); +// $form-label-font-weight: normal; +// $form-label-line-height: 1.5; +// $form-label-font-color: scale-color(#000, $lightness: 30%); +// $form-label-bottom-margin: 0; +// $input-font-family: inherit; +// $input-font-color: rgba(0,0,0,0.75); +// $input-font-size: rem-calc(14); +// $input-bg-color: #fff; +// $input-focus-bg-color: scale-color(#fff, $lightness: -2%); +// $input-border-color: scale-color(#fff, $lightness: -20%); +// $input-focus-border-color: scale-color(#fff, $lightness: -40%); +// $input-border-style: solid; +// $input-border-width: 1px; +// $input-border-radius: $global-radius; +// $input-disabled-bg: #ddd; +// $input-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); +// $input-include-glowing-effect: true; + +// We use these to style the fieldset border and spacing. +// $fieldset-border-style: solid; +// $fieldset-border-width: 1px; +// $fieldset-border-color: #ddd; +// $fieldset-padding: rem-calc(20); +// $fieldset-margin: rem-calc(18 0); + +// We use these to style the legends when you use them +// $legend-bg: #fff; +// $legend-font-weight: bold; +// $legend-padding: rem-calc(0 3); + +// We use these to style the prefix and postfix input elements +// $input-prefix-bg: scale-color(#fff, $lightness: -5%); +// $input-prefix-border-color: scale-color(#fff, $lightness: -20%); +// $input-prefix-border-size: 1px; +// $input-prefix-border-type: solid; +// $input-prefix-overflow: hidden; +// $input-prefix-font-color: #333; +// $input-prefix-font-color-alt: #fff; + +// We use these to style the error states for inputs and labels +// $input-error-message-padding: rem-calc(6 9 9); +// $input-error-message-top: -1px; +// $input-error-message-font-size: rem-calc(12); +// $input-error-message-font-weight: normal; +// $input-error-message-font-style: italic; +// $input-error-message-font-color: #fff; +// $input-error-message-font-color-alt: #333; + +// We use this to style the glowing effect of inputs when focused +// $glowing-effect-fade-time: 0.45s; +// $glowing-effect-color: $input-focus-border-color; + +// Select variables +// $select-bg-color: #fafafa; + +// Inline Lists + +// $include-html-inline-list-classes: $include-html-classes; + +// We use this to control the margins and padding of the inline list. +// $inline-list-top-margin: 0; +// $inline-list-opposite-margin: 0; +// $inline-list-bottom-margin: rem-calc(17); +// $inline-list-default-float-margin: rem-calc(-22); + +// $inline-list-padding: 0; + +// We use this to control the overflow of the inline list. +// $inline-list-overflow: hidden; + +// We use this to control the list items +// $inline-list-display: block; + +// We use this to control any elments within list items +// $inline-list-children-display: block; + +// Joyride + +// $include-html-joyride-classes: $include-html-classes; + +// Controlling default Joyride styles +// $joyride-tip-bg: #333; +// $joyride-tip-default-width: 300px; +// $joyride-tip-padding: rem-calc(18 20 24); +// $joyride-tip-border: solid 1px #555; +// $joyride-tip-radius: 4px; +// $joyride-tip-position-offset: 22px; + +// Here, we're setting the tip dont styles +// $joyride-tip-font-color: #fff; +// $joyride-tip-font-size: rem-calc(14); +// $joyride-tip-header-weight: bold; + +// This changes the nub size +// $joyride-tip-nub-size: 10px; + +// This adjusts the styles for the timer when its enabled +// $joyride-tip-timer-width: 50px; +// $joyride-tip-timer-height: 3px; +// $joyride-tip-timer-color: #666; + +// This changes up the styles for the close button +// $joyride-tip-close-color: #777; +// $joyride-tip-close-size: 24px; +// $joyride-tip-close-weight: normal; + +// When Joyride is filling the screen, we use this style for the bg +// $joyride-screenfill: rgba(0,0,0,0.5); + +// Keystrokes + +// $include-html-type-classes: $include-html-classes; + +// We use these to control text styles. +// $keystroke-font: "Consolas", "Menlo", "Courier", monospace; +// $keystroke-font-size: rem-calc(14); +// $keystroke-font-color: #222; +// $keystroke-font-color-alt: #fff; +// $keystroke-function-factor: -7%; + +// We use this to control keystroke padding. +// $keystroke-padding: rem-calc(2 4 0); + +// We use these to control background and border styles. +// $keystroke-bg: scale-color(#fff, $lightness: $keystroke-function-factor); +// $keystroke-border-style: solid; +// $keystroke-border-width: 1px; +// $keystroke-border-color: scale-color($keystroke-bg, $lightness: $keystroke-function-factor); +// $keystroke-radius: $global-radius; + +// Labels + +// $include-html-label-classes: $include-html-classes; + +// We use these to style the labels +// $label-padding: rem-calc(4 8 6); +// $label-radius: $global-radius; + +// We use these to style the label text +// $label-font-sizing: rem-calc(11); +// $label-font-weight: normal; +// $label-font-color: #333; +// $label-font-color-alt: #fff; +// $label-font-family: $body-font-family; + +// Magellan + +// $include-html-magellan-classes: $include-html-classes; + +// $magellan-bg: #fff; +// $magellan-padding: 10px; + +// Off-canvas + +// $tabbar-bg: #333; +// $tabbar-height: rem-calc(45); +// $tabbar-line-height: $tabbar-height; +// $tabbar-color: #FFF; +// $tabbar-middle-padding: 0 rem-calc(10); + +// Off Canvas Divider Styles +// $tabbar-right-section-border: solid 1px scale-color($tabbar-bg, $lightness: 13%); +// $tabbar-left-section-border: solid 1px scale-color($tabbar-bg, $lightness: -50%); + +// Off Canvas Tab Bar Headers +// $tabbar-header-color: #FFF; +// $tabbar-header-weight: bold; +// $tabbar-header-line-height: $tabbar-height; +// $tabbar-header-margin: 0; + +// Off Canvas Menu Variables +// $off-canvas-width: 250px; +// $off-canvas-bg: #333; + +// Off Canvas Menu List Variables +// $off-canvas-label-padding: 0.3rem rem-calc(15); +// $off-canvas-label-color: #999; +// $off-canvas-label-text-transform: uppercase; +// $off-canvas-label-font-weight: bold; +// $off-canvas-label-bg: #444; +// $off-canvas-label-border-top: 1px solid scale-color(#444, $lightness: 14%); +// $off-canvas-label-border-bottom: none; +// $off-canvas-label-margin:0; +// $off-canvas-link-padding: rem-calc(10, 15); +// $off-canvas-link-color: rgba(#FFF, 0.7); +// $off-canvas-link-border-bottom: 1px solid scale-color($off-canvas-bg, $lightness: -25%); + +// Off Canvas Menu Icon Variables +// $tabbar-menu-icon-color: #FFF; +// $tabbar-menu-icon-hover: scale-color($tabbar-menu-icon-color, $lightness: -30%); + +// $tabbar-menu-icon-text-indent: rem-calc(35); +// $tabbar-menu-icon-width: $tabbar-height; +// $tabbar-menu-icon-height: $tabbar-height; +// $tabbar-menu-icon-line-height: rem-calc(33); +// $tabbar-menu-icon-padding: 0; + +// $tabbar-hamburger-icon-width: rem-calc(16); +// $tabbar-hamburger-icon-left: rem-calc(13); +// $tabbar-hamburger-icon-top: rem-calc(5); + +// Off Canvas Back-Link Overlay +// $off-canvas-overlay-transition: background 300ms ease; +// $off-canvas-overlay-cursor: pointer; +// $off-canvas-overlay-box-shadow: -4px 0 4px rgba(#000, 0.5), 4px 0 4px rgba(#000, 0.5); +// $off-canvas-overlay-background: rgba(#FFF, 0.2); +// $off-canvas-overlay-background-hover: rgba(#FFF, 0.05); + +// Transition Variables +// $menu-slide: "transform 500ms ease"; + +// Orbit + +// $include-html-orbit-classes: $include-html-classes; + +// We use these to control the caption styles +// $orbit-container-bg: none; +// $orbit-caption-bg: rgba(51,51,51, 0.8); +// $orbit-caption-font-color: #fff; +// $orbit-caption-font-size: rem-calc(14); +// $orbit-caption-position: "bottom"; // Supported values: "bottom", "under" +// $orbit-caption-padding: rem-calc(10 14); +// $orbit-caption-height: auto; + +// We use these to control the left/right nav styles +// $orbit-nav-bg: none; +// $orbit-nav-bg-hover: rgba(0,0,0,0.3); +// $orbit-nav-arrow-color: #fff; +// $orbit-nav-arrow-color-hover: #fff; + +// We use these to control the timer styles +// $orbit-timer-bg: rgba(255,255,255,0.3); +// $orbit-timer-show-progress-bar: true; + +// We use these to control the bullet nav styles +// $orbit-bullet-nav-color: #ccc; +// $orbit-bullet-nav-color-active: #999; +// $orbit-bullet-radius: rem-calc(9); + +// We use these to controls the style of slide numbers +// $orbit-slide-number-bg: rgba(0,0,0,0); +// $orbit-slide-number-font-color: #fff; +// $orbit-slide-number-padding: rem-calc(5); + +// Graceful Loading Wrapper and preloader +// $wrapper-class: "slideshow-wrapper"; +// $preloader-class: "preloader"; + +// Pagination + +// $include-html-nav-classes: $include-html-classes; + +// We use these to control the pagination container +// $pagination-height: rem-calc(24); +// $pagination-margin: rem-calc(-5); + +// We use these to set the list-item properties +// $pagination-li-float: $default-float; +// $pagination-li-height: rem-calc(24); +// $pagination-li-font-color: #222; +// $pagination-li-font-size: rem-calc(14); +// $pagination-li-margin: rem-calc(5); + +// We use these for the pagination anchor links +// $pagination-link-pad: rem-calc(1 10 1); +// $pagination-link-font-color: #999; +// $pagination-link-active-bg: scale-color(#fff, $lightness: -10%); + +// We use these for disabled anchor links +// $pagination-link-unavailable-cursor: default; +// $pagination-link-unavailable-font-color: #999; +// $pagination-link-unavailable-bg-active: transparent; + +// We use these for currently selected anchor links +// $pagination-link-current-background: $primary-color; +// $pagination-link-current-font-color: #fff; +// $pagination-link-current-font-weight: bold; +// $pagination-link-current-cursor: default; +// $pagination-link-current-active-bg: $primary-color; + +// Panels + +// $include-html-panel-classes: $include-html-classes; + +// We use these to control the background and border styles +// $panel-bg: scale-color(#fff, $lightness: -5%); +// $panel-border-style: solid; +// $panel-border-size: 1px; + +// We use this % to control how much we darken things on hover +// $panel-function-factor: -11%; +// $panel-border-color: scale-color($panel-bg, $lightness: $panel-function-factor); + +// We use these to set default inner padding and bottom margin +// $panel-margin-bottom: rem-calc(20); +// $panel-padding: rem-calc(20); + +// We use these to set default font colors +// $panel-font-color: #333; +// $panel-font-color-alt: #fff; + +// $panel-header-adjust: true; +// $callout-panel-link-color: $primary-color; + +// Pricing Tables + +// $include-html-pricing-classes: $include-html-classes; + +// We use this to control the border color +// $price-table-border: solid 1px #ddd; + +// We use this to control the bottom margin of the pricing table +// $price-table-margin-bottom: rem-calc(20); + +// We use these to control the title styles +// $price-title-bg: #333; +// $price-title-padding: rem-calc(15 20); +// $price-title-align: center; +// $price-title-color: #eee; +// $price-title-weight: normal; +// $price-title-size: rem-calc(16); +// $price-title-font-family: $body-font-family; + +// We use these to control the price styles +// $price-money-bg: #f6f6f6 ; +// $price-money-padding: rem-calc(15 20); +// $price-money-align: center; +// $price-money-color: #333; +// $price-money-weight: normal; +// $price-money-size: rem-calc(32); +// $price-money-font-family: $body-font-family; + + +// We use these to control the description styles +// $price-bg: #fff; +// $price-desc-color: #777; +// $price-desc-padding: rem-calc(15); +// $price-desc-align: center; +// $price-desc-font-size: rem-calc(12); +// $price-desc-weight: normal; +// $price-desc-line-height: 1.4; +// $price-desc-bottom-border: dotted 1px #ddd; + +// We use these to control the list item styles +// $price-item-color: #333; +// $price-item-padding: rem-calc(15); +// $price-item-align: center; +// $price-item-font-size: rem-calc(14); +// $price-item-weight: normal; +// $price-item-bottom-border: dotted 1px #ddd; + +// We use these to control the CTA area styles +// $price-cta-bg: #fff; +// $price-cta-align: center; +// $price-cta-padding: rem-calc(20 20 0); + +// Progress Meters + +// $include-html-media-classes: $include-html-classes; + +// We use this to se the prog bar height +// $progress-bar-height: rem-calc(25); +// $progress-bar-color: #f6f6f6 ; + +// We use these to control the border styles +// $progress-bar-border-color: scale-color(#fff, $lightness: -20%); +// $progress-bar-border-size: 1px; +// $progress-bar-border-style: solid; +// $progress-bar-border-radius: $global-radius; + +// We use these to control the margin & padding +// $progress-bar-pad: rem-calc(2); +// $progress-bar-margin-bottom: rem-calc(10); + +// We use these to set the meter colors +// $progress-meter-color: $primary-color; +// $progress-meter-secondary-color: $secondary-color; +// $progress-meter-success-color: $success-color; +// $progress-meter-alert-color: $alert-color; + +// Reveal + +// $include-html-reveal-classes: $include-html-classes; + +// We use these to control the style of the reveal overlay. +// $reveal-overlay-bg: rgba(#000, .45); +// $reveal-overlay-bg-old: #000; + +// We use these to control the style of the modal itself. +// $reveal-modal-bg: #fff; +// $reveal-position-top: 50px; +// $reveal-default-width: 80%; +// $reveal-modal-padding: rem-calc(20); +// $reveal-box-shadow: 0 0 10px rgba(#000,.4); + +// We use these to style the reveal close button +// $reveal-close-font-size: rem-calc(22); +// $reveal-close-top: rem-calc(8); +// $reveal-close-side: rem-calc(11); +// $reveal-close-color: #aaa; +// $reveal-close-weight: bold; + +// We use these to control the modal border +// $reveal-border-style: solid; +// $reveal-border-width: 1px; +// $reveal-border-color: #666; + +// $reveal-modal-class: "reveal-modal"; +// $close-reveal-modal-class: "close-reveal-modal"; + +// Side Nav + +// $include-html-nav-classes: $include-html-classes; + +// We use this to control padding. +// $side-nav-padding: rem-calc(14 0); + +// We use these to control list styles. +// $side-nav-list-type: none; +// $side-nav-list-position: inside; +// $side-nav-list-margin: rem-calc(0 0 7 0); + +// We use these to control link styles. +// $side-nav-link-color: $primary-color; +// $side-nav-link-color-active: scale-color($side-nav-link-color, $lightness: 30%); +// $side-nav-link-color-hover: scale-color($side-nav-link-color, $lightness: 30%); +// $side-nav-font-size: rem-calc(14); +// $side-nav-font-weight: normal; +// $side-nav-font-family: $body-font-family; +// $side-nav-active-font-family: $side-nav-font-family; + + + +// We use these to control border styles +// $side-nav-divider-size: 1px; +// $side-nav-divider-style: solid; +// $side-nav-divider-color: scale-color(#fff, $lightness: -10%); + +// Split Buttons + +// $include-html-button-classes: $include-html-classes; + +// We use these to control different shared styles for Split Buttons +// $split-button-function-factor: 10%; +// $split-button-pip-color: #fff; +// $split-button-pip-color-alt: #333; +// $split-button-active-bg-tint: rgba(0,0,0,0.1); + +// We use these to control tiny split buttons +// $split-button-padding-tny: $button-pip-tny * 10; +// $split-button-span-width-tny: $button-pip-tny * 6; +// $split-button-pip-size-tny: $button-pip-tny; +// $split-button-pip-top-tny: $button-pip-tny * 2; +// $split-button-pip-default-float-tny: rem-calc(-6); + +// We use these to control small split buttons +// $split-button-padding-sml: $button-pip-sml * 10; +// $split-button-span-width-sml: $button-pip-sml * 6; +// $split-button-pip-size-sml: $button-pip-sml; +// $split-button-pip-top-sml: $button-pip-sml * 1.5; +// $split-button-pip-default-float-sml: rem-calc(-6); + +// We use these to control medium split buttons +// $split-button-padding-med: $button-pip-med * 9; +// $split-button-span-width-med: $button-pip-med * 5.5; +// $split-button-pip-size-med: $button-pip-med - rem-calc(3); +// $split-button-pip-top-med: $button-pip-med * 1.5; +// $split-button-pip-default-float-med: rem-calc(-6); + +// We use these to control large split buttons +// $split-button-padding-lrg: $button-pip-lrg * 8; +// $split-button-span-width-lrg: $button-pip-lrg * 5; +// $split-button-pip-size-lrg: $button-pip-lrg - rem-calc(6); +// $split-button-pip-top-lrg: $button-pip-lrg + rem-calc(5); +// $split-button-pip-default-float-lrg: rem-calc(-6); + +// Sub Nav + +// $include-html-nav-classes: $include-html-classes; + +// We use these to control margin and padding +// $sub-nav-list-margin: rem-calc(-4 0 18); +// $sub-nav-list-padding-top: rem-calc(4); + +// We use this to control the definition +// $sub-nav-font-family: $body-font-family; +// $sub-nav-font-size: rem-calc(14); +// $sub-nav-font-color: #999; +// $sub-nav-font-weight: normal; +// $sub-nav-text-decoration: none; +// $sub-nav-border-radius: 3px; +// $sub-nav-font-color-hover: scale-color($sub-nav-font-color, $lightness: -25%); + + +// We use these to control the active item styles + +// $sub-nav-active-font-weight: normal; +// $sub-nav-active-bg: $primary-color; +// $sub-nav-active-bg-hover: scale-color($sub-nav-active-bg, $lightness: -14%); +// $sub-nav-active-color: #fff; +// $sub-nav-active-padding: rem-calc(3 16); +// $sub-nav-active-cursor: default; + +// $sub-nav-item-divider: ""; +// $sub-nav-item-divider-margin: rem-calc(12); + +// +// SWITCH +// + +// $include-html-form-classes: $include-html-classes; + +// Controlling border styles and background colors for the switch container +// $switch-border-color: scale-color(#fff, $lightness: -20%); +// $switch-border-style: solid; +// $switch-border-width: 1px; +// $switch-bg: #fff; + +// We use these to control the switch heights for our default classes +// $switch-height-tny: 22px; +// $switch-height-sml: 28px; +// $switch-height-med: 36px; +// $switch-height-lrg: 44px; +// $switch-bottom-margin: rem-calc(20); + +// We use these to control default font sizes for our classes. +// $switch-font-size-tny: 11px; +// $switch-font-size-sml: 12px; +// $switch-font-size-med: 14px; +// $switch-font-size-lrg: 17px; +// $switch-label-side-padding: 6px; + +// We use these to style the switch-paddle +// $switch-paddle-bg: #fff; +// $switch-paddle-fade-to-color: scale-color($switch-paddle-bg, $lightness: -10%); +// $switch-paddle-border-color: scale-color($switch-paddle-bg, $lightness: -35%); +// $switch-paddle-border-width: 1px; +// $switch-paddle-border-style: solid; +// $switch-paddle-transition-speed: .1s; +// $switch-paddle-transition-ease: ease-out; +// $switch-positive-color: scale-color($success-color, $lightness: 94%); +// $switch-negative-color: #f5f5f5; + +// Outline Style for tabbing through switches +// $switch-label-outline: 1px dotted #888; + +// Tables + +// $include-html-table-classes: $include-html-classes; + +// These control the background color for the table and even rows +// $table-bg: #fff; +// $table-even-row-bg: #f9f9f9 ; + +// These control the table cell border style +// $table-border-style: solid; +// $table-border-size: 1px; +// $table-border-color: #ddd; + +// These control the table head styles +// $table-head-bg: #f5f5f5 ; +// $table-head-font-size: rem-calc(14); +// $table-head-font-color: #222; +// $table-head-font-weight: bold; +// $table-head-padding: rem-calc(8 10 10); + +// These control the row padding and font styles +// $table-row-padding: rem-calc(9 10); +// $table-row-font-size: rem-calc(14); +// $table-row-font-color: #222; +// $table-line-height: rem-calc(18); + +// These are for controlling the display and margin of tables +// $table-display: table-cell; +// $table-margin-bottom: rem-calc(20); + +// +// TABS +// + +// $include-html-tabs-classes: $include-html-classes; + +// $tabs-navigation-padding: rem-calc(16); +// $tabs-navigation-bg-color: #efefef ; +// $tabs-navigation-active-bg-color: #fff; +// $tabs-navigation-hover-bg-color: scale-color($tabs-navigation-bg-color, $lightness: -6%); +// $tabs-navigation-font-color: #222; +// $tabs-navigation-font-size: rem-calc(16); +// $tabs-navigation-font-family: $body-font-family; + +// $tabs-content-margin-bottom: rem-calc(24); +// $tabs-content-padding: $column-gutter/2; + +// $tabs-vertical-navigation-margin-bottom: 1.25rem; + +// +// THUMBNAILS +// + +// $include-html-media-classes: $include-html-classes; + +// We use these to control border styles +// $thumb-border-style: solid; +// $thumb-border-width: 4px; +// $thumb-border-color: #fff; +// $thumb-box-shadow: 0 0 0 1px rgba(#000,.2); +// $thumb-box-shadow-hover: 0 0 6px 1px rgba($primary-color,0.5); + +// Radius and transition speed for thumbs +// $thumb-radius: $global-radius; +// $thumb-transition-speed: 200ms; + +// +// TOOLTIPS +// + +// $include-html-tooltip-classes: $include-html-classes; + +// $has-tip-border-bottom: dotted 1px #ccc; +// $has-tip-font-weight: bold; +// $has-tip-font-color: #333; +// $has-tip-border-bottom-hover: dotted 1px scale-color($primary-color, $lightness: -55%); +// $has-tip-font-color-hover: $primary-color; +// $has-tip-cursor-type: help; + +// $tooltip-padding: rem-calc(12); +// $tooltip-bg: #333; +// $tooltip-font-size: rem-calc(14); +// $tooltip-font-weight: normal; +// $tooltip-font-color: #fff; +// $tooltip-line-height: 1.3; +// $tooltip-close-font-size: rem-calc(10); +// $tooltip-close-font-weight: normal; +// $tooltip-close-font-color: #777; +// $tooltip-font-size-sml: rem-calc(14); +// $tooltip-radius: $global-radius; +// $tooltip-rounded: $global-rounded; +// $tooltip-pip-size: 5px; + +// +// TOP BAR +// + +// $include-html-top-bar-classes: $include-html-classes; + +// Background color for the top bar +// $topbar-bg-color: #333; +// $topbar-bg: $topbar-bg-color; + +// Height and margin +// $topbar-height: 45px; +// $topbar-margin-bottom: 0; + +// Controlling the styles for the title in the top bar +// $topbar-title-weight: normal; +// $topbar-title-font-size: rem-calc(17); + +// Style the top bar dropdown elements +// $topbar-dropdown-bg: #333; +// $topbar-dropdown-link-color: #fff; +// $topbar-dropdown-link-bg: #333; +// $topbar-dropdown-link-weight: normal; +// $topbar-dropdown-toggle-size: 5px; +// $topbar-dropdown-toggle-color: #fff; +// $topbar-dropdown-toggle-alpha: 0.4; + +// Set the link colors and styles for top-level nav +// $topbar-link-color: #fff; +// $topbar-link-color-hover: #fff; +// $topbar-link-color-active: #fff; +// $topbar-link-color-active-hover: #fff; +// $topbar-link-weight: normal; +// $topbar-link-font-size: rem-calc(13); +// $topbar-link-hover-lightness: -10%; // Darken by 10% +// $topbar-link-bg-hover: #272727 ; +// $topbar-link-bg-active: $primary-color; +// $topbar-link-bg-active-hover: scale-color($primary-color, $lightness: -14%); +// $topbar-link-font-family: $body-font-family; + +// $topbar-button-font-size: 0.75rem; + +// $topbar-dropdown-label-color: #777; +// $topbar-dropdown-label-text-transform: uppercase; +// $topbar-dropdown-label-font-weight: bold; +// $topbar-dropdown-label-font-size: rem-calc(10); +// $topbar-dropdown-label-bg: #333; + +// Top menu icon styles +// $topbar-menu-link-transform: uppercase; +// $topbar-menu-link-font-size: rem-calc(13); +// $topbar-menu-link-weight: bold; +// $topbar-menu-link-color: #fff; +// $topbar-menu-icon-color: #fff; +// $topbar-menu-link-color-toggled: #888; +// $topbar-menu-icon-color-toggled: #888; + +// Transitions and breakpoint styles +// $topbar-transition-speed: 300ms; +// Using rem-calc for the below breakpoint causes issues with top bar +// $topbar-breakpoint: #{upper-bound($medium-range)}; // Change to 9999px for always mobile layout +// $topbar-media-query: "only screen and (min-width: #{upper-bound($medium-range)})"; + +// Divider Styles +// $topbar-divider-border-bottom: solid 1px scale-color($topbar-bg-color, $lightness: 13%); +// $topbar-divider-border-top: solid 1px scale-color($topbar-bg-color, $lightness: -50%); + +// Sticky Class +// $topbar-sticky-class: ".sticky"; +// $topbar-arrows: true; //Set false to remove the triangle icon from the menu item + +// +// VISIBILITY CLASSES +// + +// $include-html-visibility-classes: $include-html-classes; diff --git a/bower.json b/bower.json new file mode 100644 index 0000000..27a1e50 --- /dev/null +++ b/bower.json @@ -0,0 +1,10 @@ +{ + "name": "chartist", + "version": "0.0.1", + "dependencies": { + "json3": "~3.2.6", + "es5-shim": "~2.1.0", + "snap.svg": "~0.2.0", + "foundation": "~5.1.1" + } +} diff --git a/karma-e2e.conf.js b/karma-e2e.conf.js new file mode 100644 index 0000000..fca2d64 --- /dev/null +++ b/karma-e2e.conf.js @@ -0,0 +1,54 @@ +// Karma configuration +// http://karma-runner.github.io/0.10/config/configuration-file.html + +module.exports = function(config) { + config.set({ + // base path, that will be used to resolve files and exclude + basePath: '', + + // testing framework to use (jasmine/mocha/qunit/...) + frameworks: ['jasmine'], + + // list of files / patterns to load in the browser + files: [ + 'test/e2e/**/*.js' + ], + + // list of files / patterns to exclude + exclude: [], + + // web server port + port: 8080, + + // level of logging + // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG + logLevel: config.LOG_INFO, + + + // enable / disable watching file and executing tests whenever any file changes + autoWatch: false, + + + // Start these browsers, currently available: + // - Chrome + // - ChromeCanary + // - Firefox + // - Opera + // - Safari (only Mac) + // - PhantomJS + // - IE (only Windows) + browsers: ['Chrome'], + + + // Continuous Integration mode + // if true, it capture browsers, run tests and exit + singleRun: false + + // Uncomment the following lines if you are using grunt's server to run the tests + // proxies: { + // '/': 'http://localhost:9000/' + // }, + // URL root prevent conflicts with the site root + // urlRoot: '_karma_' + }); +}; diff --git a/karma.conf.js b/karma.conf.js new file mode 100644 index 0000000..a63dd0f --- /dev/null +++ b/karma.conf.js @@ -0,0 +1,54 @@ +// Karma configuration +// http://karma-runner.github.io/0.10/config/configuration-file.html + +module.exports = function(config) { + config.set({ + // base path, that will be used to resolve files and exclude + basePath: '', + + // testing framework to use (jasmine/mocha/qunit/...) + frameworks: ['jasmine'], + + // list of files / patterns to load in the browser + files: [ + 'app/bower_components/jquery/dist/jquery.min.js', + 'app/bower_components/fastclick/lib/fastclick.js', + 'app/bower_components/foundation/js/foundation.min.js', + 'app/bower_components/snap.svg/dist/snap.svg-min.js', + 'app/scripts/*.js', + 'app/scripts/**/*.js', + 'test/mock/**/*.js', + 'test/spec/**/*.js' + ], + + // list of files / patterns to exclude + exclude: [], + + // web server port + port: 8080, + + // level of logging + // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG + logLevel: config.LOG_INFO, + + + // enable / disable watching file and executing tests whenever any file changes + autoWatch: false, + + + // Start these browsers, currently available: + // - Chrome + // - ChromeCanary + // - Firefox + // - Opera + // - Safari (only Mac) + // - PhantomJS + // - IE (only Windows) + browsers: ['Chrome'], + + + // Continuous Integration mode + // if true, it capture browsers, run tests and exit + singleRun: false + }); +}; diff --git a/package.json b/package.json new file mode 100644 index 0000000..900fc2e --- /dev/null +++ b/package.json @@ -0,0 +1,51 @@ +{ + "name": "chartist", + "version": "0.0.1", + "dependencies": {}, + "devDependencies": { + "grunt": "~0.4.1", + "grunt-autoprefixer": "~0.4.0", + "grunt-bower-install": "~0.7.0", + "grunt-concurrent": "~0.4.1", + "grunt-contrib-clean": "~0.5.0", + "grunt-contrib-coffee": "~0.7.0", + "grunt-contrib-compass": "~0.6.0", + "grunt-contrib-concat": "~0.3.0", + "grunt-contrib-connect": "~0.5.0", + "grunt-contrib-copy": "~0.4.1", + "grunt-contrib-cssmin": "~0.7.0", + "grunt-contrib-htmlmin": "~0.1.3", + "grunt-contrib-imagemin": "~0.3.0", + "grunt-contrib-jshint": "~0.7.1", + "grunt-contrib-uglify": "~0.2.0", + "grunt-contrib-watch": "~0.5.2", + "grunt-google-cdn": "~0.2.0", + "grunt-newer": "~0.5.4", + "grunt-ngmin": "~0.0.2", + "grunt-rev": "~0.1.0", + "grunt-svgmin": "~0.2.0", + "grunt-usemin": "~2.0.0", + "jshint-stylish": "~0.1.3", + "load-grunt-tasks": "~0.2.0", + "time-grunt": "~0.2.1", + "karma-ng-scenario": "~0.1.0", + "grunt-karma": "~0.6.2", + "karma-script-launcher": "~0.1.0", + "karma-chrome-launcher": "~0.1.2", + "karma-firefox-launcher": "~0.1.3", + "karma-html2js-preprocessor": "~0.1.0", + "karma-jasmine": "~0.1.5", + "requirejs": "~2.1.11", + "karma-requirejs": "~0.2.1", + "karma-coffee-preprocessor": "~0.1.3", + "karma-phantomjs-launcher": "~0.1.2", + "karma": "~0.10.9", + "karma-ng-html2js-preprocessor": "~0.1.0" + }, + "engines": { + "node": ">=0.8.0" + }, + "scripts": { + "test": "grunt test" + } +} diff --git a/test/.jshintrc b/test/.jshintrc new file mode 100644 index 0000000..b1be025 --- /dev/null +++ b/test/.jshintrc @@ -0,0 +1,36 @@ +{ + "node": true, + "browser": true, + "esnext": true, + "bitwise": true, + "camelcase": true, + "curly": true, + "eqeqeq": true, + "immed": true, + "indent": 2, + "latedef": true, + "newcap": true, + "noarg": true, + "quotmark": "single", + "regexp": true, + "undef": true, + "unused": true, + "strict": true, + "trailing": true, + "smarttabs": true, + "globals": { + "after": false, + "afterEach": false, + "angular": false, + "before": false, + "beforeEach": false, + "browser": false, + "describe": false, + "expect": false, + "inject": false, + "it": false, + "jasmine": false, + "spyOn": false + } +} + diff --git a/test/runner.html b/test/runner.html new file mode 100644 index 0000000..d179456 --- /dev/null +++ b/test/runner.html @@ -0,0 +1,9 @@ + + + + End2end Test Runner + + + + + \ No newline at end of file