diff --git a/development.md b/development.md new file mode 100644 index 0000000..5301cf5 --- /dev/null +++ b/development.md @@ -0,0 +1,54 @@ +# Development + +Material Design for Bootstrap ("MDB") is developed with mainly two languages: LESS and JavaScript. + +Source files are in the `less/` and `scripts/` directories, the first contains the source of the LESS files and the second one contains the JavaScript source files. + +MDB uses `material.css` as stylesheet, `material-wfont.css` is the same file, but with the Google Web fonts included for Roboto. +`material.js`, instead, is used to add some extra markup and some jQuery events used to add animations to the elements. + +## LESS + +LESS is the CSS pre-processor we use to write the style of the theme, it then compiles to CSS thanks to our __Grunt__ tasks. + +When you edit files related to the theme (`less/`) you will want to compile them running: + +````sh +grunt material:less +```` + +It will compile LESS files into CSS inside the `dist/css/` folder and will create maps for them, along with minified versions of them with their maps. +Every map refers directly to the LESS source to help the development. + +The ripple effect has its own dedicated LESS file which compiles in `ripples.css`. To compile it use: + +````sh +grunt ripples:less +```` + +It will compile LESS to CSS inside the `dist/css/` folder and will create its source maps. It will even minify the CSS and will create the source map for it. +Every map refers directly to the LESS source to help development. + +## JavaScript + +This project, unfortunately, needs JavaScript to make some element work. We try to use CSS only solution every time is possible but, sometimes, JavaScript is needed. + +The main file is `material.js`, inside the `scripts/` folder. To compile it use: + +````sh +grunt material:js +```` + +It will copy the script inside `dist/js/` folder and will minify it creating the minified script and its source map. + +The other script is `ripples.js` and is an awesome piece of jQuery which adds the ripples effect to every _not\_self\_closing\_element_. + +To compile it and generate minified versions and source maps run: + +````sh +grunt ripples:js +```` +## SASS + +Currently only LESS is maintained. The SASS version no longer has a maintainer (#256). +The SASS files are in the source just in case someone wants to update the source from SASS and use these files as a base.