diff --git a/.gitignore b/.gitignore index cf2aa3e..651780f 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ style.css # Folders bower_components/ node_modules/ +external/ icons/svg-min/ .sass-cache/ dist/ diff --git a/Gruntfile.js b/Gruntfile.js index 69c3890..7601acb 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -1,199 +1,10 @@ module.exports = function( grunt ) { -require( "load-grunt-tasks" )( grunt ); - -var config = { - htmllint: { - dist: { - options: {}, - src: [ "demos/*.html" ] - } - }, - autoprefixer: { - dist: { - options: { - map: true, - browsers: [ - "> 1%", - "last 2 versions", - "safari >= 5.1", - "ios >= 6.1", - "android 2.3", - "android >= 4", - "ie >= 8" - ] - }, - src: "dist/css/*.css" - } - }, - csscomb: { - dist: { - files: { - "dist/css/chassis.css": "dist/css/chassis.css" - } - }, - scss: { - files: [ { - expand: true, - src: [ "scss/**/*.scss" ] - } ] - } - }, - cssmin: { - options: { - report: "gzip", - sourceMap: true - }, - target: { - files: { - "dist/css/chassis.min.css": "dist/css/chassis.css" - } - } - }, - csslint: { - src: [ "dist/css/chassis.lint.css", "dist/css/chassis.lint.css", "demos/demos.css" ] - }, - jscs: { - all: [ "*.js", "performance/**/*.js" ] - }, - jshint: { - files: [ "*.js", "performance/**/*.js" ], - options: { - jshintrc: ".jshintrc" - } - }, - npmcopy: { - options: { - destPrefix: "external" - }, - normalize: { - files: { - "normalize.css/LICENSE.md": "normalize.css/LICENSE.md", - "normalize.css/normalize.scss": "normalize.css/normalize.css" - } - } - }, - sass: { - - // This is the same as lint below except including normalize.css - dist: { - options: { - sourceMap: true, - - // This actually does nested until libsass updates to support expanded - outputStyle: "expanded" - }, - files: { - "dist/css/chassis.css": "scss/style.scss" - } - }, - - // This is everything except normalize.css which won't pass our lint settings - lint: { - options: { - sourceMap: true, - - // This actually does nested until libsass updates to support expanded - outputStyle: "expanded" - }, - files: { - "dist/css/chassis.lint.css": "scss/lint.scss" - } - } - }, - - // Minifies SVGs - svgmin: { - options: { - plugins: [ - { - removeViewBox: false - }, - { - removeUselessStrokeAndFill: false - } - ] - }, - dist: { - files: [ { - expand: true, - cwd: "icons/svg-source", - src: [ "*.svg" ], - dest: "icons/svg-min/", - ext: ".svg" - } ] - } - }, - - // Combines SVGs into single file - svgstore: { - defaults: { - options: { - - // This will prefix each ID - prefix: "icon-", - - // Adds attributes to the resulting SVG - svg: { - viewBox: "0 0 24 24", - xmlns: "http://www.w3.org/2000/svg" - }, - cleanup: [ "style", "fill", "id" ] - }, - files: { - "icons/icons.svg": [ "icons/svg-min/*.svg" ] - } - } - }, - watch: { - sass: { - files: [ "scss/**/*.scss" ], - tasks: [ "build" ], - options: { - spawn: false - } - }, - svg: { - files: [ "svg-source/**/*.svg" ], - tasks: [ "svg" ], - options: { - spawn: false - } - } - }, - "stop-selenium-server": { - dev: {} - } - }; - -// This loads files in the options folder as task options -// and builds an object based on their file names -function loadConfig(path) { - var glob = require( "glob" ), - object = {}, - key; - - glob.sync( "*", { cwd: path } ).forEach( function( option ) { - key = option.replace( /\.js$/, "" ); - object[ key ] = require( path + option ); - }); - - return object; -} - -// We no combine the loaded task options with the ones defined in config above -grunt.util._.extend( config, loadConfig( "./tasks/options/" ) ); - -grunt.initConfig( config ); -grunt.loadTasks( "tasks" ); -grunt.loadNpmTasks( "perfjankie" ); -grunt.registerTask( "default", [ "test" ] ); -grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint", "htmllint" ] ); -grunt.registerTask( "build", [ "svg", "sass", "csscomb", "cssmin" ] ); -grunt.registerTask( "perf", [ - "start-selenium-server", - "connect:perf", - "perfjankie", - "stop-selenium-server" -]); -grunt.registerTask( "svg", [ "svgmin", "svgstore" ] ); +var path = require( "path" ); +require( "load-grunt-config" )( grunt, { + configPath: [ + path.join( process.cwd(), "tasks/options" ), + path.join( process.cwd(), "tasks" ) + ], + init: true +} ); }; diff --git a/package.json b/package.json index f7f9534..92c6e47 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "css-chassis", "title": "Chassis", "description": "An attempt at creating open standards designed for CSS libraries, JavaScript UI libraries, and web developers in general", - "version": "0.0.1-pre", + "version": "0.0.1", "author": { "name": "jQuery Foundation and other contributors", "url": "https://github.com/jquery/css-chassis/blob/master/AUTHORS.txt" @@ -40,15 +40,12 @@ "start": "grunt watch", "test": "grunt" }, - "dependencies": { - "normalize.css": "3.0.3" - }, + "dependencies": {}, "devDependencies": { "browser-perf": "1.2.3", "chromedriver": "2.13.0", "commitplease": "2.0.0", "ejs-template": "0.1.0", - "glob": "4.4.2", "grunt": "0.4.5", "grunt-autoprefixer": "2.1.0", "grunt-contrib-cssmin": "0.10.0", @@ -59,14 +56,13 @@ "grunt-csscomb": "3.0.0", "grunt-git-authors": "2.0.0", "grunt-html": "1.6.0", - "grunt-htmllint": "0.2.7", "grunt-jscs": "0.6.2", - "grunt-npmcopy": "0.1.0", - "grunt-sass": "0.18.1", + "grunt-sass": "0.17.0", "grunt-selenium-server": "0.1.2", "grunt-svgmin": "2.0.0", "grunt-svgstore": "0.5.0", - "load-grunt-tasks": "3.1.0", + "jsass-vars": "0.0.3", + "load-grunt-config": "0.16.0", "perfjankie": "1.2.2" }, "keywords": [] diff --git a/performance/frameworks/bootstrap.js b/performance/frameworks/bootstrap.js index 47346e1..1221e56 100644 --- a/performance/frameworks/bootstrap.js +++ b/performance/frameworks/bootstrap.js @@ -27,7 +27,7 @@ module.exports = { ], icon: [ false, - "asterisk", + "astrisk", "plus", "minus", "euro", diff --git a/scss/_utilities/_colors.scss b/scss/_utilities/_colors.scss deleted file mode 100644 index 4aa7c07..0000000 --- a/scss/_utilities/_colors.scss +++ /dev/null @@ -1,5 +0,0 @@ -/* -* ========================================================================== -* Colors -* ========================================================================== -*/ diff --git a/scss/atoms/typography/_functions.scss b/scss/atoms/typography/_functions.scss index fc0945d..6ff16ab 100644 --- a/scss/atoms/typography/_functions.scss +++ b/scss/atoms/typography/_functions.scss @@ -11,6 +11,6 @@ * 1. font-size: em(14px); * 2. font-size: em(30px/14px); */ -@function em($value, $context: map-get($root-font, font-size)) { +@function em($value, $context: map-get($defaultFont, font-size)) { @return ($value / $context * 1em); } diff --git a/scss/atoms/typography/_typography.scss b/scss/atoms/typography/_typography.scss index d4b8ac4..5d97583 100644 --- a/scss/atoms/typography/_typography.scss +++ b/scss/atoms/typography/_typography.scss @@ -5,12 +5,12 @@ */ @import - "variables", + "dist/chassis", "functions", "mixins"; body { - font: $normal #{ map-get( $root-font, font-size ) }/1.5 $sans-serif; + font: $normal #{ map-get( $defaultFont, font-size ) }/1.5 $sans; @media ( max-width: 800px ) { font-size: 16px; diff --git a/scss/atoms/typography/_variables.scss b/scss/atoms/typography/_variables.scss deleted file mode 100644 index 096eae5..0000000 --- a/scss/atoms/typography/_variables.scss +++ /dev/null @@ -1,22 +0,0 @@ -/* -* ========================================================================== -* Typography variables -* ========================================================================== -*/ - -/* -* Change these values when using custom fonts -* For example, normal: 400; -*/ -$normal: normal; -$bold: bold; -$root-font: ( - color: #222, - font-size: 20px, - line-height: 1.5 -); - -/* Typefaces */ -$monospace: "courier new", monospace; -$serif: Georgia, "Times New Roman", Times, serif; -$sans-serif: "Source Sans Pro", Helvetica, Arial, sans-serif; diff --git a/scss/style.scss b/scss/style.scss index 92e4354..f297126 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,10 +1,13 @@ -/* -* ========================================================================== -* CSS Chassis -* ========================================================================== -* This just adds normalize to the build see lint.scss for explanation. -*/ +// ========================================================================== +// CSS Chassis +// ========================================================================== @import - "external/normalize.css/normalize.scss", - "lint.scss"; + "_utilities/clearfix"; + +@import + "atoms/icons/icons", + "atoms/typography/typography"; + +@import + "views/main"; diff --git a/scss/variables/chassis.js b/scss/variables/chassis.js new file mode 100644 index 0000000..99715df --- /dev/null +++ b/scss/variables/chassis.js @@ -0,0 +1,13 @@ +// This is just boiuler plate dont worry about it +// This just supports loading in any enviroment +(function ( root, factory ) { + if ( typeof define === "function" && define.amd ) { + define( [], factory ); + } else if ( typeof exports === "object" ) { + module.exports = factory(); + } else { + root.chassis = factory(); + } +}( this, function () { +return {}; +} ) ); \ No newline at end of file diff --git a/scss/variables/colors.js b/scss/variables/colors.js new file mode 100644 index 0000000..16a577e --- /dev/null +++ b/scss/variables/colors.js @@ -0,0 +1,48 @@ +( function ( root, factory ) { + if ( typeof define === 'function' && define.amd ) { + define( [ "./chassis" ], factory ); + } else if (typeof exports === 'object') { + module.exports = factory( require('./chassis') ); + } else { + root.chassis = factory( root.chassis ); + } +}(this, function ( chassis ) { +var colors = { + "chassis-gray-dark": { + "value": "#383838", + "name": "Chassis Gray - Dark" + }, + "chassis-gray": { + "value": "#c1c1c1", + "name": "Chassis Gray" + }, + "chassis-gray-light": { + "value": "#f2f2f2", + "name": "Chassis Gray - Light" + }, + "chassis-blue-dark": { + "value": "#388695", + "name": "Chassis Blue - Dark" + }, + "chassis-blue": { + "value": "#4fc0c8", + "name": "Chassis Blue" + }, + "chassis-yellow": { + "value": "#fadf51", + "name": "Chassis Yellow" + } +} +chassis.colors = { + "background": colors[ "chassis-gray-dark" ], + "font": colors[ "chassis-gray-dark" ], + "link": colors[ "chassis-blue-dark" ], + "button": colors[ "chassis-blue" ], + "buttonText": colors[ "chassis-gray-light" ], + "blockquoteBorder": { + name: "Chassis - Blockquote color", + value: "#eee" + } +} +return chassis; +} ) ); diff --git a/scss/variables/index.js b/scss/variables/index.js new file mode 100644 index 0000000..840d981 --- /dev/null +++ b/scss/variables/index.js @@ -0,0 +1,10 @@ +var fs = require( "fs" ); +var path = require( "path" ); +var varPath = path.join( process.cwd(), "scss/variables" ); +var chassis; + +fs.readdirSync( varPath ).forEach( function( file ) { + chassis = require( path.join( process.cwd(), "scss/variables" ) + "/" + file ); +} ); + +module.exports = chassis; \ No newline at end of file diff --git a/scss/variables/template.js b/scss/variables/template.js new file mode 100644 index 0000000..1bc9c9a --- /dev/null +++ b/scss/variables/template.js @@ -0,0 +1,13 @@ +// This is just boiuler plate dont worry about it +// This just supports loading in any enviroment +(function ( root, factory ) { + if ( typeof define === "function" && define.amd ) { + define( [], factory ); + } else if ( typeof exports === "object" ) { + module.exports = factory(); + } else { + root.chassis = factory(); + } +}( this, function () { +//>> return chasses.moduleName; +} ) ); diff --git a/scss/variables/typography.js b/scss/variables/typography.js new file mode 100644 index 0000000..3b55a80 --- /dev/null +++ b/scss/variables/typography.js @@ -0,0 +1,59 @@ +( function ( root, factory ) { + if ( typeof define === 'function' && define.amd ) { + define( [ "./chassis" ], factory ); + } else if (typeof exports === 'object') { + module.exports = factory( require('./chassis') ); + } else { + root.chassis = factory( root.chassis ); + } +}(this, function ( chassis ) { + +var color = "#222"; +var fontSize = "20px"; +var lineHeight = 1.5; + +chassis.typography = { + normal: { + name: "Font weight - Normal", + value: "normal" + }, + bold: { + name: "Font weight - Bold", + value: "bold" + }, + color: { + name: "Font color", + value: color + }, + fontSize: { + name: "Font size", + value: fontSize + }, + lineHeight: { + name: "Line Height", + value: lineHeight + }, + defaultFont: { + name: "Type Style - Default", + value: { + color: color, + "font-size": fontSize, + "line-height": lineHeight + } + }, + monospace: { + name: "Font Family - Monospace", + value :"\"courier new\", monospace" + }, + serif: { + name: "Font Family - Serif", + value :"Georgia, \"Times New Roman\", Times, serif" + }, + sans: { + name: "Font Family - Sans", + value :"Helvetica, Arial, sans-serif" + } +}; + +return chassis; +} ) ); diff --git a/tasks/alias.js b/tasks/alias.js new file mode 100644 index 0000000..0b1fe20 --- /dev/null +++ b/tasks/alias.js @@ -0,0 +1,12 @@ +module.exports = function( grunt ) { +grunt.registerTask( "default", [ "test" ] ); +grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint" ] ); +grunt.registerTask( "build", [ "svg", "sass", "csscomb", "cssmin" ] ); +grunt.registerTask( "perf", [ + "start-selenium-server", + "connect:perf", + "perfjankie", + "stop-selenium-server" +]); +grunt.registerTask( "svg", [ "svgmin", "svgstore" ] ); +}; diff --git a/tasks/options/autoprefixer.js b/tasks/options/autoprefixer.js new file mode 100644 index 0000000..05bc225 --- /dev/null +++ b/tasks/options/autoprefixer.js @@ -0,0 +1,17 @@ +module.exports = { + dist: { + options: { + map: true, + browsers: [ + "> 1%", + "last 2 versions", + "safari >= 5.1", + "ios >= 6.1", + "android 2.3", + "android >= 4", + "ie >= 8" + ] + }, + src: "dist/css/*.css" + } +}; diff --git a/tasks/options/csscomb.js b/tasks/options/csscomb.js new file mode 100644 index 0000000..2cc157c --- /dev/null +++ b/tasks/options/csscomb.js @@ -0,0 +1,13 @@ +module.exports = { + dist: { + files: { + "dist/css/chassis.css": "dist/css/chassis.css" + } + }, + scss: { + files: [ { + expand: true, + src: [ "scss/**/*.scss" ] + } ] + } +}; diff --git a/tasks/options/csslint.js b/tasks/options/csslint.js new file mode 100644 index 0000000..3e6c0d6 --- /dev/null +++ b/tasks/options/csslint.js @@ -0,0 +1,3 @@ +module.exports = { + src: [ "dist/css/*.css" ] +}; \ No newline at end of file diff --git a/tasks/options/cssmin.js b/tasks/options/cssmin.js new file mode 100644 index 0000000..7b57725 --- /dev/null +++ b/tasks/options/cssmin.js @@ -0,0 +1,11 @@ +module.exports = { + options: { + report: "gzip", + sourceMap: true + }, + target: { + files: { + "dist/css/chassis.min.css": "dist/css/chassis.css" + } + } +}; diff --git a/tasks/options/jscs.js b/tasks/options/jscs.js new file mode 100644 index 0000000..bea072d --- /dev/null +++ b/tasks/options/jscs.js @@ -0,0 +1,3 @@ +module.exports = { + all: [ "*.js", "performance/**/*.js" ] +}; \ No newline at end of file diff --git a/tasks/options/jshint.js b/tasks/options/jshint.js new file mode 100644 index 0000000..226c39e --- /dev/null +++ b/tasks/options/jshint.js @@ -0,0 +1,6 @@ +module.exports = { + files: [ "*.js", "performance/**/*.js" ], + options: { + jshintrc: ".jshintrc" + } +}; \ No newline at end of file diff --git a/tasks/options/perfjankie.js b/tasks/options/perfjankie.js index 29c9955..6f44de5 100644 --- a/tasks/options/perfjankie.js +++ b/tasks/options/perfjankie.js @@ -36,9 +36,7 @@ module.exports = { "http://localhost:4200/framework/semantic-ui/component/button/count/1000/" + "semantic-ui:button", "http://localhost:4200/framework/dojo/component/button/count/1000/" + - "dojo:button", - "http://localhost:4200/framework/kendo-ui/component/button/count/1000/" + - "kendo-ui:button" + "dojo:button" ] } } diff --git a/tasks/options/sass.js b/tasks/options/sass.js new file mode 100644 index 0000000..b100fe4 --- /dev/null +++ b/tasks/options/sass.js @@ -0,0 +1,13 @@ +module.exports = { + dist: { + options: { + sourceMap: true, + + // This actually does nested until libsass updates to support expanded + outputStyle: "expanded" + }, + files: { + "dist/css/chassis.css": "scss/style.scss" + } + } +}; \ No newline at end of file diff --git a/tasks/options/svgmin.js b/tasks/options/svgmin.js new file mode 100644 index 0000000..9819e5b --- /dev/null +++ b/tasks/options/svgmin.js @@ -0,0 +1,21 @@ +module.exports = { + options: { + plugins: [ + { + removeViewBox: false + }, + { + removeUselessStrokeAndFill: false + } + ] + }, + dist: { + files: [ { + expand: true, + cwd: "icons/svg-source", + src: [ "*.svg" ], + dest: "icons/svg-min/", + ext: ".svg" + } ] + } +}; diff --git a/tasks/options/svgstore.js b/tasks/options/svgstore.js new file mode 100644 index 0000000..f6422d2 --- /dev/null +++ b/tasks/options/svgstore.js @@ -0,0 +1,19 @@ +module.exports = { + defaults: { + options: { + + // This will prefix each ID + prefix: "icon-", + + // Adds attributes to the resulting SVG + svg: { + viewBox: "0 0 24 24", + xmlns: "http://www.w3.org/2000/svg" + }, + cleanup: [ "style", "fill", "id" ] + }, + files: { + "icons/icons.svg": [ "icons/svg-min/*.svg" ] + } + } +} \ No newline at end of file diff --git a/tasks/options/watch.js b/tasks/options/watch.js new file mode 100644 index 0000000..21eb0b0 --- /dev/null +++ b/tasks/options/watch.js @@ -0,0 +1,16 @@ +module.exports = { + sass: { + files: [ "scss/**/*.scss" ], + tasks: [ "build" ], + options: { + spawn: false + } + }, + svg: { + files: [ "svg-source/**/*.svg" ], + tasks: [ "svg" ], + options: { + spawn: false + } + } +} \ No newline at end of file diff --git a/tasks/variables.js b/tasks/variables.js new file mode 100644 index 0000000..5ba72e8 --- /dev/null +++ b/tasks/variables.js @@ -0,0 +1,12 @@ +module.exports = function( grunt ) { + grunt.registerTask( "buildVariables", function() { + var jsass = require( "jsass-vars" ); + var path = require( "path" ); + var varPath = path.join( process.cwd(), "scss/variables/*" ); + + jsass( varPath, { + "dest": path.join( process.cwd(), "dist" ), + "name": "chassis" + } ); + } ) +}; \ No newline at end of file