mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2025-07-06 21:03:12 +03:00
added development info page
parent
6aba5c661f
commit
ea368e94ef
54
development.md
Normal file
54
development.md
Normal file
|
@ -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.
|
Loading…
Reference in New Issue
Block a user