├── .jscsrc ├── tasks ├── options │ ├── htmllint.js │ ├── jscs.js │ ├── csslint.js │ ├── jshint.js │ ├── cssmin.js │ ├── jsass.js │ ├── csscomb.js │ ├── autoprefixer.js │ ├── watch.js │ ├── svgmin.js │ ├── svgstore.js │ ├── start-selenium-server.js │ ├── sass.js │ ├── connect.js │ └── perfjankie.js ├── alias.js ├── update_authors.js └── selenium_safeguard.js ├── demos ├── demos.css ├── typography.html └── buttons.html ├── .gitattributes ├── scss ├── views │ └── main.scss ├── atoms │ ├── icons │ │ └── _icons.scss │ ├── typography │ │ ├── _functions.scss │ │ ├── _mixins.scss │ │ └── _typography.scss │ └── buttons │ │ ├── _buttons.scss │ │ └── _mixins.scss ├── variables │ ├── index.js │ ├── chassis.js │ ├── template.js │ ├── breakpoints.js │ ├── colors.js │ ├── btn.js │ └── typography.js ├── style.scss ├── _utilities │ ├── _functions.scss │ ├── _clearfix.scss │ └── _hidden.scss └── lint.scss ├── .gitignore ├── .travis.yml ├── Gruntfile.js ├── .jshintrc ├── AUTHORS.txt ├── .editorconfig ├── icons └── svg-source │ ├── circle.svg │ ├── square.svg │ └── triangle.svg ├── .csslintrc ├── performance ├── component.html ├── frameworks │ ├── bootstrap.js │ ├── foundation.js │ ├── kendo-ui.js │ ├── jquery-ui-1-12.js │ ├── semantic-ui.js │ ├── jquery-mobile.js │ ├── jquery-ui.js │ ├── topcoat.js │ ├── topcoat-mobile.js │ └── dojo.js └── component.js ├── .csscomb.json ├── external └── normalize.css │ ├── LICENSE.md │ └── normalize.scss ├── CONTRIBUTING.md ├── LICENSE.txt ├── package.json └── README.md /.jscsrc: -------------------------------------------------------------------------------- 1 | { 2 | "preset": "jquery" 3 | } 4 | -------------------------------------------------------------------------------- /tasks/options/htmllint.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | all: [ "demos/*.html" ] 3 | }; 4 | -------------------------------------------------------------------------------- /demos/demos.css: -------------------------------------------------------------------------------- 1 | body { 2 | max-width: 900px; 3 | margin: 3em auto; 4 | padding: 0 1em; 5 | } 6 | -------------------------------------------------------------------------------- /tasks/options/jscs.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | all: [ "*.js", "performance/**/*.js", "scss/variables/**/*.js", "tasks/**/*.js" ] 3 | }; 4 | -------------------------------------------------------------------------------- /.gitattributes: -------------------------------------------------------------------------------- 1 | # Auto detect text files and perform LF normalization 2 | * text=auto 3 | 4 | # JS files must always use LF for tools to work 5 | *.js eol=lf 6 | -------------------------------------------------------------------------------- /tasks/options/csslint.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | src: [ "dist/css/chassis.lint.css", "dist/css/chassis.lint.css" ], 3 | options: { 4 | csslintrc: ".csslintrc" 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /tasks/options/jshint.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | files: [ "*.js", "performance/**/*.js", "scss/variables/**/*.js", "tasks/**/*.js" ], 3 | options: { 4 | jshintrc: ".jshintrc" 5 | } 6 | }; 7 | -------------------------------------------------------------------------------- /scss/views/main.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * Main 4 | * ========================================================================== 5 | */ 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Files 2 | npm-debug.log 3 | icons/icons.svg 4 | *.css.map 5 | style.css 6 | # Folders 7 | bower_components/ 8 | node_modules/ 9 | external/ 10 | icons/svg-min/ 11 | .sass-cache/ 12 | dist/ 13 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | sudo: false 2 | language: node_js 3 | node_js: 4 | - "5" 5 | cache: 6 | directories: 7 | - node_modules 8 | before_script: 9 | - npm install -g grunt-cli 10 | script: 11 | - "grunt" 12 | -------------------------------------------------------------------------------- /scss/atoms/icons/_icons.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * Icons 4 | * ========================================================================== 5 | */ 6 | -------------------------------------------------------------------------------- /tasks/options/cssmin.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | report: "gzip", 4 | sourceMap: true 5 | }, 6 | target: { 7 | files: { 8 | "dist/css/chassis.min.css": "dist/css/chassis.css" 9 | } 10 | } 11 | }; 12 | -------------------------------------------------------------------------------- /tasks/options/jsass.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | global: "chassis", 4 | module: true 5 | }, 6 | variables: { 7 | src: [ 8 | "scss/variables/*.js" 9 | ], 10 | dest: "dist/chassis.scss" 11 | } 12 | }; 13 | -------------------------------------------------------------------------------- /tasks/options/csscomb.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dist: { 3 | files: { 4 | "dist/css/chassis.css": "dist/css/chassis.css" 5 | } 6 | }, 7 | scss: { 8 | files: [ { 9 | expand: true, 10 | src: [ "scss/**/*.scss" ] 11 | } ] 12 | } 13 | }; 14 | -------------------------------------------------------------------------------- /Gruntfile.js: -------------------------------------------------------------------------------- 1 | module.exports = function( grunt ) { 2 | var path = require( "path" ); 3 | require( "load-grunt-config" )( grunt, { 4 | configPath: [ 5 | path.join( process.cwd(), "tasks/options" ), 6 | path.join( process.cwd(), "tasks" ) 7 | ], 8 | init: true 9 | } ); 10 | }; 11 | -------------------------------------------------------------------------------- /tasks/options/autoprefixer.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | dist: { 3 | options: { 4 | map: true, 5 | browsers: [ 6 | "> 1%", 7 | "last 2 versions", 8 | "safari >= 5.1", 9 | "ios >= 6.1", 10 | "android 2.3", 11 | "android >= 4", 12 | "ie >= 8" 13 | ] 14 | }, 15 | src: "dist/css/*.css" 16 | } 17 | }; 18 | -------------------------------------------------------------------------------- /scss/variables/index.js: -------------------------------------------------------------------------------- 1 | var fs = require( "fs" ), 2 | path = require( "path" ), 3 | varPath = path.join( process.cwd(), "scss/variables" ), 4 | chassis; 5 | 6 | fs.readdirSync( varPath ).forEach( function( file ) { 7 | chassis = require( path.join( process.cwd(), "scss/variables" ) + "/" + file ); 8 | } ); 9 | 10 | module.exports = chassis; 11 | -------------------------------------------------------------------------------- /scss/style.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * CSS Chassis 4 | * 5 | * This adds normalize.css to the build see lint.scss for expanation 6 | * ========================================================================== 7 | */ 8 | 9 | @import 10 | "external/normalize.css/normalize", 11 | "scss/lint"; 12 | -------------------------------------------------------------------------------- /.jshintrc: -------------------------------------------------------------------------------- 1 | { 2 | "boss": true, 3 | "curly": true, 4 | "eqeqeq": true, 5 | "eqnull": true, 6 | "expr": true, 7 | "esnext": true, 8 | "immed": true, 9 | "noarg": true, 10 | "quotmark": "double", 11 | "smarttabs": true, 12 | "trailing": true, 13 | "undef": true, 14 | "unused": true, 15 | "node": true, 16 | "globals": { 17 | "define": false 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /tasks/options/watch.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | atBegin: true 4 | }, 5 | sass: { 6 | files: [ "scss/**/*.scss", "scss/variables/**/*.js" ], 7 | tasks: [ "build" ], 8 | options: { 9 | spawn: true 10 | } 11 | }, 12 | svg: { 13 | files: [ "svg-source/**/*.svg" ], 14 | tasks: [ "svg" ], 15 | options: { 16 | spawn: false 17 | } 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /tasks/options/svgmin.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | options: { 3 | plugins: [ 4 | { 5 | removeViewBox: false 6 | }, 7 | { 8 | removeUselessStrokeAndFill: false 9 | } 10 | ] 11 | }, 12 | dist: { 13 | files: [ { 14 | expand: true, 15 | cwd: "icons/svg-source", 16 | src: [ "*.svg" ], 17 | dest: "icons/svg-min/", 18 | ext: ".svg" 19 | } ] 20 | } 21 | }; 22 | -------------------------------------------------------------------------------- /AUTHORS.txt: -------------------------------------------------------------------------------- 1 | Authors ordered by first contribution 2 | 3 | Scott González 4 | Sarah Frisk 5 | Chris Bracco 6 | Alexander Schmitz 7 | Anne-Gaelle Colom 8 | Michael Arestad 9 | Rohit Mulange 10 | Prasun Anand 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # This file is for unifying the coding style for different editors and IDEs 2 | # editorconfig.org 3 | 4 | root = true 5 | 6 | [*] 7 | indent_style = tab 8 | end_of_line = lf 9 | charset = utf-8 10 | trim_trailing_whitespace = true 11 | insert_final_newline = true 12 | 13 | [external/**] 14 | trim_trailing_whitespace = false 15 | insert_final_newline = varies 16 | end_of_line = varies 17 | -------------------------------------------------------------------------------- /icons/svg-source/circle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /scss/_utilities/_functions.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * Misc. Sass Functions to ease calculations 4 | * ========================================================================== 5 | */ 6 | 7 | @function map-deep-get($map, $keys...) { 8 | $value: $map; 9 | @each $key in $keys { 10 | $value: map-get($value, $key); 11 | } 12 | @return $value; 13 | } 14 | -------------------------------------------------------------------------------- /icons/svg-source/square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /scss/_utilities/_clearfix.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * Clearfix 4 | * ========================================================================== 5 | */ 6 | 7 | @mixin clearfix() { 8 | &:before, 9 | &:after { 10 | content: ""; 11 | display: table; 12 | } 13 | &:after { 14 | clear: both; 15 | } 16 | } 17 | 18 | .clearfix { 19 | @include clearfix; 20 | } 21 | -------------------------------------------------------------------------------- /scss/variables/chassis.js: -------------------------------------------------------------------------------- 1 | // This is just boiler plate dont worry about it 2 | // This just supports loading in any enviroment 3 | ( function( root, factory ) { 4 | if ( typeof define === "function" && define.amd ) { 5 | define( [], factory ); 6 | } else if ( typeof exports === "object" ) { 7 | module.exports = factory(); 8 | } else { 9 | root.chassis = factory(); 10 | } 11 | }( this, function() { 12 | return {}; 13 | } ) ); 14 | -------------------------------------------------------------------------------- /tasks/options/svgstore.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | defaults: { 3 | options: { 4 | 5 | // This will prefix each ID 6 | prefix: "icon-", 7 | 8 | // Adds attributes to the resulting SVG 9 | svg: { 10 | viewBox: "0 0 24 24", 11 | xmlns: "http://www.w3.org/2000/svg" 12 | }, 13 | cleanup: [ "style", "fill", "id" ] 14 | }, 15 | files: { 16 | "icons/icons.svg": [ "icons/svg-min/*.svg" ] 17 | } 18 | } 19 | }; 20 | -------------------------------------------------------------------------------- /icons/svg-source/triangle.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 5 | 6 | 7 | -------------------------------------------------------------------------------- /.csslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "adjoining-classes": false, 3 | "box-model": false, 4 | "box-sizing": false, 5 | "compatible-vendor-prefixes": false, 6 | "duplicate-background-images": false, 7 | "fallback-colors": false, 8 | "font-sizes": false, 9 | "import": false, 10 | "important": false, 11 | "outline-none": false, 12 | "overqualified-elements": false, 13 | "unique-headings": false, 14 | "unqualified-attributes": false, 15 | "text-indent": false 16 | } 17 | -------------------------------------------------------------------------------- /scss/variables/template.js: -------------------------------------------------------------------------------- 1 | // This is just boiler plate dont worry about it 2 | // This just supports loading in any enviroment 3 | ( function( root, factory ) { 4 | if ( typeof define === "function" && define.amd ) { 5 | define( [], factory ); 6 | } else if ( typeof exports === "object" ) { 7 | module.exports = factory(); 8 | } else { 9 | root.chassis = factory(); 10 | } 11 | }( this, function() { 12 | 13 | //>> return chasses.moduleName; 14 | } ) ); 15 | -------------------------------------------------------------------------------- /tasks/alias.js: -------------------------------------------------------------------------------- 1 | module.exports = function( grunt ) { 2 | grunt.registerTask( "default", [ "test" ] ); 3 | grunt.registerTask( "test", [ "build", "jshint", "jscs", "csslint", "htmllint" ] ); 4 | grunt.registerTask( "build", [ "jsass", "svg", "sass", "csscomb", "cssmin" ] ); 5 | grunt.registerTask( "perf", [ 6 | "start-selenium-server", 7 | "connect:perf", 8 | "perfjankie", 9 | "stop-selenium-server" 10 | ] ); 11 | grunt.registerTask( "svg", [ "svgmin", "svgstore" ] ); 12 | }; 13 | -------------------------------------------------------------------------------- /performance/component.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | <%= title %> 5 | 6 | 7 | <% 8 | var stylesheets = ""; 9 | css.forEach(function( value ){ 10 | stylesheets += ""; 11 | }); 12 | %> 13 | <%- stylesheets %> 14 | 15 | 16 |

<%= title %>

17 |

Component Count: <%= count %>

18 | <%- html %> 19 | 20 | -------------------------------------------------------------------------------- /tasks/options/start-selenium-server.js: -------------------------------------------------------------------------------- 1 | var serverOptions = {}, 2 | binPath = require( "chromedriver" ).path; 3 | 4 | serverOptions[ "Dwebdriver.chrome.driver=" + binPath ] = ""; 5 | 6 | module.exports = { 7 | dev: { 8 | options: { 9 | downloadUrl: "https://selenium-release.storage.googleapis.com/2.45/" + 10 | "selenium-server-standalone-2.45.0.jar", 11 | downloadLocation: "node_modules/grunt-selenium-server/", 12 | serverOptions: serverOptions, 13 | systemProperties: {} 14 | } 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /scss/atoms/typography/_functions.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * Typography functions 4 | * ========================================================================== 5 | */ 6 | 7 | /* 8 | * em() function 9 | * Convert px to em in a readable fashion. 10 | * Examples: 11 | * 1. font-size: em(14px); 12 | * 2. font-size: em(30px/14px); 13 | */ 14 | @function em($value, $context: map-get($typography-font-default, font-size)) { 15 | @return ($value / $context * 1em); 16 | } 17 | -------------------------------------------------------------------------------- /tasks/update_authors.js: -------------------------------------------------------------------------------- 1 | module.exports = function( grunt ) { 2 | grunt.registerTask( "update-authors", function() { 3 | var getAuthors = require( "grunt-git-authors" ), 4 | done = this.async(); 5 | 6 | getAuthors( {}, function( error, authors ) { 7 | if ( error ) { 8 | grunt.log.error( error ); 9 | return done( error ); 10 | } 11 | 12 | grunt.file.write( "AUTHORS.txt", 13 | "Authors ordered by first contribution\n\n" + 14 | authors.join( "\n" ) + "\n" ); 15 | done(); 16 | } ); 17 | } ); 18 | }; 19 | -------------------------------------------------------------------------------- /scss/atoms/typography/_mixins.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * Typography mixins 4 | * ========================================================================== 5 | */ 6 | @mixin heading($style) { 7 | font-size: em(map-get($style,font-size)); 8 | font-weight: map-get($style,font-weight); 9 | line-height: 1; 10 | text-transform: map-get($style,capitalization); 11 | } 12 | @mixin link($style) { 13 | color: map-get($style,color); 14 | font-weight: map-get($style,font-weight); 15 | text-decoration: map-get($style,decoration); 16 | } 17 | -------------------------------------------------------------------------------- /scss/lint.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * CSS Chassis 4 | * 5 | * This contains all the chassis scss execpt normalize.css which will not pass our linter 6 | * we use this file to create a distributable for linting style.scss contains this file plus 7 | * normalize.css 8 | * ========================================================================== 9 | */ 10 | 11 | 12 | @import 13 | "_utilities/clearfix", 14 | "_utilities/functions", 15 | "_utilities/hidden"; 16 | 17 | @import 18 | "atoms/icons/icons", 19 | "atoms/typography/typography", 20 | "atoms/buttons/buttons"; 21 | 22 | @import 23 | "views/main"; 24 | -------------------------------------------------------------------------------- /tasks/options/sass.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | 3 | // This is everything including normalize.css see lint below for explanation 4 | dist: { 5 | options: { 6 | sourceMap: true, 7 | 8 | // This actually does nested until libsass updates to support expanded 9 | outputStyle: "expanded" 10 | }, 11 | files: { 12 | "dist/css/chassis.css": "scss/style.scss" 13 | } 14 | }, 15 | 16 | // This is everything except normalize.css as normalize won't pass our lint settings 17 | lint: { 18 | options: { 19 | sourceMap: true, 20 | 21 | // This actually does nested until libsass updates to support expanded 22 | outputStyle: "expanded" 23 | }, 24 | files: { 25 | "dist/css/chassis.lint.css": "scss/lint.scss" 26 | } 27 | } 28 | }; 29 | -------------------------------------------------------------------------------- /scss/_utilities/_hidden.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * Hidden attribute 4 | * 5 | * Make the [hidden] global HTML attribute much more useful. 6 | * It's intended to be used to hide elements, but since it's not `!important` 7 | * by default, it's normally trumped by mere CSS classes that were only meant 8 | * to set a default `display` value. Making it `!important` (which is fine 9 | * because this is a utility attribute) corrects this shortcoming. 10 | * https://html.spec.whatwg.org/multipage/interaction.html#the-hidden-attribute 11 | * https://html.spec.whatwg.org/multipage/rendering.html#hiddenCSS 12 | * ========================================================================== 13 | */ 14 | 15 | [hidden] { 16 | display: none !important; 17 | } 18 | -------------------------------------------------------------------------------- /.csscomb.json: -------------------------------------------------------------------------------- 1 | { 2 | "remove-empty-rulesets": true, 3 | "always-semicolon": true, 4 | "color-case": "lower", 5 | "block-indent": "\t", 6 | "color-shorthand": true, 7 | "element-case": "lower", 8 | "eof-newline": true, 9 | "leading-zero": false, 10 | "quotes": "double", 11 | "sort-order-fallback": "abc", 12 | "space-before-colon": "", 13 | "space-after-colon": " ", 14 | "space-before-combinator": " ", 15 | "space-after-combinator": " ", 16 | "space-between-declarations": "\n", 17 | "space-before-opening-brace": " ", 18 | "space-after-opening-brace": "\n", 19 | "space-after-selector-delimiter": "\n", 20 | "space-before-selector-delimiter": "", 21 | "space-before-closing-brace": "\n", 22 | "strip-spaces": true, 23 | "unitless-zero": true 24 | } 25 | -------------------------------------------------------------------------------- /scss/variables/breakpoints.js: -------------------------------------------------------------------------------- 1 | ( function( root, factory ) { 2 | if ( typeof define === "function" && define.amd ) { 3 | define( [ "./chassis" ], factory ); 4 | } else if ( typeof exports === "object" ) { 5 | module.exports = factory( require( "./chassis" ) ); 6 | } else { 7 | root.chassis = factory( root.chassis ); 8 | } 9 | }( this, function( chassis ) { 10 | 11 | chassis.breakpoints = { 12 | 13 | "viewport-sm-min": { 14 | name: "Viewport Breakpoint - Small Minimum Width", 15 | value: "400px" 16 | }, 17 | "viewport-md-min": { 18 | name: "Viewport Breakpoint - Medium Minimum Width", 19 | value: "768px" 20 | }, 21 | "viewport-lg-min": { 22 | name: "Viewport Breakpoint - Large Minimum Width", 23 | value: "920px" 24 | }, 25 | "viewport-xl-min": { 26 | name: "Viewport - Extra Large Minimum Width", 27 | value: "1200px" 28 | } 29 | }; 30 | 31 | return chassis; 32 | } ) ); 33 | -------------------------------------------------------------------------------- /performance/frameworks/bootstrap.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: [ "//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" ], 3 | button: { 4 | generator: function( options ) { 5 | var button = ""; 11 | }, 12 | variations: { 13 | state: [ 14 | "btn-default", 15 | "btn-primary", 16 | "btn-success", 17 | "btn-info", 18 | "btn-warning", 19 | "btn-danger", 20 | "btn-link" 21 | ], 22 | size: [ 23 | "", 24 | "btn-lg", 25 | "btn-sm", 26 | "btn-xs" 27 | ], 28 | icon: [ 29 | false, 30 | "astrisk", 31 | "plus", 32 | "minus", 33 | "euro", 34 | "fire" 35 | ] 36 | } 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /performance/component.js: -------------------------------------------------------------------------------- 1 | var components = { 2 | generate: function( frameworkName, component, count ) { 3 | var currentCount = 0, 4 | framework = require( "./frameworks/" + frameworkName + ".js" ), 5 | keys = Object.keys( framework[ component ].variations ), 6 | current = {}, 7 | html = ""; 8 | 9 | function render( i ) { 10 | framework[ component ].variations[ keys[ i ] ].forEach( function( value ) { 11 | current[ keys[ i ] ] = value; 12 | if ( i < keys.length - 1 ) { 13 | render( i + 1 ); 14 | } else { 15 | if ( currentCount < count ) { 16 | currentCount++; 17 | html = html + framework[ component ].generator.call( this, current ); 18 | } 19 | } 20 | } ); 21 | } 22 | while ( currentCount < count ) { 23 | render( 0 ); 24 | } 25 | return { 26 | html: html, 27 | count: currentCount, 28 | css: framework.css, 29 | title: frameworkName + ": " + component 30 | }; 31 | } 32 | }; 33 | module.exports = components; 34 | -------------------------------------------------------------------------------- /tasks/options/connect.js: -------------------------------------------------------------------------------- 1 | var template = require( "ejs-template" ), 2 | urlParser = require( "url" ), 3 | componentGenerator = require( "../../performance/component.js" ); 4 | 5 | module.exports = { 6 | options: { 7 | port: 4200, 8 | base: ".", 9 | middleware: [ 10 | template.middleware( { basedir: __dirname } ), 11 | function( req, res ) { 12 | var data, i, 13 | url = urlParser.parse( req.url, true ), 14 | query = {}, 15 | parts = url.pathname.split( "/" ), 16 | file = req.url.replace( /^\//, "" ).split( "?" )[ 0 ]; 17 | 18 | for ( i = 1; i < parts.length; i += 2 ) { 19 | query[ parts[ i ] ] = parts[ i + 1 ]; 20 | } 21 | if ( file.split( "." ).length <= 1 ) { 22 | data = componentGenerator.generate( 23 | query.framework, 24 | query.component, 25 | query.count 26 | ); 27 | file = "../../performance/component.html"; 28 | } 29 | res.endTemplate( file, data ); 30 | } 31 | ] 32 | }, 33 | perf: {}, 34 | dev: { 35 | options: { 36 | keepalive: true 37 | } 38 | } 39 | }; 40 | -------------------------------------------------------------------------------- /performance/frameworks/foundation.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: [ 3 | "//cdn.foundation5.zurb.com/foundation.css", 4 | "//cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.eot", 5 | "https://cdnjs.cloudflare.com/ajax/libs/foundicons/3.0.0/foundation-icons.min.css" 6 | ], 7 | button: { 8 | generator: function( options ) { 9 | var button = ""; 16 | }, 17 | variations: { 18 | state: [ 19 | "", 20 | " secondary", 21 | " alert", 22 | " info", 23 | " disabled", 24 | " success" 25 | ], 26 | size: [ 27 | "", 28 | " tiny", 29 | " small", 30 | " large" 31 | ], 32 | shape: [ 33 | " round", 34 | " radius", 35 | " expand" 36 | ], 37 | icon: [ 38 | false, 39 | "compas", 40 | "power", 41 | "crown", 42 | "skull", 43 | "map" 44 | ] 45 | } 46 | } 47 | }; 48 | -------------------------------------------------------------------------------- /performance/frameworks/kendo-ui.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: [ "//cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css", 3 | "//cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css", 4 | "//cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.min.css", 5 | "//cdn.kendostatic.com/2014.1.318/styles/kendo.dataviz.default.min.css", 6 | "//cdn.kendostatic.com/2012.1.318/styles/kendo.mobile.all.min.css" 7 | ], 8 | button: { 9 | generator: function( options ) { 10 | var button = ""; 16 | }, 17 | variations: { 18 | type: [ 19 | "k-button", 20 | "km-button" 21 | ], 22 | state: [ 23 | "", 24 | "k-primary" 25 | ], 26 | disabled: [ 27 | "", 28 | "k-state-disabled" 29 | ], 30 | icon: [ 31 | false, 32 | "k-i-funnel", 33 | "k-i-funnel-clear", 34 | "k-i-refresh" 35 | ] 36 | } 37 | } 38 | }; 39 | -------------------------------------------------------------------------------- /tasks/selenium_safeguard.js: -------------------------------------------------------------------------------- 1 | module.exports = function( grunt ) { 2 | var seleniumChildProcesses = {}; 3 | 4 | // This saves the process so we can attempt to kill it later in the case of a failure 5 | grunt.event.on( "selenium.start", function( target, process ) { 6 | grunt.log.ok( "Saw process for target: " + target ); 7 | seleniumChildProcesses[ target ] = process; 8 | } ); 9 | 10 | // This trys to gracefully handle failures and kill the selenium server but its not 100% 11 | // if this does is not successfull the task will not run again until this has been killed 12 | grunt.util.hooker.hook( grunt.fail, function() { 13 | 14 | // Clean up selenium if we left it running after a failure. 15 | grunt.log.writeln( "Attempting to clean up running selenium server." ); 16 | for ( var target in seleniumChildProcesses ) { 17 | grunt.log.ok( "Killing selenium target: " + target ); 18 | try { 19 | seleniumChildProcesses[ target ].kill( "SIGTERM" ); 20 | } 21 | catch ( e ) { 22 | 23 | // This is only if the kill command fails 24 | grunt.log.warn( "Unable to stop selenium target: " + target ); 25 | } 26 | } 27 | } ); 28 | }; 29 | -------------------------------------------------------------------------------- /external/normalize.css/LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) Nicolas Gallagher and Jonathan Neal 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy of 4 | this software and associated documentation files (the "Software"), to deal in 5 | the Software without restriction, including without limitation the rights to 6 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies 7 | of the Software, and to permit persons to whom the Software is furnished to do 8 | so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in all 11 | copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 19 | SOFTWARE. 20 | -------------------------------------------------------------------------------- /performance/frameworks/jquery-ui-1-12.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: [ "https://cdn.rawgit.com/arschmitz/5a0c0b61d0240c096db5/raw/" + 3 | "0d1d52e3c0e732e0f22cecda2f56def937152db2/jquery-ui-1-12.min.css" ], 4 | button: { 5 | generator: function( options ) { 6 | var icon, 7 | inline = options.position === "bottom" || options.position === "top", 8 | first = options.position === "left" || options.position === "top", 9 | button = ""; 24 | }, 25 | variations: { 26 | position: [ 27 | "top", 28 | "bottom", 29 | "left", 30 | "right", 31 | "none" 32 | ], 33 | icon: [ 34 | false, 35 | "pencil", 36 | "clock", 37 | "disk", 38 | "mail-closed", 39 | "heart" 40 | ] 41 | } 42 | } 43 | }; 44 | -------------------------------------------------------------------------------- /performance/frameworks/semantic-ui.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: [ "//cdnjs.cloudflare.com/ajax/libs/semantic-ui/1.11.1/semantic.min.css" ], 3 | button: { 4 | generator: function( options ) { 5 | var button = ""; 11 | }, 12 | variations: { 13 | state: [ 14 | " active", 15 | " disabled", 16 | " loading" 17 | ], 18 | type: [ 19 | "", 20 | " basic", 21 | " inverted" 22 | ], 23 | icon: [ 24 | "", 25 | " cloud", 26 | " underline", 27 | " left", 28 | " user" 29 | ], 30 | size: [ 31 | "", 32 | " mini", 33 | " tiny", 34 | " small", 35 | " medium" 36 | ], 37 | color: [ 38 | "", 39 | " black", 40 | " yellow", 41 | " green", 42 | " blue", 43 | " orange", 44 | " purple", 45 | " red", 46 | " pink", 47 | " teal" 48 | ], 49 | misc: [ 50 | "", 51 | " compact", 52 | " circular", 53 | " fluid", 54 | " toggle" 55 | ] 56 | } 57 | } 58 | }; 59 | -------------------------------------------------------------------------------- /performance/frameworks/jquery-mobile.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: [ "//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" ], 3 | button: { 4 | generator: function( options ) { 5 | var position = ( options.icon === "" ) ? "" : options.iconPosition; 6 | return ""; 12 | }, 13 | variations: { 14 | theme: [ 15 | " ui-btn-a", 16 | " ui-btn-b", 17 | " ui-state-disabled ui-btn-a", 18 | " ui-state-disabled ui-btn-b" 19 | ], 20 | options: [ 21 | " ui-btn-inline ui-mini", 22 | " ui-btn-inline ui-corner-all", 23 | " ui-btn-inline ui-shadow", 24 | " ui-btn-inline", 25 | " ui-corner-all ui-shadow", 26 | " ui-corner-all ui-shadow ui-btn-inline", 27 | " ui-corner-all ui-shadow ui-mini ui-btn-inline" 28 | ], 29 | iconPosition: [ 30 | " ui-btn-icon-left", 31 | " ui-btn-icon-top", 32 | " ui-btn-icon-bottom", 33 | " ui-btn-icon-right" 34 | ], 35 | icon: [ 36 | "", 37 | " ui-icon ui-icon-bars", 38 | " ui-icon ui-icon-bullets", 39 | " ui-icon ui-icon-camera", 40 | " ui-icon ui-icon-audio", 41 | " ui-icon ui-icon-cloud" 42 | ] 43 | } 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /performance/frameworks/jquery-ui.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: [ "//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.min.css" ], 3 | button: { 4 | generator: function( options ) { 5 | var position, 6 | button = ""; 17 | }, 18 | variations: { 19 | state: [ 20 | "ui-state-default", 21 | "ui-state-active", 22 | "ui-state-focus", 23 | "ui-state-hover", 24 | "ui-state-error", 25 | "ui-state-highlight", 26 | "ui-state-default" 27 | ], 28 | type: [ 29 | "ui-button-text-only", 30 | "ui-button-icon-only", 31 | "ui-button-text-icon-primary", 32 | "ui-button-text-icon-secondary", 33 | "ui-button-text-icons-only" 34 | ], 35 | icon: [ 36 | false, 37 | "pencil", 38 | "clock", 39 | "disk", 40 | "mail-closed", 41 | "heart" 42 | ] 43 | } 44 | } 45 | }; 46 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Welcome! Thanks for your interest in contributing to Chassis. You're **almost** in the right place. More information on how to contribute to this and all other jQuery Foundation projects is over at [contribute.jquery.org](http://contribute.jquery.org). You'll definitely want to take a look at the articles on contributing [code](http://contribute.jquery.org/code). 2 | 3 | You may also want to take a look at our [commit & pull request guide](http://contribute.jquery.org/commits-and-pull-requests/) and [style guides](http://contribute.jquery.org/style-guide/) for instructions on how to maintain your fork and submit your code. Before we can merge any pull request, we'll also need you to sign our [contributor license agreement](http://contribute.jquery.org/cla). 4 | 5 | You can find us on [IRC](http://irc.jquery.org), specifically in #css-chassis should you have any questions. If you've never contributed to open source before, we've put together [a short guide with tips, tricks, and ideas on getting started](http://contribute.jquery.org/open-source/). 6 | 7 | Our weekly meetings on Tuesday at 2pm ET on [IRC](http://irc.jquery.org) in #jquery-meeting. These meetings are public and all are welcome to attend and participate. If you can't make the meeting, you can find the internal notes for each meeting on [the jQuery Meeting site](https://meetings.jquery.org/category/chassis/). 8 | -------------------------------------------------------------------------------- /performance/frameworks/topcoat.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: [ 3 | "//cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/css/topcoat-desktop-dark.css", 4 | "//cdnjs.cloudflare.com/ajax/libs/topcoat-icons/0.2.0/font/icomatic.css" 5 | ], 6 | button: { 7 | generator: function( options ) { 8 | var button = ""; 31 | }, 32 | variations: { 33 | type: [ 34 | "", 35 | "-icon" 36 | ], 37 | size: [ 38 | "", 39 | "--large" 40 | ], 41 | state: [ 42 | "", 43 | "--cta", 44 | "--quiet" 45 | 46 | ], 47 | icon: [ 48 | "", 49 | "location", 50 | "home", 51 | "alert" 52 | ] 53 | 54 | } 55 | } 56 | }; 57 | -------------------------------------------------------------------------------- /performance/frameworks/topcoat-mobile.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: [ 3 | "//cdnjs.cloudflare.com/ajax/libs/topcoat/0.8.0/css/topcoat-mobile-dark.css", 4 | "//cdnjs.cloudflare.com/ajax/libs/topcoat-icons/0.2.0/font/icomatic.css" 5 | ], 6 | button: { 7 | generator: function( options ) { 8 | var button = ""; 31 | }, 32 | variations: { 33 | type: [ 34 | "", 35 | "-icon" 36 | ], 37 | size: [ 38 | "", 39 | "--large" 40 | ], 41 | state: [ 42 | "", 43 | "--cta", 44 | "--quiet" 45 | 46 | ], 47 | icon: [ 48 | "", 49 | "location", 50 | "home", 51 | "alert" 52 | ] 53 | 54 | } 55 | } 56 | }; 57 | -------------------------------------------------------------------------------- /performance/frameworks/dojo.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | css: [ "//ajax.googleapis.com/ajax/libs/dojo/1.10.3/dijit/themes/claro/claro.css" ], 3 | button: { 4 | generator: function( options ) { 5 | var button = "" + 7 | "" + 8 | "" + 9 | "" + 19 | "●" + 20 | "button" + 28 | ""; 30 | return button; 31 | }, 32 | variations: { 33 | type: [ 34 | "", 35 | "icon-only" 36 | ], 37 | 38 | icon: [ 39 | "", 40 | "Cut", 41 | "Save", 42 | "Bold", 43 | "Underline", 44 | "Copy" 45 | ] 46 | 47 | } 48 | } 49 | }; 50 | -------------------------------------------------------------------------------- /tasks/options/perfjankie.js: -------------------------------------------------------------------------------- 1 | module.exports = function( grunt ) { 2 | grunt.loadNpmTasks( "perfjankie" ); 3 | 4 | return { 5 | options: { 6 | suite: "perfSlides - Performance Analysis" 7 | }, 8 | "comparison": { 9 | options: { 10 | repeat: 2, 11 | selenium: { 12 | hostname: "localhost", 13 | port: "4444" 14 | }, 15 | browsers: [ 16 | "chrome", 17 | "firefox" 18 | ], 19 | couch: { 20 | server: "http://localhost:5984", 21 | database: "css-performance", 22 | updateSite: true 23 | }, 24 | urls: [ 25 | "http://localhost:4200/framework/foundation/component/button/count/1000/" + 26 | "foundation:button", 27 | "http://localhost:4200/framework/jquery-mobile/component/button/count/1000/" + 28 | "jquery-mobile:button", 29 | "http://localhost:4200/framework/jquery-ui/component/button/count/1000/" + 30 | "jquery-ui:button", 31 | "http://localhost:4200/framework/jquery-ui-1-12/component/button/count/1000/" + 32 | "jquery-ui-1-12:button", 33 | "http://localhost:4200/framework/bootstrap/component/button/count/1000/" + 34 | "bootstrap:button", 35 | "http://localhost:4200/framework/topcoat/component/button/count/1000/" + 36 | "topcoat:button", 37 | "http://localhost:4200/framework/topcoat-mobile/component/button/count/1000/" + 38 | "topcoat-mobile:button", 39 | "http://localhost:4200/framework/semantic-ui/component/button/count/1000/" + 40 | "semantic-ui:button", 41 | "http://localhost:4200/framework/dojo/component/button/count/1000/" + 42 | "dojo:button" 43 | ] 44 | } 45 | } 46 | }; 47 | }; 48 | -------------------------------------------------------------------------------- /scss/atoms/buttons/_buttons.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * Buttons 4 | * ========================================================================== 5 | */ 6 | 7 | @import 8 | "dist/chassis", 9 | "mixins"; 10 | 11 | .btn-group { 12 | position: relative; 13 | display: inline-block; 14 | vertical-align: middle; 15 | 16 | &--btn { 17 | float: left; 18 | @include btn(0); 19 | } 20 | 21 | &--btn:first-child { 22 | border-top-right-radius: 0; 23 | border-bottom-right-radius: 0; 24 | } 25 | 26 | &--btn:last-child { 27 | border-top-left-radius: 0; 28 | border-bottom-left-radius: 0; 29 | } 30 | 31 | &--btn:not(:first-child):not(:last-child) { 32 | border-radius: 0; 33 | } 34 | } 35 | 36 | .btn-block { 37 | display: block; 38 | width: 100%; 39 | } 40 | 41 | .btn { 42 | @include btn( map-get($btn-element, margin)); 43 | } 44 | 45 | /* Button Colors */ 46 | 47 | .btn-default { 48 | @include btn-colors($btn-default); 49 | } 50 | 51 | .btn-primary { 52 | @include btn-colors($btn-primary); 53 | } 54 | 55 | .btn-success { 56 | @include btn-colors($btn-success); 57 | } 58 | 59 | .btn-info { 60 | @include btn-colors($btn-info); 61 | } 62 | 63 | .btn-warning { 64 | @include btn-colors($btn-warning); 65 | } 66 | 67 | .btn-danger { 68 | @include btn-colors($btn-danger ); 69 | } 70 | 71 | /* Button Sizes */ 72 | 73 | .btn-lg { 74 | @include btn-size($btn-lg); 75 | } 76 | 77 | .btn-md { 78 | @include btn-size($btn-md); 79 | } 80 | 81 | .btn-sm { 82 | @include btn-size($btn-sm); 83 | } 84 | 85 | .btn-xs { 86 | @include btn-size($btn-xs); 87 | } 88 | -------------------------------------------------------------------------------- /LICENSE.txt: -------------------------------------------------------------------------------- 1 | Copyright jQuery Foundation and other contributors, https://jquery.org/ 2 | 3 | This software consists of voluntary contributions made by many 4 | individuals. For exact contribution history, see the revision history 5 | available at https://github.com/jquery/css-chassis 6 | 7 | The following license applies to all parts of this software except as 8 | documented below: 9 | 10 | ==== 11 | 12 | Permission is hereby granted, free of charge, to any person obtaining 13 | a copy of this software and associated documentation files (the 14 | "Software"), to deal in the Software without restriction, including 15 | without limitation the rights to use, copy, modify, merge, publish, 16 | distribute, sublicense, and/or sell copies of the Software, and to 17 | permit persons to whom the Software is furnished to do so, subject to 18 | the following conditions: 19 | 20 | The above copyright notice and this permission notice shall be 21 | included in all copies or substantial portions of the Software. 22 | 23 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 24 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 25 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 26 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 27 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 28 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 29 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 30 | 31 | ==== 32 | 33 | All files located in the node_modules and external directories are 34 | externally maintained libraries used by this software which have their 35 | own licenses; we recommend you read them, as their terms may differ from 36 | the terms above. 37 | -------------------------------------------------------------------------------- /scss/variables/colors.js: -------------------------------------------------------------------------------- 1 | ( function( root, factory ) { 2 | if ( typeof define === "function" && define.amd ) { 3 | define( [ "./chassis" ], factory ); 4 | } else if ( typeof exports === "object" ) { 5 | module.exports = factory( require( "./chassis" ) ); 6 | } else { 7 | root.chassis = factory( root.chassis ); 8 | } 9 | }( this, function( chassis ) { 10 | 11 | chassis.colors = { 12 | "default": { 13 | name: "Default Colors", 14 | value: { 15 | "base": "#F5F5F5", 16 | "light": "#FFFFFF", 17 | "dark": "#EEEEEE", 18 | "darker": "#E0E0E0" 19 | } 20 | }, 21 | "primary": { 22 | name: "Primary Colors", 23 | value: { 24 | "base": "#3F51B5", 25 | "light": "#5C6BC0", 26 | "dark": "#3949AB", 27 | "darker": "#303F9F" 28 | } 29 | }, 30 | "success": { 31 | name: "Success Colors", 32 | value: { 33 | "base": "#43A047", 34 | "light": "#4CAF50", 35 | "dark": "#388E3C", 36 | "darker": "#2E7D32" 37 | } 38 | }, 39 | "warning": { 40 | name: "Warning Colors", 41 | value: { 42 | "base": "#FF5722", 43 | "light": "#FF7043", 44 | "dark": "#F4511E", 45 | "darker": "#E64A19" 46 | } 47 | }, 48 | "info": { 49 | name: "Info Colors", 50 | value: { 51 | "base": "#039BE5", 52 | "light": "#03A9F4", 53 | "dark": "#0288D1", 54 | "darker": "#0277BD" 55 | } 56 | }, 57 | "error": { 58 | name: "Error Colors", 59 | value: { 60 | "base": "#F44336", 61 | "light": "#EF5350", 62 | "dark": "#E53935", 63 | "darker": "#D32F2F" 64 | } 65 | }, 66 | "text": { 67 | name: "Text Colors", 68 | value: { 69 | "base": "#212121", 70 | "light": "#727272" 71 | } 72 | }, 73 | "background": { 74 | name: "Background Colors", 75 | value: { 76 | "base": "#fff" 77 | } 78 | } 79 | }; 80 | return chassis; 81 | } ) ); 82 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "css-chassis", 3 | "title": "Chassis", 4 | "description": "An attempt at creating open standards designed for CSS libraries, JavaScript UI libraries, and web developers in general", 5 | "version": "0.0.1", 6 | "author": { 7 | "name": "jQuery Foundation and other contributors", 8 | "url": "https://github.com/jquery/css-chassis/blob/master/AUTHORS.txt" 9 | }, 10 | "maintainers": [ 11 | { 12 | "name": "Sarah Frisk", 13 | "email": "sarah@sarahfrisk.net", 14 | "url": "http://sarahfrisk.net" 15 | }, 16 | { 17 | "name": "Alexander Schmitz", 18 | "email": "arschmitz@gmail.com", 19 | "url": "http://arschmitz.me" 20 | }, 21 | { 22 | "name": "Chris Bracco", 23 | "email": "chris@cbracco.me", 24 | "url": "http://cbracco.me" 25 | } 26 | ], 27 | "repository": { 28 | "type": "git", 29 | "url": "git://github.com/jquery/css-chassis.git" 30 | }, 31 | "bugs": "http://github.com/jquery/css-chassis/issues/", 32 | "license": "MIT", 33 | "scripts": { 34 | "build": "npm install && grunt build", 35 | "start": "grunt watch", 36 | "test": "grunt" 37 | }, 38 | "dependencies": {}, 39 | "devDependencies": { 40 | "browser-perf": "1.2.3", 41 | "chromedriver": "2.19.0", 42 | "commitplease": "2.0.0", 43 | "ejs-template": "0.1.0", 44 | "grunt": "0.4.5", 45 | "grunt-autoprefixer": "2.1.0", 46 | "grunt-contrib-connect": "0.9.0", 47 | "grunt-contrib-csslint": "0.5.0", 48 | "grunt-contrib-cssmin": "0.14.0", 49 | "grunt-contrib-jshint": "0.11.3", 50 | "grunt-contrib-watch": "0.6.1", 51 | "grunt-csscomb": "3.0.0", 52 | "grunt-git-authors": "2.0.0", 53 | "grunt-html": "5.0.1", 54 | "grunt-jsass": "1.1.0", 55 | "grunt-jscs": "2.3.0", 56 | "grunt-sass": "1.0.0", 57 | "grunt-selenium-server": "0.1.2", 58 | "grunt-svgmin": "2.0.0", 59 | "grunt-svgstore": "0.5.0", 60 | "load-grunt-config": "0.16.0", 61 | "perfjankie": "1.2.2" 62 | }, 63 | "keywords": [] 64 | } 65 | -------------------------------------------------------------------------------- /scss/atoms/buttons/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin btn($margin) { 2 | border: 1px solid transparent; 3 | cursor: pointer; 4 | letter-spacing: map-get($btn-element, letter-spacing); 5 | font-family: $btn-font; 6 | font-weight: map-get($btn-element, font-weight); 7 | margin: $margin; 8 | text-decoration: none; 9 | text-transform: map-get($btn-element, text-transform); 10 | } 11 | 12 | @mixin btn-colors($btn-colors) { 13 | color: map-get($btn-colors, color); 14 | background: map-deep-get($btn-colors, "background", "base"); 15 | border-color: map-get($btn-colors, border); 16 | @if (map-get($btn-colors, shadow) == true) { 17 | transition: map-get($btn-shadows, transition); 18 | box-shadow: map-get($btn-shadows, box-shadow-base); 19 | } 20 | 21 | &:active, 22 | &.active { 23 | @include btn-active($btn-colors); 24 | @if (map-get($btn-colors, shadow) == true) { 25 | box-shadow: map-get($btn-shadows, box-shadow-active); 26 | } 27 | } 28 | 29 | &:focus, 30 | &.focus { 31 | @include btn-focus($btn-colors); 32 | } 33 | 34 | &:hover, 35 | &.hover { 36 | @include btn-hover($btn-colors); 37 | } 38 | 39 | &:hover { 40 | text-decoration: none; 41 | } 42 | 43 | &:disabled, 44 | &.disabled { 45 | @include btn-disabled($btn-colors); 46 | @if (map-get($btn-colors, shadow) == true) { 47 | box-shadow: map-get($btn-shadows, box-shadow-disabled); 48 | } 49 | } 50 | } 51 | 52 | @mixin btn-size($btn-size) { 53 | border-radius: map-get($btn-size, border-radius); 54 | font-size: map-get($btn-size, font-size); 55 | line-height: map-get($btn-size, line-height); 56 | padding: map-get($btn-size, padding); 57 | } 58 | 59 | @mixin btn-active($btn-colors) { 60 | color: map-get($btn-colors, color); 61 | background: map-deep-get($btn-colors, "background", "dark"); 62 | border-color: map-get($btn-colors, border); 63 | } 64 | 65 | @mixin btn-focus($btn-colors) { 66 | color: map-get($btn-colors, color); 67 | background: map-deep-get($btn-colors, "background", "darker"); 68 | border-color: map-get($btn-colors, border); 69 | } 70 | 71 | @mixin btn-hover($btn-colors) { 72 | color: map-get($btn-colors, color); 73 | background: map-deep-get($btn-colors, "background", "light"); 74 | border-color: map-get($btn-colors, border); 75 | } 76 | 77 | @mixin btn-disabled($btn-colors) { 78 | cursor: map-get($btn-disable, cursor); 79 | color: rgba(map-get($btn-colors, color), map-get($btn-disable, "color-opacity")); 80 | $bg: map-deep-get($btn-colors, "background", "base"); 81 | @if ($bg == transparent) { 82 | background: map-deep-get($btn-colors, "background", "base"); 83 | } @else { 84 | background: rgba($bg, map-get($btn-disable, "background-opacity")); 85 | } 86 | @if (map-get($btn-colors, border) == transparent) { 87 | border-color: map-get($btn-colors, border); 88 | } @else { 89 | border-color: rgba(map-get($btn-colors, border), map-get($btn-disable, "background-opacity")); 90 | } 91 | } 92 | -------------------------------------------------------------------------------- /scss/atoms/typography/_typography.scss: -------------------------------------------------------------------------------- 1 | /* 2 | * ========================================================================== 3 | * Typography 4 | * ========================================================================== 5 | */ 6 | 7 | @import 8 | "dist/chassis", 9 | "functions", 10 | "mixins"; 11 | 12 | body { 13 | font: $typography-normal #{ map-get( $typography-font-default, font-size ) }/1.5 $typography-sans; 14 | 15 | @media ( max-width: $breakpoints-viewport-md-min ) { 16 | font-size: 16px; 17 | } 18 | @media ( max-width: $breakpoints-viewport-sm-min ) { 19 | font-size: 14px; 20 | } 21 | } 22 | 23 | h1 { 24 | @include heading($typography-h1); 25 | } 26 | 27 | h2 { 28 | @include heading($typography-h2); 29 | } 30 | 31 | h3 { 32 | @include heading($typography-h3); 33 | } 34 | 35 | h4 { 36 | @include heading($typography-h4); 37 | } 38 | 39 | h5 { 40 | @include heading($typography-h5); 41 | } 42 | 43 | h6 { 44 | @include heading($typography-h6); 45 | } 46 | 47 | /* 48 | * ========================================================================== 49 | * Block elements 50 | * ========================================================================== 51 | */ 52 | 53 | hr { 54 | border: 0; 55 | border-bottom: map-get($typography-hr, thickness) map-get($typography-hr, style) map-get($typography-hr, color); 56 | } 57 | 58 | blockquote { 59 | margin: 0; 60 | padding-left: map-get($typography-blockquote,padding-left); //TODO consider all padding variables 61 | position: relative; 62 | border-left: map-get($typography-blockquote,border); 63 | font-style: map-get($typography-blockquote,font-style); 64 | } 65 | 66 | pre { 67 | padding: 16px 20px; 68 | background: map-get($typography-pre,background); 69 | font: normal 12px/1.4 $typography-monospace; 70 | } 71 | 72 | /* 73 | * ========================================================================== 74 | * Lists 75 | * ========================================================================== 76 | */ 77 | 78 | dt { 79 | font-weight: 600; 80 | } 81 | 82 | dd { 83 | margin: 0; 84 | } 85 | 86 | /* 87 | * ========================================================================== 88 | * Inline elements 89 | * ========================================================================== 90 | */ 91 | 92 | a { 93 | @include link($typography-link); 94 | &:visited { 95 | @include link($typography-link-visited); 96 | } 97 | &:active, 98 | &:focus { 99 | @include link($typography-link-focus); 100 | } 101 | &:hover { 102 | @include link($typography-link-hover); 103 | } 104 | } 105 | 106 | b, 107 | strong { 108 | font-weight: $typography-bold; 109 | } 110 | 111 | code { 112 | background: map-get($typography-code,background); 113 | font-size: em( 16px ); 114 | padding: em( 4px, 16px ) em( 8px, 16px ); 115 | border-radius: map-get($typography-code,border-radius); 116 | } 117 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Chassis is creating open standards designed for CSS libraries, JavaScript UI libraries, and web developers in general. This project will define standards for markup and class names for common widgets and patterns, as well as an implementation of those standards. Similar to how DOM libraries can build upon [Sizzle](https://github.com/jquery/sizzle), we hope UI libraries will build upon this project. 2 | 3 | ## Goals 4 | 5 | * **Broad Device Support**: The number of devices being used around the world continues to grow. We aim to support a wide range of devices without sacrificing usability or aesthetics. 6 | * **Performance**: The styles applied to your web page have a significant impact on, for example, how quickly the page can be rendered and how smoothly the page scrolls. We aim to keep this impact as small as possible. 7 | * **Modularity**: Each component will be designed as separate modules, allowing customized builds of just the pieces you need. 8 | * **Pushing Web Standards**: We will work with the W3C and WHATWG to improve CSS standards based on our work and feedback from the community. 9 | * **Collaboration**: We value input and collaboration from the community. We don't want to just build yet another CSS library; we want to improve collaboration and interoperability across projects. 10 | 11 | ## Project Collaboration and Interoperability 12 | 13 | If you maintain a JavaScript library that has UI components, we'd love for you to join our efforts. We'd be happy to hear your feedback and work through updates of your project(s) to support Chassis. If you have the time and interest to help define the standards and improve on our implementation, that's even better! Check out the [contribution guidelines](https://github.com/jquery/css-chassis/blob/master/CONTRIBUTING.md) for more information. 14 | 15 | 16 | ## Getting started 17 | 18 | ### Prerequisites 19 | 20 | [Node.js and npm](http://nodejs.org/download/) should be installed, [as well as `grunt-cli`](http://gruntjs.com/getting-started). 21 | 22 | ### Building 23 | 24 | Once you've cloned Chassis to your machine, run these commands: 25 | ```bash 26 | $ npm install 27 | $ grunt build 28 | ``` 29 | 30 | ### Develop 31 | 32 | To automate the build process during development, run the `grunt watch` task to compile SCSS upon file change. 33 | 34 | ```bash 35 | $ grunt watch 36 | ``` 37 | 38 | ### Grunt Tests 39 | 40 | To run the tests locally run: 41 | 42 | ```bash 43 | $ grunt test 44 | ``` 45 | Make sure you run the tests before creating a pull request. 46 | 47 | ### Performance testing 48 | 49 | #### Setup 50 | 51 | * Follow the steps for building above 52 | * Ensure you have both Firefox and Chrome browsers installed 53 | * [Download and start CouchDB](http://couchdb.apache.org/#download) 54 | 55 | #### Running the tests 56 | 57 | Once you have completed the setup run this: 58 | ```bash 59 | $ grunt perf 60 | ``` 61 | 62 | *__DO NOT USE YOUR COMPUTER WHILE TESTS ARE RUNNING__* 63 | 64 | Once the tests completed, [view the results](http://localhost:5984/css-performance/_design/site/index.html#/page-select). 65 | 66 | #### Viewing the test pages 67 | 68 | Follow the steps above to build. Once that is complete run this: 69 | ```bash 70 | $ grunt connect:dev 71 | ``` 72 | This will start a connect server that will run until you stop it (`Ctrl+C`). Then go to http://localhost:4200/framework/{framework name}/component/{component name}/count/{ # of components to render}/ and you can see the generated test page. 73 | -------------------------------------------------------------------------------- /scss/variables/btn.js: -------------------------------------------------------------------------------- 1 | ( function( root, factory ) { 2 | if ( typeof define === "function" && define.amd ) { 3 | define( [ "./chassis", "./colors", "./typograpy" ], factory ); 4 | } else if ( typeof exports === "object" ) { 5 | require( "./chassis" ); 6 | require( "./colors" ); 7 | module.exports = factory( require( "./typography" ) ); 8 | } else { 9 | root.chassis = factory( root.chassis ); 10 | } 11 | }( this, function( chassis ) { 12 | 13 | chassis.btn = { 14 | "shadows": { 15 | name: "Button Shadow Styles", 16 | value: { 17 | "transition": "box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1)", 18 | "box-shadow-base": "0 2px 5px 0 rgba(0,0,0,.26)", 19 | "box-shadow-active": "0 3px 10px 0 rgba(0,0,0,.2)", 20 | "box-shadow-disabled": "0 0 0 rgba(0,0,0,0)" 21 | } 22 | }, 23 | 24 | "element": { 25 | name: "Generic Button Styles", 26 | value: { 27 | "font-weight": 500, 28 | "margin": ".25em", 29 | "text-transform": "uppercase", 30 | "letter-spacing": "1px" 31 | } 32 | }, 33 | "font": { 34 | name: "Button Font", 35 | value: () => "typography.sans" 36 | }, 37 | "default": { 38 | name: "Default Button", 39 | value: { 40 | "color": "#212121", 41 | "background": () => "colors.default", 42 | "border": "transparent", 43 | "shadow": "true" 44 | } 45 | }, 46 | "primary": { 47 | name: "Primary Button", 48 | value: { 49 | "color": "#ffffff", 50 | "background": () => "colors.primary", 51 | "border": "transparent", 52 | "shadow": "true" 53 | } 54 | }, 55 | "success": { 56 | name: "Success Button", 57 | value: { 58 | "color": "#ffffff", 59 | "background": () => "colors.success", 60 | "border": "transparent", 61 | "shadow": "true" 62 | } 63 | }, 64 | 65 | "info": { 66 | name: "Info Button", 67 | value: { 68 | "color": "#ffffff", 69 | "background": () => "colors.info", 70 | "border": "transparent", 71 | "shadow": "true" 72 | } 73 | }, 74 | "warning": { 75 | name: "Warning Button", 76 | value: { 77 | "color": "#ffffff", 78 | "background": () => "colors.warning", 79 | "border": "transparent", 80 | "shadow": "true" 81 | } 82 | }, 83 | "danger": { 84 | name: "Danger Button", 85 | value: { 86 | "color": "#ffffff", 87 | "background": () => "colors.error", 88 | "border": "transparent", 89 | "shadow": "true" 90 | } 91 | }, 92 | "disable": { 93 | name: "Disabled Button", 94 | value: { 95 | "color-opacity": 0.6, 96 | "background-opacity": 0.3, 97 | "cursor": "not-allowed" 98 | } 99 | }, 100 | "lg": { 101 | name: "Large Button", 102 | value: { 103 | "border-radius": "2px", 104 | "font-size": "16px", 105 | "line-height": "16px", 106 | "padding": ".75em 1.25em" 107 | } 108 | }, 109 | "md": { 110 | name: "Medium Sized Button", 111 | value: { 112 | "border-radius": "2px", 113 | "font-size": "14px", 114 | "line-height": "14px", 115 | "padding": ".5em 1em" 116 | } 117 | }, 118 | "sm": { 119 | name: "Small Button", 120 | value: { 121 | "border-radius": "2px", 122 | "font-size": "12px", 123 | "line-height": "12px", 124 | "padding": ".45em .75em" 125 | } 126 | }, 127 | "xs": { 128 | name: "Extra Small Button", 129 | value: { 130 | "border-radius": "2px", 131 | "font-size": "12px", 132 | "line-height": "12px", 133 | "padding": ".35em" 134 | } 135 | } 136 | }; 137 | 138 | return chassis; 139 | } ) ); 140 | -------------------------------------------------------------------------------- /scss/variables/typography.js: -------------------------------------------------------------------------------- 1 | ( function( root, factory ) { 2 | if ( typeof define === "function" && define.amd ) { 3 | define( [ "./chassis", "./colors" ], factory ); 4 | } else if ( typeof exports === "object" ) { 5 | require( "./chassis" ); 6 | module.exports = factory( require( "./colors" ) ); 7 | } else { 8 | root.chassis = factory( root.chassis ); 9 | } 10 | }( this, function( chassis ) { 11 | 12 | var color = "map-get($colors-text, base)", 13 | fontSize = "20px", 14 | lineHeight = 1.5; 15 | 16 | chassis.typography = { 17 | "normal": { 18 | name: "Font weight - Normal", 19 | value: "normal" 20 | }, 21 | "bold": { 22 | name: "Font weight - Bold", 23 | value: "bold" 24 | }, 25 | "color": { 26 | name: "Font color", 27 | value: color 28 | }, 29 | "font-size": { 30 | name: "Font size", 31 | value: fontSize 32 | }, 33 | "line-height": { 34 | name: "Line Height", 35 | value: lineHeight 36 | }, 37 | "font-default": { 38 | name: "Type Style - Default", 39 | value: { 40 | "color": color, 41 | "font-size": fontSize, 42 | "line-height": lineHeight 43 | } 44 | }, 45 | "monospace": { 46 | name: "Font Family - Monospace", 47 | value: "\"courier new\", monospace" 48 | }, 49 | "serif": { 50 | name: "Font Family - Serif", 51 | value: "Georgia, \"Times New Roman\", Times, serif" 52 | }, 53 | "sans": { 54 | name: "Font Family - Sans", 55 | value: "Helvetica, Arial, sans-serif" 56 | }, 57 | "link": { 58 | name: "Link", 59 | value: { 60 | "color": "map-get($colors-primary, base)", 61 | "decoration": "none", 62 | "font-weight": "normal" 63 | } 64 | }, 65 | "link-hover": { 66 | name: "Link On Mouse Hover", 67 | value: { 68 | "color": "map-get($colors-primary, light)", 69 | "decoration": "underline", 70 | "font-weight": "normal" 71 | } 72 | }, 73 | "link-focus": { 74 | name: "Link On Focus or Active", 75 | value: { 76 | "color": "map-get($colors-primary, dark)", 77 | "decoration": "none", 78 | "font-weight": "normal" 79 | } 80 | }, 81 | "link-visited": { 82 | name: "Link If Visited", 83 | value: { 84 | "color": "map-get($colors-primary, base)", 85 | "decoration": "none", 86 | "font-weight": "normal" 87 | } 88 | }, 89 | "hr": { 90 | name: "HR style", 91 | value: { 92 | "color": "#999", 93 | "thickness": "1px", 94 | "style": "solid" 95 | } 96 | }, 97 | "code": { 98 | name: "code style", 99 | value: { 100 | "background": "#f2f2f2", 101 | "border-radius": "3px" 102 | } 103 | }, 104 | "pre": { 105 | name: "Pre style", 106 | value: { 107 | "background": "#f7f7f7" 108 | } 109 | }, 110 | "h1": { 111 | name: "H1 Style", 112 | value: { 113 | "font-weight": "700", 114 | "font-size": "67px", 115 | "capitalization": "none" 116 | } 117 | }, 118 | "h2": { 119 | name: "H2 Style", 120 | value: { 121 | "font-weight": "600", 122 | "font-size": "36px", 123 | "capitalization": "none" 124 | } 125 | }, 126 | "h3": { 127 | name: "H3 Style", 128 | value: { 129 | "font-weight": "600", 130 | "font-size": "30px", 131 | "capitalization": "none" 132 | } 133 | }, 134 | "h4": { 135 | name: "H4 Style", 136 | value: { 137 | "font-weight": "600", 138 | "font-size": "24px", 139 | "capitalization": "none" 140 | } 141 | }, 142 | "h5": { 143 | name: "H5 Style", 144 | value: { 145 | "font-weight": "600", 146 | "font-size": "20px", 147 | "capitalization": "none" 148 | } 149 | }, 150 | "h6": { 151 | name: "H6 Style", 152 | value: { 153 | "font-weight": "600", 154 | "font-size": "16px", 155 | "capitalization": "uppercase" 156 | } 157 | }, 158 | "blockquote": { 159 | name: "BlockQuote Style", 160 | value: { 161 | "border": "4px solid #eee", 162 | "font-style": "italic", 163 | "padding-left": "1em" 164 | } 165 | } 166 | 167 | }; 168 | 169 | return chassis; 170 | } ) ); 171 | -------------------------------------------------------------------------------- /demos/typography.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Chassis - Typography 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

CSS Chassis

15 | 16 |
17 | 18 |

Heading 1 <h1>

19 |

Heading 2 <h2>

20 |

Heading 3 <h3>

21 |

Heading 4 <h4>

22 |
Heading 5 <h5>
23 |
Heading 6 <h6>
24 | 25 |
26 | 27 |

Heading 1 <h1>

28 |

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.

29 | 30 |

Heading 2 <h2>

31 |

It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn't feel like a giant. I felt very, very small.

32 | 33 |

Heading 3 <h3>

34 |

The Earth was small, light blue, and so touchingly alone, our home that must be defended like a holy relic. The Earth was absolutely round. I believe I never knew what the word round meant until I saw Earth from space.

35 | 36 |

Heading 4 <h4>

37 |

To be the first to enter the cosmos, to engage, single-handed, in an unprecedented duel with nature—could one dream of anything more?

38 | 39 |
Heading 5 <h5>
40 |

What was most significant about the lunar voyage was not that man set foot on the Moon but that they set eye on the earth.

41 | 42 |
Heading 6 <h6>
43 |

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.

44 | 45 |
46 | 47 |

Block-level elements

48 | 49 |

Here's a paragraph <p> filled with some Space Ipsum. Never in all their history have men been able truly to conceive of the world as one: a single sphere, a globe, having the qualities of a globe, a round earth in which all the directions eventually meet, in which there is no center because every point, or none, is center — an equal earth which all men occupy as equals. The airman"s earth, if free men make it, will be truly round: a globe in practice, not in theory.

50 | 51 |

There can be no thought of finishing for ‘aiming for the stars.’ Both figuratively and literally, it is a task to occupy the generations. And no matter how much progress one makes, there is always the thrill of just beginning.

52 | 53 |
Here's a div <div>. A Chinese tale tells of some men sent to harm a young girl who, upon seeing her beauty, become her protectors rather than her violators. That"s how I felt seeing the Earth for the first time. I could not help but love and cherish her 54 |
55 | 56 |
57 |

This is an article <article> with a paragraph

58 |

We want to explore. We’re curious people. Look back over history, people have put their lives at stake to go out and explore … We believe in what we’re doing. Now it’s time to go.

59 |

End of the article.

60 |
61 | 62 |
Let's light this fire one more time, Mike, and witness this great nation at its best. <blockquote> via Space Ipsum
63 | 64 |

We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win.

65 | 66 | 
 67 | * {
 68 | 	font-family: "Comic Sans MS", "Comic Sans", "Marker Felt" !important;
 69 | }
 70 | <pre>
 71 |
72 | 73 |

Many say exploration is part of our destiny, but it’s actually our duty to future generations and their quest to ensure the survival of the human species.

74 | 75 |
76 | Sherlock Holmes
77 | 221B Baker Street
78 | London, United Kingdom <address> 79 |
80 | 81 |
82 | 83 |

Lists <li>

84 |

The regret on our side is, they used to say years ago, we are reading about you in science class. Now they say, we are reading about you in history class.

85 | 86 |
    87 |
  • Unordered list <ul>
    • 88 |
  • List element
    • 89 |
  • Across the sea of space, the stars are other suns.
    • 90 |
  • Science cuts two ways, of course; its products can be used for both good and evil. But there's no turning back from science. The early warnings about technological dangers also come from science.
    • 91 |
92 | 93 |

It suddenly struck me that that tiny pea, pretty and blue, was the Earth. I put up my thumb and shut one eye, and my thumb blotted out the planet Earth. I didn't feel like a giant. I felt very, very small.

94 | 95 |
    96 |
  1. Ordered list <ol>
    2. 97 |
  2. List element
    3. 98 |
  3. The dreams of yesterday are the hopes of today and the reality of tomorrow.
    4. 99 |
  4. Curious that we spend more time congratulating people who have succeeded than encouraging people who have not.
    5. 100 |
101 | 102 |

For those who have seen the Earth from space, and for the hundreds and perhaps thousands more who will, the experience most certainly changes your perspective. The things that we share in our world are far more valuable than those which divide us.

103 | 104 |
105 |
Definition term <dt>
106 |
Definition <dd>
107 |
Earth
108 |
A kick-ass planet.
109 |
Pluto
110 |
A kick-ass former planet.
111 |
Space Ipsum
112 |
NASA is not about the ‘Adventure of Human Space Exploration’…We won’t be doing it just to get out there in space – we’ll be doing it because the things we learn out there will be making life better for a lot of people who won’t be able to go.
113 |
114 | 115 |

Spaceflights cannot be stopped. This is not the work of any one man or even a group of men. It is a historical process which mankind is carrying out in accordance with the natural laws of human development.

116 | 117 |
118 | 119 |

Text-level elements

120 | 121 |
    122 |
  • anchor link <a>
    • 123 |
  • abbreviation: SASS <abbr>
    • 124 |
  • citation: A Study in Scarlet <cite>
    • 125 |
  • Here's the <code> element
    • 126 |
  • deleted text: Episodes I, II, III <del>
    • 127 |
  • definition: The definition element is the element being defined inline. <dfn>
    • 128 |
  • emphasis <em>
    • 129 |
  • inserted text <ins>
    • 130 |
  • keyboard input: control + space <kbd>
    • 131 |
  • mark element <mark>
    • 132 |
  • meter: awesomeness <meter>
    • 133 |
  • progress: 70 % <progress>
    • 134 |
  • quotation (short): You just gotta believe! <q>
    • 135 |
  • quotation within a quotation (short): Yo dawg, I heard you like quotes so I put this quote within this quote. <q>
    • 136 |
  • strikethough: Lance Armstrong remains steroid-free. <s>
    • 137 |
  • sample text: Error <samp>
    • 138 |
  • small: Hydrogen <small>
    • 139 |
  • small within small: Hydrogen Hydrogen <small>
    • 140 |
  • strong: The Hammer <strong>
    • 141 |
  • subscript: Lower 0123 <sub>
    • 142 |
  • superscript: I need a good superman joke to go here. 0123 <sup>
    • 143 |
  • time: <time>
    • 144 |
  • underline: Never underline anything. <u>
    • 145 |
  • variable: cat + dog = catdog <var>
    • 146 |
147 |
148 | 149 | 150 | 151 | -------------------------------------------------------------------------------- /external/normalize.css/normalize.scss: -------------------------------------------------------------------------------- 1 | /*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */ 2 | 3 | /** 4 | * 1. Set default font family to sans-serif. 5 | * 2. Prevent iOS and IE text size adjust after device orientation change, 6 | * without disabling user zoom. 7 | */ 8 | 9 | html { 10 | font-family: sans-serif; /* 1 */ 11 | -ms-text-size-adjust: 100%; /* 2 */ 12 | -webkit-text-size-adjust: 100%; /* 2 */ 13 | } 14 | 15 | /** 16 | * Remove default margin. 17 | */ 18 | 19 | body { 20 | margin: 0; 21 | } 22 | 23 | /* HTML5 display definitions 24 | ========================================================================== */ 25 | 26 | /** 27 | * Correct `block` display not defined for any HTML5 element in IE 8/9. 28 | * Correct `block` display not defined for `details` or `summary` in IE 10/11 29 | * and Firefox. 30 | * Correct `block` display not defined for `main` in IE 11. 31 | */ 32 | 33 | article, 34 | aside, 35 | details, 36 | figcaption, 37 | figure, 38 | footer, 39 | header, 40 | hgroup, 41 | main, 42 | menu, 43 | nav, 44 | section, 45 | summary { 46 | display: block; 47 | } 48 | 49 | /** 50 | * 1. Correct `inline-block` display not defined in IE 8/9. 51 | * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera. 52 | */ 53 | 54 | audio, 55 | canvas, 56 | progress, 57 | video { 58 | display: inline-block; /* 1 */ 59 | vertical-align: baseline; /* 2 */ 60 | } 61 | 62 | /** 63 | * Prevent modern browsers from displaying `audio` without controls. 64 | * Remove excess height in iOS 5 devices. 65 | */ 66 | 67 | audio:not([controls]) { 68 | display: none; 69 | height: 0; 70 | } 71 | 72 | /** 73 | * Address `[hidden]` styling not present in IE 8/9/10. 74 | * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22. 75 | */ 76 | 77 | [hidden], 78 | template { 79 | display: none; 80 | } 81 | 82 | /* Links 83 | ========================================================================== */ 84 | 85 | /** 86 | * Remove the gray background color from active links in IE 10. 87 | */ 88 | 89 | a { 90 | background-color: transparent; 91 | } 92 | 93 | /** 94 | * Improve readability of focused elements when they are also in an 95 | * active/hover state. 96 | */ 97 | 98 | a:active, 99 | a:hover { 100 | outline: 0; 101 | } 102 | 103 | /* Text-level semantics 104 | ========================================================================== */ 105 | 106 | /** 107 | * Address styling not present in IE 8/9/10/11, Safari, and Chrome. 108 | */ 109 | 110 | abbr[title] { 111 | border-bottom: 1px dotted; 112 | } 113 | 114 | /** 115 | * Address style set to `bolder` in Firefox 4+, Safari, and Chrome. 116 | */ 117 | 118 | b, 119 | strong { 120 | font-weight: bold; 121 | } 122 | 123 | /** 124 | * Address styling not present in Safari and Chrome. 125 | */ 126 | 127 | dfn { 128 | font-style: italic; 129 | } 130 | 131 | /** 132 | * Address variable `h1` font-size and margin within `section` and `article` 133 | * contexts in Firefox 4+, Safari, and Chrome. 134 | */ 135 | 136 | h1 { 137 | font-size: 2em; 138 | margin: 0.67em 0; 139 | } 140 | 141 | /** 142 | * Address styling not present in IE 8/9. 143 | */ 144 | 145 | mark { 146 | background: #ff0; 147 | color: #000; 148 | } 149 | 150 | /** 151 | * Address inconsistent and variable font size in all browsers. 152 | */ 153 | 154 | small { 155 | font-size: 80%; 156 | } 157 | 158 | /** 159 | * Prevent `sub` and `sup` affecting `line-height` in all browsers. 160 | */ 161 | 162 | sub, 163 | sup { 164 | font-size: 75%; 165 | line-height: 0; 166 | position: relative; 167 | vertical-align: baseline; 168 | } 169 | 170 | sup { 171 | top: -0.5em; 172 | } 173 | 174 | sub { 175 | bottom: -0.25em; 176 | } 177 | 178 | /* Embedded content 179 | ========================================================================== */ 180 | 181 | /** 182 | * Remove border when inside `a` element in IE 8/9/10. 183 | */ 184 | 185 | img { 186 | border: 0; 187 | } 188 | 189 | /** 190 | * Correct overflow not hidden in IE 9/10/11. 191 | */ 192 | 193 | svg:not(:root) { 194 | overflow: hidden; 195 | } 196 | 197 | /* Grouping content 198 | ========================================================================== */ 199 | 200 | /** 201 | * Address margin not present in IE 8/9 and Safari. 202 | */ 203 | 204 | figure { 205 | margin: 1em 40px; 206 | } 207 | 208 | /** 209 | * Address differences between Firefox and other browsers. 210 | */ 211 | 212 | hr { 213 | box-sizing: content-box; 214 | height: 0; 215 | } 216 | 217 | /** 218 | * Contain overflow in all browsers. 219 | */ 220 | 221 | pre { 222 | overflow: auto; 223 | } 224 | 225 | /** 226 | * Address odd `em`-unit font size rendering in all browsers. 227 | */ 228 | 229 | code, 230 | kbd, 231 | pre, 232 | samp { 233 | font-family: monospace, monospace; 234 | font-size: 1em; 235 | } 236 | 237 | /* Forms 238 | ========================================================================== */ 239 | 240 | /** 241 | * Known limitation: by default, Chrome and Safari on OS X allow very limited 242 | * styling of `select`, unless a `border` property is set. 243 | */ 244 | 245 | /** 246 | * 1. Correct color not being inherited. 247 | * Known issue: affects color of disabled elements. 248 | * 2. Correct font properties not being inherited. 249 | * 3. Address margins set differently in Firefox 4+, Safari, and Chrome. 250 | */ 251 | 252 | button, 253 | input, 254 | optgroup, 255 | select, 256 | textarea { 257 | color: inherit; /* 1 */ 258 | font: inherit; /* 2 */ 259 | margin: 0; /* 3 */ 260 | } 261 | 262 | /** 263 | * Address `overflow` set to `hidden` in IE 8/9/10/11. 264 | */ 265 | 266 | button { 267 | overflow: visible; 268 | } 269 | 270 | /** 271 | * Address inconsistent `text-transform` inheritance for `button` and `select`. 272 | * All other form control elements do not inherit `text-transform` values. 273 | * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera. 274 | * Correct `select` style inheritance in Firefox. 275 | */ 276 | 277 | button, 278 | select { 279 | text-transform: none; 280 | } 281 | 282 | /** 283 | * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio` 284 | * and `video` controls. 285 | * 2. Correct inability to style clickable `input` types in iOS. 286 | * 3. Improve usability and consistency of cursor style between image-type 287 | * `input` and others. 288 | */ 289 | 290 | button, 291 | html input[type="button"], /* 1 */ 292 | input[type="reset"], 293 | input[type="submit"] { 294 | -webkit-appearance: button; /* 2 */ 295 | cursor: pointer; /* 3 */ 296 | } 297 | 298 | /** 299 | * Re-set default cursor for disabled elements. 300 | */ 301 | 302 | button[disabled], 303 | html input[disabled] { 304 | cursor: default; 305 | } 306 | 307 | /** 308 | * Remove inner padding and border in Firefox 4+. 309 | */ 310 | 311 | button::-moz-focus-inner, 312 | input::-moz-focus-inner { 313 | border: 0; 314 | padding: 0; 315 | } 316 | 317 | /** 318 | * Address Firefox 4+ setting `line-height` on `input` using `!important` in 319 | * the UA stylesheet. 320 | */ 321 | 322 | input { 323 | line-height: normal; 324 | } 325 | 326 | /** 327 | * It's recommended that you don't attempt to style these elements. 328 | * Firefox's implementation doesn't respect box-sizing, padding, or width. 329 | * 330 | * 1. Address box sizing set to `content-box` in IE 8/9/10. 331 | * 2. Remove excess padding in IE 8/9/10. 332 | */ 333 | 334 | input[type="checkbox"], 335 | input[type="radio"] { 336 | box-sizing: border-box; /* 1 */ 337 | padding: 0; /* 2 */ 338 | } 339 | 340 | /** 341 | * Fix the cursor style for Chrome's increment/decrement buttons. For certain 342 | * `font-size` values of the `input`, it causes the cursor style of the 343 | * decrement button to change from `default` to `text`. 344 | */ 345 | 346 | input[type="number"]::-webkit-inner-spin-button, 347 | input[type="number"]::-webkit-outer-spin-button { 348 | height: auto; 349 | } 350 | 351 | /** 352 | * 1. Address `appearance` set to `searchfield` in Safari and Chrome. 353 | * 2. Address `box-sizing` set to `border-box` in Safari and Chrome. 354 | */ 355 | 356 | input[type="search"] { 357 | -webkit-appearance: textfield; /* 1 */ 358 | box-sizing: content-box; /* 2 */ 359 | } 360 | 361 | /** 362 | * Remove inner padding and search cancel button in Safari and Chrome on OS X. 363 | * Safari (but not Chrome) clips the cancel button when the search input has 364 | * padding (and `textfield` appearance). 365 | */ 366 | 367 | input[type="search"]::-webkit-search-cancel-button, 368 | input[type="search"]::-webkit-search-decoration { 369 | -webkit-appearance: none; 370 | } 371 | 372 | /** 373 | * Define consistent border, margin, and padding. 374 | */ 375 | 376 | fieldset { 377 | border: 1px solid #c0c0c0; 378 | margin: 0 2px; 379 | padding: 0.35em 0.625em 0.75em; 380 | } 381 | 382 | /** 383 | * 1. Correct `color` not being inherited in IE 8/9/10/11. 384 | * 2. Remove padding so people aren't caught out if they zero out fieldsets. 385 | */ 386 | 387 | legend { 388 | border: 0; /* 1 */ 389 | padding: 0; /* 2 */ 390 | } 391 | 392 | /** 393 | * Remove default vertical scrollbar in IE 8/9/10/11. 394 | */ 395 | 396 | textarea { 397 | overflow: auto; 398 | } 399 | 400 | /** 401 | * Don't inherit the `font-weight` (applied by a rule above). 402 | * NOTE: the default cannot safely be changed in Chrome and Safari on OS X. 403 | */ 404 | 405 | optgroup { 406 | font-weight: bold; 407 | } 408 | 409 | /* Tables 410 | ========================================================================== */ 411 | 412 | /** 413 | * Remove most spacing between table cells. 414 | */ 415 | 416 | table { 417 | border-collapse: collapse; 418 | border-spacing: 0; 419 | } 420 | 421 | td, 422 | th { 423 | padding: 0; 424 | } 425 | -------------------------------------------------------------------------------- /demos/buttons.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CSS Chassis - Buttons 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 |

CSS Chassis

15 | 16 |

Extra Small Buttons

17 |

18 | 19 | 20 | 21 | 22 | 23 | 24 |

25 | 26 |

Extra Small Disabled

27 |

28 | 29 | 30 | 31 | 32 | 33 | 34 |

35 | 36 |

Extra Small Active

37 |

38 | 39 | 40 | 41 | 42 | 43 | 44 |

45 | 46 |

Extra Small Focus

47 |

48 | 49 | 50 | 51 | 52 | 53 | 54 |

55 | 56 |

Extra Small Hover

57 |

58 | 59 | 60 | 61 | 62 | 63 | 64 |

65 | 66 | 67 |

Small Buttons

68 |

69 | 70 | 71 | 72 | 73 | 74 | 75 |

76 | 77 |

Small Disabled

78 |

79 | 80 | 81 | 82 | 83 | 84 | 85 |

86 | 87 |

Small Active

88 |

89 | 90 | 91 | 92 | 93 | 94 | 95 |

96 | 97 |

Small Focus

98 |

99 | 100 | 101 | 102 | 103 | 104 | 105 |

106 | 107 |

Small Hover

108 |

109 | 110 | 111 | 112 | 113 | 114 | 115 |

116 | 117 |

Medium Buttons

118 |

119 | 120 | 121 | 122 | 123 | 124 | 125 |

126 | 127 |

Medium Disabled

128 |

129 | 130 | 131 | 132 | 133 | 134 | 135 |

136 | 137 |

Medium Active

138 |

139 | 140 | 141 | 142 | 143 | 144 | 145 |

146 | 147 |

Medium Focus

148 |

149 | 150 | 151 | 152 | 153 | 154 | 155 |

156 | 157 |

Medium Hover

158 |

159 | 160 | 161 | 162 | 163 | 164 | 165 |

166 | 167 |

Large Buttons

168 |

169 | 170 | 171 | 172 | 173 | 174 | 175 |

176 | 177 |

Large Disabled

178 |

179 | 180 | 181 | 182 | 183 | 184 | 185 |

186 | 187 |

Large Active

188 |

189 | 190 | 191 | 192 | 193 | 194 | 195 |

196 | 197 |

Large Focus

198 |

199 | 200 | 201 | 202 | 203 | 204 | 205 |

206 | 207 |

Large Hover

208 |

209 | 210 | 211 | 212 | 213 | 214 | 215 |

216 | 217 |

Anchor Links as Buttons

218 |

219 | Default 220 | Primary 221 | Success 222 | Info 223 | Warning 224 | Danger 225 |

226 | 227 |

Input[type=submit]

228 |

229 | 230 | 231 | 232 | 233 | 234 | 235 |

236 | 237 |

Block Buttons

238 |

239 | 240 | 241 | 242 | 243 | 244 | 245 |

246 | 247 |

Button Bar

248 |

249 | 250 | 251 | 252 | 253 | 254 | 255 |

256 | 257 | 258 | 259 | 260 | --------------------------------------------------------------------------------