diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f0ad926f..7c7a1b2e 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -1,11 +1,217 @@ -## Playground +# Contributing to bootsrap-material-design -Use this pen to test and develop new features of Material Design for Bootstrap: +Looking to contribute something to bootsrap-material-design? **Here's how you can help.** -http://codepen.io/FezVrasta/pen/ihmea +Please take a moment to review this document in order to make the contribution +process easy and effective for everyone involved. -It already includes every needed dependency and is based on the latest version of the theme. +Following these guidelines helps to communicate that you respect the time of +the developers managing and developing this open source project. In return, +they should reciprocate that respect in addressing your issue or assessing +patches and features. -## Grunt -**Grunt!** Ok... when you edit something please run `grunt` to compile CSS and copy stuff in the correct folders. Thanks! +## Using the issue tracker + +The [issue tracker](https://github.com/FezVrasta/bootstrap-material-design/issues) is +the preferred channel for [bug reports](#bug-reports), [features requests](#feature-requests) +and [submitting pull requests](#pull-requests), but please respect the following +restrictions: + +* Please **do not** use the issue tracker for personal support requests. Stack + Overflow ([`bootstrap-material-design`](https://stackoverflow.com/questions/tagged/bootstrap-material-design) tag) is the best place to get help. + +* Please **do not** derail or troll issues. Keep the discussion on topic and + respect the opinions of others. + +* Please **do not** open issues or pull requests regarding the code in dependencies such as: + [`Bootstrap`](https://github.com/twbs/bootstrap) (open them in their respective repositories). + + +## Issues and labels + +Our bug tracker utilizes several labels to help organize and identify issues. Here's what they represent and how we use them: + +- `bug confirmed` - Issues that have been confirmed with a reduced test case and identify a bug in Bootstrap. +- `docs & examples` - Issues for improving or updating our documentation or examples. +- `feature` - Issues asking for a new feature to be added, or an existing one to be extended or modified. New features require a minor version bump (e.g., `v3.0.0` to `v3.1.0`). +- `enhancement` - Issues for improving existing features +- `grunt` - Issues with our included JavaScript-based Gruntfile, which is used to run all our tests, concatenate and compile source files, and more. +- `help wanted` - Issues we need or would love help from the community to resolve. +- `js` - Issues stemming from our compiled or source JavaScript files. + +For a complete look at our labels, see the [project labels page](https://github.com/FezVrasta/bootstrap-material-design/labels). + + +## Bug reports + +A bug is a _demonstrable problem_ that is caused by the code in the repository. +Good bug reports are extremely helpful, so thanks! + +Guidelines for bug reports: + +0. **Validate and lint your code** — [validate your HTML](http://html5.validator.nu) + and [lint your HTML](https://github.com/twbs/bootlint) to ensure your + problem isn't caused by a simple error in your own code. + +1. **Use the GitHub issue search** — check if the issue has already been + reported. + +2. **Check if the issue has been fixed** — try to reproduce it using the + latest `master` or development branch in the repository. + +3. **Isolate the problem** — ideally create a [reduced test + case](https://css-tricks.com/reduced-test-cases/) and a live example. + [This CodePen](http://codepen.io/rosskevin/pen/VvRgrN) is a starter template. + + +A good bug report shouldn't leave others needing to chase you up for more +information. Please try to be as detailed as possible in your report. What is +your environment? What steps will reproduce the issue? What browser(s) and OS +experience the problem? Do other browsers show the bug differently? What +would you expect to be the outcome? All these details will help people to fix +any potential bugs. + +Example: + +> Short and descriptive example bug report title +> +> A summary of the issue and the browser/OS environment in which it occurs. If +> suitable, include the steps required to reproduce the bug. +> +> 1. This is the first step +> 2. This is the second step +> 3. Further steps, etc. +> +> `` - a link to the reduced test case (via the [CodePen template](http://codepen.io/rosskevin/pen/VvRgrN)) +> +> Any other information you want to share that is relevant to the issue being +> reported. This might include the lines of code that you have identified as +> causing the bug, and potential solutions (and your opinions on their +> merits). + + +## Feature requests + +Feature requests are welcome. But take a moment to find out whether your idea +fits with the scope and aims of the project and the [Google Material Design specification itself](http://www.google.com/design/spec/material-design/introduction.html). It's up to *you* to make a strong +case to convince the project's developers of the merits of this feature. Please +provide as much detail and context as possible. + + +## Pull requests + +Good pull requests—patches, improvements, new features—are a fantastic +help. They should remain focused in scope and avoid containing unrelated +commits. + +**Please ask first** before embarking on any significant pull request (e.g. +implementing features, refactoring code, porting to a different language), +otherwise you risk spending a lot of time working on something that the +project's developers might not want to merge into the project. + +Please adhere to the [coding guidelines](#code-guidelines) used throughout the +project (indentation, accurate comments, etc.) and any other requirements +(such as test coverage). + +**In general, do not edit `dist` or `sass` files +directly!** Those files are automatically generated. You should edit the +source files in [`/less/`](https://github.com/FezVrasta/bootstrap-material-design/tree/master/less) +and/or [`/scripts/`](https://github.com/FezVrasta/bootstrap-material-design/tree/master/scripts) instead. + +Similarly, when contributing to Bootstrap's documentation, you should edit the +documentation source files in +[the `/bootstrap/docs/` directory of the `master` branch](https://github.com/FezVrasta/bootstrap-material-design/tree/master/docs). +**Do not edit the `gh-pages` branch.** That branch is generated from the +documentation source files and is managed separately by the bootstrap-material-design Team. + +Adhering to the following process is the best way to get your work +included in the project: + +1. [Fork](https://help.github.com/fork-a-repo/) the project, clone your fork, + and configure the remotes: + + ```bash + # Clone your fork of the repo into the current directory + git clone https://github.com//bootstrap-material-design.git + # Navigate to the newly cloned directory + cd bootstrap + # Assign the original repo to a remote called "upstream" + git remote add upstream https://github.com/FezVrasta/bootstrap-material-design.git + ``` + +2. If you cloned a while ago, get the latest changes from upstream: + + ```bash + git checkout master + git pull upstream master + ``` + +3. Create a new topic branch (off the main project development branch) to + contain your feature, change, or fix: + + ```bash + git checkout -b + ``` + +4. Commit your changes in logical chunks with messages written in english. Please adhere to these [git commit + message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html) + or your code is unlikely be merged into the main project. Use Git's + [interactive rebase](https://help.github.com/articles/interactive-rebase) + feature to tidy up your commits before making them public. + +5. Locally merge (or rebase) the upstream development branch into your topic branch: + + ```bash + git pull [--rebase] upstream master + ``` + +6. Push your topic branch up to your fork: + + ```bash + git push origin + ``` + +7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/) + with a clear title and description against the `master` branch. + +**IMPORTANT**: By submitting a patch, you agree to allow the project owners to +license your work under the terms of the [MIT License](LICENSE) (if it +includes code changes) and under the terms of the +[Creative Commons Attribution 3.0 Unported License](docs/LICENSE) +(if it includes documentation changes). + + +## Code guidelines + +### HTML + +[Adhere to the Code Guide.](http://codeguide.co/#html) + +- Use tags and elements appropriate for an HTML5 doctype (e.g., self-closing tags). +- Use CDNs and HTTPS for third-party JS when possible. We don't use protocol-relative URLs in this case because they break when viewing the page locally via `file://`. +- Use [WAI-ARIA](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA) attributes in documentation examples to promote accessibility. + +### CSS + +[Adhere to the Code Guide.](http://codeguide.co/#css) + +- When feasible, default color palettes should comply with [WCAG color contrast guidelines](http://www.w3.org/TR/WCAG20/#visual-audio-contrast). +- Except in rare cases, don't remove default `:focus` styles (via e.g. `outline: none;`) without providing alternative styles. See [this A11Y Project post](http://a11yproject.com/posts/never-remove-css-outlines/) for more details. + +### JS + +- No semicolons (in client-side JS) +- 2 spaces (no tabs) +- strict mode +- "Attractive" + +### Checking coding style + +Run `grunt build` before committing to ensure your changes follow our coding standards. + + +## License + +By contributing your code, you agree to license your contribution under the [MIT License](LICENSE). +By contributing to the documentation, you agree to license your contribution under the [Creative Commons Attribution 3.0 Unported License](docs/LICENSE). diff --git a/README.md b/README.md index 49f3106a..8d8a7c68 100644 --- a/README.md +++ b/README.md @@ -33,7 +33,7 @@ You need to copy the `dist/` folder to the root of your project, ensuring that a ### material-fullpalette.css or material.css? -The only difference is that `material-fullpalette.css` has the full colors palette available, the other one has just the primary colors. +The only difference is that `material-fullpalette.css` has the full colors palette available (large file), the other one has just the primary colors (small file). ### Use custom color as primary @@ -50,33 +50,33 @@ You can do it by creating a less file in your project: Then, compiling this file, the entire theme will be compiled using the color chosen by you. -## Development +## Support -We are using Grunt to automate the workflow and build process. Ensure you have nodejs installed and grunt-cli installed globally. -After cloning the repo, run `npm install` to ensure you have all dev dependencies. - -Run the `grunt build` command to run the tests and compile the less/sass. See [Gruntfile.js](Gruntfile.js) for details on targets. - -Run the `grunt test` command for browser-based Jasmine unit tests. - -Run the `grunt serve` command to build and fire up an http server with live-reload and a watch for development purposes. - -## LESS & SASS - -The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS. - -The upcoming 4.x version (no branch yet) will be developed using SASS. - -## Support me - -If you like this project you may support me by donating something on Gittip, starring this repository or reporting bugs and ideas in the issue section. +If you like this project you may support it by donating via Gittip, starring this repository or reporting issues. All issues filed should be reduced to a [CodePen](http://codepen.io/rosskevin/pen/VvRgrN) test case where possible. [![gittip](demo/imgs/gittip-button.jpg)](https://www.gratipay.com/FezVrasta/) [![issues](demo/imgs/issues-button.jpg)](https://github.com/FezVrasta/bootstrap-material-design/issues) ## Contribute -Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file. +Please see the [CONTRIBUTING.md](CONTRIBUTING.md) file. + +## Development + +We are using Grunt to automate the workflow and build process. Ensure you have nodejs installed and grunt-cli installed globally. +After cloning the repo, run `npm install` to ensure you have all dev dependencies. + +### Grunt + +- `grunt build` - run the tests and compile the less/sass. See [Gruntfile.js](Gruntfile.js) for details on targets. +- `grunt test` - browser-based Jasmine unit tests. +- `grunt serve` - build and fire up an http server with live-reload and a watch for development purposes. + +### LESS & SASS + +The bootstrap 3.x compatible version (master) is developed using LESS, with an automated conversion to SASS. + +The upcoming 4.x version (no branch yet) will be developed using SASS. ## Documentation @@ -248,9 +248,9 @@ Cards will adapt to column's width. The card below will have width equal to col- ``` -## Material.js +## material.js -`Material.js` is a jQuery plugin that adds some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc. +`material.js` is a jQuery plugin that adds some magic to your markup and allows Material Design for Bootstrap to style some elements like inputs, checkboxes, radios etc. ### Functions @@ -260,7 +260,7 @@ Cards will adapt to column's width. The card below will have width equal to col- * `$.material.checkbox():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the [Inputs section](#inputs). * `$.material.radio():` will enable the MD style to the checkboxes (remember to follow the markup guidelines explained in the Inputs section. -### Apply Material.js only to specific elements +### Apply only to specific elements Every function expects an optional value that will be used as a selector for the function; for example, `$.material.ripples("#selector, #foobar")` will apply Ripples.js only to `#selector` and `#foobar`. @@ -279,7 +279,7 @@ $.material.options = { ### Arrive.js support -If you need to dynamically add elements to your DOM then you may need to include `Arrive.js` before `Material.js`. This will automatically apply `Material.js` to every new element added via JavaScript. +If you need to dynamically add elements to your DOM then you may need to include `Arrive.js` before `Material.js`. This will automatically apply `material.js` to every new element added via JavaScript. ## Plugins @@ -323,3 +323,7 @@ Read more about [Bootstrap Material Datepicker](https://github.com/T00rk/bootstr ## Compatibility Currently, Material Design for Bootstrap supports Google Chrome (tested v37+), Mozilla Firefox (tested 30+), and Internet Explorer (tested 11+). Mobile browsers are not currently tested but they may work. + + +## License +[MIT License](LICENSE)