Permalink
Browse files

Build: Modularize build and add jsass-vars

Closes gh-89
  • Loading branch information...
arschmitz committed Jun 16, 2015
1 parent 17fa2a8 commit c5bd4f7ec88e4d51ef0cbc993a50b6f3f20c9ce4
View
@@ -6,6 +6,7 @@ style.css
# Folders
bower_components/
node_modules/
+external/
icons/svg-min/
.sass-cache/
dist/
View
@@ -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
+} );
};
View
@@ -2,7 +2,7 @@
"name": "css-chassis",
"title": "Chassis",
"description": "An attempt at creating open standards designed for CSS libraries, JavaScript UI libraries, and web developers in general",
- "version": "0.0.1-pre",
+ "version": "0.0.1",
"author": {
"name": "jQuery Foundation and other contributors",
"url": "https://github.com/jquery/css-chassis/blob/master/AUTHORS.txt"
@@ -40,15 +40,12 @@
"start": "grunt watch",
"test": "grunt"
},
- "dependencies": {
- "normalize.css": "3.0.3"
- },
+ "dependencies": {},
"devDependencies": {
"browser-perf": "1.2.3",
"chromedriver": "2.13.0",
"commitplease": "2.0.0",
"ejs-template": "0.1.0",
- "glob": "4.4.2",
"grunt": "0.4.5",
"grunt-autoprefixer": "2.1.0",
"grunt-contrib-cssmin": "0.10.0",
@@ -59,14 +56,13 @@
"grunt-csscomb": "3.0.0",
"grunt-git-authors": "2.0.0",
"grunt-html": "1.6.0",
- "grunt-htmllint": "0.2.7",
"grunt-jscs": "0.6.2",
- "grunt-npmcopy": "0.1.0",
- "grunt-sass": "0.18.1",
+ "grunt-sass": "0.17.0",
"grunt-selenium-server": "0.1.2",
"grunt-svgmin": "2.0.0",
"grunt-svgstore": "0.5.0",
- "load-grunt-tasks": "3.1.0",
+ "jsass-vars": "0.0.3",
+ "load-grunt-config": "0.16.0",
"perfjankie": "1.2.2"
},
"keywords": []
@@ -27,7 +27,7 @@ module.exports = {
],
icon: [
false,
- "asterisk",
+ "astrisk",

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jul 22, 2015

Contributor

@arschmitz You seem to have introduced a typo here

@cvrebert

cvrebert Jul 22, 2015

Contributor

@arschmitz You seem to have introduced a typo here

"plus",
"minus",
"euro",
@@ -1,5 +0,0 @@
-/*
-* ==========================================================================
-* Colors
-* ==========================================================================
-*/
@@ -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);
}
@@ -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;
@@ -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;
View
@@ -1,10 +1,13 @@
-/*
-* ==========================================================================
-* CSS Chassis
-* ==========================================================================
-* This just adds normalize to the build see lint.scss for explanation.
-*/
+// ==========================================================================
+// CSS Chassis
+// ==========================================================================
@import
- "external/normalize.css/normalize.scss",
- "lint.scss";
+ "_utilities/clearfix";
+
+@import
+ "atoms/icons/icons",
+ "atoms/typography/typography";
+
+@import
+ "views/main";
View
@@ -0,0 +1,13 @@
+// This is just boiuler plate dont worry about it

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jul 22, 2015

Contributor

"boilerplate"

@cvrebert

cvrebert Jul 22, 2015

Contributor

"boilerplate"

+// This just supports loading in any enviroment

This comment has been minimized.

Show comment
Hide comment
@cvrebert

cvrebert Jul 22, 2015

Contributor

"environment"

@cvrebert

cvrebert Jul 22, 2015

Contributor

"environment"

+(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 {};
+} ) );
Oops, something went wrong.

1 comment on commit c5bd4f7

@arthurvr

This comment has been minimized.

Show comment
Hide comment
@arthurvr

arthurvr Jul 22, 2015

Member

Seems like this commit broke CI.

Member

arthurvr commented on c5bd4f7 Jul 22, 2015

Seems like this commit broke CI.

Please sign in to comment.