A Material-UI starting point for Meteor/React apps. (Fork of TheMeteorChef's Base)
TODO | COMPARISON | Examples | ORIGINAL Base Docs |
---|
Base-Material-UI | v0.0.3 |
---|---|
Base Version | v4.5.0 |
Meteor Version | v1.4.2 |
Same as the regular base project. See https://themeteorchef.com/base/getting-started/
- added material-ui with
meteor npm install material-ui
- added
formsy-react
andformsy-react-material-ui
- added
react-tap-event-plugin
withmeteor npm install --save react-tap-event-plugin
- uses formsy instead of jquery and jquery validation
If you haven't seen Meteor 1.3's recommended application structure yet you may be wondering where the actual code is.
Most of the app is in the imports
folder. The UI is found in imports/ui
. The API (methods, publications, schemas) can be found in imports/api
- [How to Do a FAB in the corner] (http://stackoverflow.com/questions/35828991/make-material-ui-reactjs-floatingactionbutton-float)
- [AirBnB Style Guide for React] (https://github.com/airbnb/javascript/tree/master/react)
- [MaterialUp curates the best of Material Design, daily.] (http://www.materialup.com/)
- [Material Palette] (https://www.materialpalette.com/)
- where applicable, use this.context.muiTheme to reference the global theme object. See here
- Re-add re-routing logic (login, reset, etc. etc.)
- it would be cool to tie bert-alert color schemes into the material-ui color scheme
- where it makes sense, extract inline-js css styles to the .scss files
- Keep an eye out for new version of Material-UI... errors since react updated (https://facebook.github.io/react/warnings/unknown-prop.html)
- improve documentation
- you have to click off the input field for formsy to validate and change the submit button from disabled... minor UI blemish.
- Consider Other Versions:
- mobx
- redux
- flux
- relay/graphql
Other version: react-material-ui-blogOther version: react-material-ui-wordpressAdd PropTypes where needed (basically, everywhere at this point.)Collapsable nav and other responsive workdecision: combine delete-dialog and update-dialog components?nodecision: flexbox grid? bootstrap grid? grid agnostic?flexboxgridAdd file for customizing the Material-UI themere-add validation for password-reset formwire up the username to be in top-right corner of authenticated navbar (was getting an odd error when trying to do this so I just hardcoded "username" there for now)