Permalink
Browse files

Add css extensions concept, added contributing section to Readme base…

…d on statements from @mseemann
  • Loading branch information...
1 parent 6c07324 commit e6304026dffaf76ece36555db7d2649f4d2e6862 @paullryan paullryan committed with Sep 25, 2016
Showing with 25 additions and 9,158 deletions.
  1. +1 −1 .codeclimate.yml
  2. +20 −6 README.md
  3. +1 −1 angular-cli-build.js
  4. +3 −4 dev-scripts/generate-scss-from-mdl-scss.js
  5. +0 −599 src/scss-mdl/_color-definitions.scss
  6. +0 −19 src/scss-mdl/_functions.scss
  7. +0 −301 src/scss-mdl/_mixins.scss
  8. +0 −594 src/scss-mdl/_variables.scss
  9. +0 −34 src/scss-mdl/animation/_animation.scss
  10. +0 −72 src/scss-mdl/badge/_badge.scss
  11. +0 −305 src/scss-mdl/button/_button.scss
  12. +0 −111 src/scss-mdl/card/_card.scss
  13. +0 −182 src/scss-mdl/checkbox/_checkbox.scss
  14. +0 −88 src/scss-mdl/chip/_chip.scss
  15. +0 −120 src/scss-mdl/data-table/_data-table.scss
  16. +0 −57 src/scss-mdl/dialog/_dialog.scss
  17. +0 −321 src/scss-mdl/footer/_mega_footer.scss
  18. +0 −88 src/scss-mdl/footer/_mini_footer.scss
  19. +0 −231 src/scss-mdl/grid/_grid.scss
  20. +0 −121 src/scss-mdl/icon-toggle/_icon-toggle.scss
  21. +0 −662 src/scss-mdl/layout/_layout.scss
  22. +0 −157 src/scss-mdl/list/_list.scss
  23. +0 −21 src/scss-mdl/material-design-lite-grid.scss
  24. +0 −54 src/scss-mdl/material-design-lite.scss
  25. +0 −200 src/scss-mdl/menu/_menu.scss
  26. +0 −2,303 src/scss-mdl/palette/_palette.scss
  27. +0 −121 src/scss-mdl/progress/_progress.scss
  28. +0 −160 src/scss-mdl/radio/_radio.scss
  29. +0 −289 src/scss-mdl/resets/_h5bp.scss
  30. +0 −25 src/scss-mdl/resets/_mobile.scss
  31. +0 −55 src/scss-mdl/resets/_resets.scss
  32. +0 −42 src/scss-mdl/ripple/_ripple.scss
  33. +0 −46 src/scss-mdl/shadow/_shadow.scss
  34. +0 −397 src/scss-mdl/slider/_slider.scss
  35. +0 −89 src/scss-mdl/snackbar/_snackbar.scss
  36. +0 −248 src/scss-mdl/spinner/_spinner.scss
  37. +0 −101 src/scss-mdl/styleguide.scss
  38. +0 −203 src/scss-mdl/switch/_switch.scss
  39. +0 −120 src/scss-mdl/tabs/_tabs.scss
  40. +0 −21 src/scss-mdl/template.scss
  41. +0 −223 src/scss-mdl/textfield/_textfield.scss
  42. +0 −65 src/scss-mdl/tooltip/_tooltip.scss
  43. +0 −301 src/scss-mdl/typography/_typography.scss
View
@@ -27,7 +27,7 @@ exclude_paths:
- dev-scripts
- scripts
- src/app
-- src/scss-mdl
+- src/scss
- typings
- angular-cli.json
- angular-cli-build.js
View
@@ -27,7 +27,7 @@ Do not take a red flag to serious. Most of the time this is a sauce lab issue an
### Status of the npm package version 1.8 (mdl version 1.2.1; angular 2.0 final)
- Badges
-- Buttons
+- Buttons
- Cards
- Chips
- Dialogs
@@ -71,7 +71,7 @@ export class Angular2MdlAppModule {
}
```
-There are still a lot of bugs in angular2 rc5. For example: https://github.com/angular/angular/issues/10618.
+There are still a lot of bugs in angular2 rc5. For example: https://github.com/angular/angular/issues/10618.
This means that prod builds are broken. You need to disable some minification options. See the comments in the mentioned ticket.
### Installation
@@ -92,7 +92,7 @@ Just use it. Add the MdlModule to your NgModule imports and you are done!
### How to use the mdl components with the angular cli system js version
-You need to extend the `angular-cli-build.js` file to include `angular2-mdl` as a vendor package:
+You need to extend the `angular-cli-build.js` file to include `angular2-mdl` as a vendor package:
```JavaScript
return new Angular2App(defaults, {
@@ -139,7 +139,7 @@ You may include the material-deisgn-lite css in your html and you're done!
Under https://getmdl.io/customize/index.html you'll find a customizing tool to change the theme colors.
### How to use the scss files from material-design-lite
-But there is also another way. This package includes the scss files from material-design-lite.
+But there is also another way. This package includes the scss files from material-design-lite.
With these files you are able to change the colors and other variables in your own scss files:
First of all you need to install node-sass for your project:
@@ -148,15 +148,15 @@ First of all you need to install node-sass for your project:
npm install node-sass --save-dev
```
-After that you need to configure the sass compiler to use the sass files from the angular2-mdl package.
+After that you need to configure the sass compiler to use the sass files from the angular2-mdl package.
For that the file `angular-cli-build.js` needs to be extended:
```JavaScript
return new Angular2App(defaults, {
sassCompiler: {
includePaths: [
- `${__dirname}/node_modules/angular2-mdl/src/scss-mdl`
+ `${__dirname}/node_modules/angular2-mdl/src/scss`
]
},
vendorNpmFiles: [
@@ -181,3 +181,17 @@ $color-accent-contrast: $color-dark-contrast;
[comment]: <> (in angular-cli/lib/broccoli/angular-broccoli-bundle.js set { minify: true, mangle: false })
+
+
+# Contributing
+
+*The contributing section is a work in progress, please be aware that changes are still being suggested and your PR may need to go through a couple revisions prior to acceptance*
+
+* This package should only provide what is provided by material design lite so far (to keep it clean, maintainable and predictable what is included)
+* Any extensions need to be things that the packaging of mdl into @angular makes it very hard to extend (to be reviewed and accepted/rejected based on merit by the owners of this repository).
+
+## SCSS
+
+* This package must work with the CSS from [the CDN](https://code.getmdl.io/1.2.1/material.indigo-pink.min.css)
+ * We pull the source directly with a script into app/scss/mdl
+ * All extensions must exist outside of the mdl directory or they will be overwritten the next time we pull from mdl
@@ -39,7 +39,7 @@ module.exports = function(defaults) {
tsCompiler: {},
sassCompiler: {
includePaths: [
- 'src/scss-mdl'
+ 'src/scss'
]
},
vendorNpmFiles: [
@@ -1,7 +1,7 @@
#!/usr/bin/env node
'use strict';
-// extract scss files and put them into scss-mdl folder. Run: npm run generate-scss-from-mdl-scss
+// extract scss files and put them into scss/mdl folder. Run: npm run generate-scss-from-mdl-scss
const fs = require('fs');
const path = require('path');
@@ -10,10 +10,10 @@ const ncp = require('ncp').ncp;
var basePath = process.cwd();
var source = path.resolve(basePath, 'node_modules/material-design-lite/src');
-var dest = path.resolve(basePath, 'src/scss-mdl');
+var dest = path.resolve(basePath, 'src/scss/mdl');
-fs.mkdirSync('src/scss-mdl');
+fs.mkdirSync('src/scss/mdl');
ncp(source, dest, {filter: function(fileName){
if(fileName.endsWith('snippets')){
@@ -29,4 +29,3 @@ ncp(source, dest, {filter: function(fileName){
}
console.log('done!');
});
-
Oops, something went wrong.

0 comments on commit e630402

Please sign in to comment.