commit 11a66a3d72f5e9e5adbbb73d8ae32f9deb2d9626 Author: Gion Kunz Date: Tue Feb 25 22:24:50 2014 +0100 Refactored structure and added basic website / documentation 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 0000000..6527905 Binary files /dev/null and b/app/favicon.ico differ diff --git a/app/images/chartist-guy.svg b/app/images/chartist-guy.svg new file mode 100755 index 0000000..ce6a5df --- /dev/null +++ b/app/images/chartist-guy.svg @@ -0,0 +1,127 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/app/images/yeoman.png b/app/images/yeoman.png new file mode 100644 index 0000000..92497ad Binary files /dev/null and b/app/images/yeoman.png differ 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