mirror of
				https://github.com/mdbootstrap/mdb-ui-kit.git
				synced 2025-11-04 01:47:35 +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