diff --git a/.csslintrc b/.csslintrc index 4273f5c..aa4fe55 100644 --- a/.csslintrc +++ b/.csslintrc @@ -4,6 +4,7 @@ "box-sizing": false, "compatible-vendor-prefixes": false, "duplicate-background-images": false, + "font-sizes": false, "import": false, "important": false, "outline-none": false, 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/demos/buttons.html b/demos/buttons.html new file mode 100644 index 0000000..6801b00 --- /dev/null +++ b/demos/buttons.html @@ -0,0 +1,279 @@ + + + + + + CSS Chassis - Buttons + + + + + + + + +

CSS Chassis

+ +

Button Classes

+ +

Use the button classes on an <a>, <button>, or <input> element. + + +

+ +

Options

+ + + +

Sizes

+ + + + +

Disabled State

+ +

Button Element

+ +

Add the disabled attribute to <button> buttons.

+ + + + +

Setting Button Appearance Via Classes

+ +

Sometimes you might need to set the class of a ui-button to display a state. This code works with <a>, <button>, or <input> elements.

+ +

Disabled Class

Add --disabled to the end of the button class.

+ + +

Active Class

Add --active to the end of the button class.

+ + +

Focus Class

Add --focus to the end of the button class.

+ + +

Hover Class

Add --hover to the end of the button class.

+ + + + + + diff --git a/package.json b/package.json index f7f9534..79bc361 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" @@ -10,8 +10,8 @@ "maintainers": [ { "name": "Sarah Frisk", - "email": "sarah@sarahfrisk.net", - "url": "http://sarahfrisk.net" + "email": "sarah@sarahfrisk.com", + "url": "http://sarahfrisk.com" }, { "name": "Alexander Schmitz", @@ -29,26 +29,18 @@ "url": "git://github.com/jquery/css-chassis.git" }, "bugs": "http://github.com/jquery/css-chassis/issues/", - "licenses": [ - { - "type": "MIT", - "url": "https://github.com/jquery/css-chassis/blob/master/LICENSE.txt" - } - ], + "license": "MIT", "scripts": { "build": "npm install && grunt build", "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 +51,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/buttons/_buttons.scss b/scss/atoms/buttons/_buttons.scss new file mode 100644 index 0000000..90f5e35 --- /dev/null +++ b/scss/atoms/buttons/_buttons.scss @@ -0,0 +1,730 @@ +/* +* ========================================================================== +* Buttons +* ========================================================================== +*/ +@import + "dist/chassis", + "mixins"; + +.ui-button { + &--default { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-default-color, $ui-button-default-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-default-color, $ui-button-default-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-default-color, $ui-button-default-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-default-color, $ui-button-default-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-default-color, $ui-button-default-background); + } + } + } + + &--primary { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-primary-color, $ui-button-primary-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-primary-color, $ui-button-primary-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-primary-color, $ui-button-primary-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-primary-color, $ui-button-primary-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-primary-color, $ui-button-primary-background); + } + } + } + + &--success { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-success-color, $ui-button-success-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-success-color, $ui-button-success-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-success-color, $ui-button-success-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-success-color, $ui-button-success-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-success-color, $ui-button-success-background); + } + } + } + + &--info { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-info-color, $ui-button-info-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-info-color, $ui-button-info-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-info-color, $ui-button-info-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-info-color, $ui-button-info-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-info-color, $ui-button-info-background); + } + } + } + + &--warning { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-warning-color, $ui-button-warning-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-warning-color, $ui-button-warning-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-warning-color, $ui-button-warning-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-warning-color, $ui-button-warning-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-warning-color, $ui-button-warning-background); + } + } + } + + &--danger { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-default); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + + &--large { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-large); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + } + + &--small { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-small); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + } + + &--extra-small { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-states($ui-button-danger-color, $ui-button-danger-background); + + &--disabled { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-disabled($ui-button-danger-color, $ui-button-danger-background); + } + + &--focus { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-focus($ui-button-danger-color, $ui-button-danger-background); + } + + &--active { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-active($ui-button-danger-color, $ui-button-danger-background); + } + + &--hover { + @include ui-button(); + @include ui-button-sizes($ui-button-extra-small); + @include ui-button-state-hover($ui-button-danger-color, $ui-button-danger-background); + } + } + } +} diff --git a/scss/atoms/buttons/_mixins.scss b/scss/atoms/buttons/_mixins.scss new file mode 100644 index 0000000..a009005 --- /dev/null +++ b/scss/atoms/buttons/_mixins.scss @@ -0,0 +1,84 @@ +/* +* ========================================================================== +* Buttons (Mixins) +* ========================================================================== +*/ + +@mixin ui-button() { + display: inline-block; + font-weight: $ui-button-font-weight; + margin: $ui-button-margin; + text-align: center; + text-decoration: none; + text-transform: $ui-button-text-transform; + vertical-align: middle; + white-space: nowrap; +} + +@mixin ui-button-sizes($size) { + border-radius: map-get( $size, border-radius ); + font-size: map-get( $size, font-size ); + line-height: map-get( $size, line-height ); + padding: map-get( $size, padding ); +} + +@mixin ui-button-states($color, $bgcolor) { + background: $bgcolor; + border: $ui-button-border-width solid darken($bgcolor, 10%); + color: $color; + + &:active { + @include ui-button-state-active($color, $bgcolor); + } + &:focus { + @include ui-button-state-focus($color, $bgcolor); + } + &:hover { + @include ui-button-state-active($color, $bgcolor); + } + &:disabled { + @include ui-button-state-disabled($color, $bgcolor); + } + /** + * This triggers 'unqualified-attributes' in csslint + * &[aria-disabled="true"] { + * @include ui-button-state-disabled($color, $bgcolor); + * } + **/ +} + +@mixin ui-button-state-default($color, $bgcolor) { + background: $bgcolor; + border: $ui-button-border-width solid darken($bgcolor, 10%); + color: $color; +} + +@mixin ui-button-state-active($color, $bgcolor) { + background: darken($bgcolor, 20%); + border: $ui-button-border-width solid darken($bgcolor, 30%); + color: $color; +} + +@mixin ui-button-state-focus($color, $bgcolor) { + background: darken($bgcolor, 15%); + border: $ui-button-border-width solid darken($bgcolor, 25%); + color: $color; +} + +@mixin ui-button-state-hover($color, $bgcolor) { + background: darken($bgcolor, 10%); + border: $ui-button-border-width solid darken($bgcolor, 20%); + color: $color; +} + +@mixin ui-button-state-disabled($color, $bgcolor) { + background: $bgcolor; + border: $ui-button-border-width solid darken($bgcolor, 10%); + color: $color; + cursor: default; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$ui-button-disabled-opacity+")"; + filter: alpha(opacity=$ui-button-disabled-opacity); + -moz-opacity: $ui-button-disabled-opacity; + -khtml-opacity: $ui-button-disabled-opacity; + opacity: $ui-button-disabled-opacity; +} 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/lint.scss b/scss/lint.scss index d3cf487..c29923b 100644 --- a/scss/lint.scss +++ b/scss/lint.scss @@ -15,7 +15,8 @@ @import "atoms/icons/icons", - "atoms/typography/typography"; + "atoms/typography/typography", + "atoms/buttons/buttons"; @import "views/main"; diff --git a/scss/style.scss b/scss/style.scss index 92e4354..048218a 100644 --- a/scss/style.scss +++ b/scss/style.scss @@ -1,10 +1,14 @@ -/* -* ========================================================================== -* 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", + "atoms/buttons/buttons"; + +@import + "views/main"; diff --git a/scss/variables/buttons.js b/scss/variables/buttons.js new file mode 100644 index 0000000..9104176 --- /dev/null +++ b/scss/variables/buttons.js @@ -0,0 +1,120 @@ +( 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 ) { + + +chassis.uiButton = { + "ui-button-default-color": { + name: "Default Button Color", + value: "#383838" + }, + "ui-button-default-background": { + name: "Default Button Background", + value: "#ffffff" + }, + "ui-button-primary-color": { + name: "Primary Button Color", + value: "#ffffff" + }, + "ui-button-primary-background": { + name: "Primary Button Background", + value: "#337ab7" + }, + "ui-button-success-color": { + name: "Success Button Color", + value: "#ffffff" + }, + "ui-button-success-background": { + name: "Success Button Background", + value: "#5cb85c" + }, + "ui-button-info-color": { + name: "Info Button Color", + value: "#ffffff" + }, + "ui-button-info-background": { + name: "Info Button Background", + value: "#5bc0de" + }, + "ui-button-warning-color": { + name: "Warning Button Color", + value: "#ffffff" + }, + "ui-button-warning-background": { + name: "Warning Button Background", + value: "#f0ad4e" + }, + "ui-button-danger-color": { + name: "Danger Button Color", + value: "#ffffff" + }, + "ui-button-danger-background": { + name: "Danger Button Background", + value: "#d9534f" + }, + "ui-button-disabled-opacity": { + name: "Disabled Button Opacity", + value: .6 + }, + "ui-button-font-weight": { + name: "Button Font Weight", + value: 500 + }, + "ui-button-margin": { + name: "Button Margin", + value: ".25em" + }, + "ui-button-text-transform": { + name: "Button Text Transform", + value: "none" + }, + "ui-button-border-width": { + name: "Button Border Width", + value: "1px" + }, + "ui-button-large": { + name: "Large Button", + value: { + "border-radius": "2px", + "font-size": "16px", + "line-height": "16px", + "padding": ".75em 1.25em" + } + }, + "ui-button-default": { + name: "Default Button", + value: { + "border-radius": "2px", + "font-size": "14px", + "line-height": "14px", + "padding": ".5em 1em" + } + }, + "ui-button-small": { + name: "Small Button", + value: { + "border-radius": "2px", + "font-size": "12px", + "line-height": "12px", + "padding": ".35em .75em" + } + }, + "ui-button-extra-small": { + name: "Extra Small Button", + value: { + "border-radius": "2px", + "font-size": "12px", + "line-height": "12px", + "padding": ".2em .35em" + } + }, +}; + +return chassis; +} ) ); 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/.DS_Store b/tasks/.DS_Store deleted file mode 100644 index a89d1de..0000000 Binary files a/tasks/.DS_Store and /dev/null differ diff --git a/tasks/alias.js b/tasks/alias.js new file mode 100644 index 0000000..30a04c6 --- /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", [ "variables", "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..41c6c36 --- /dev/null +++ b/tasks/options/csslint.js @@ -0,0 +1,6 @@ +module.exports = { + options: { + csslintrc: ".csslintrc" + }, + src: [ "dist/css/*.css" ] +}; 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..e09bd08 100644 --- a/tasks/options/perfjankie.js +++ b/tasks/options/perfjankie.js @@ -1,4 +1,7 @@ -module.exports = { +module.exports = function( grunt ) { +grunt.loadNpmTasks( "perfjankie" ); + +return { options: { suite: "perfSlides - Performance Analysis" }, @@ -36,10 +39,9 @@ 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..36847ba --- /dev/null +++ b/tasks/variables.js @@ -0,0 +1,13 @@ +module.exports = function( grunt ) { + grunt.registerTask( "variables", function() { + var jsass = require( "jsass-vars" ); + var path = require( "path" ); + var varPath = path.join( process.cwd(), "scss/variables/*" ); + var distPath = path.join( process.cwd(), "dist" ); + grunt.file.mkdir( distPath ); + jsass( varPath, { + "dest": distPath, + "name": "chassis" + } ); + } ) +};