milligram/.github/contributing.md

93 lines
4.1 KiB
Markdown
Raw Normal View History

2016-01-31 03:46:05 +00:00
# Contributing
2016-01-08 05:57:00 +00:00
2016-01-31 03:46:05 +00:00
We would love for you to contribute to Milligram and help us make this even better! Start reading this document to see it is not difficult as you might have imagined.
2016-01-08 05:57:00 +00:00
2016-01-31 03:46:05 +00:00
## Table of Contents
2016-01-08 05:57:00 +00:00
2016-01-31 03:46:05 +00:00
- [Open an Issue](#open-an-issue)
- [Submit a Pull Request](#submit-a-pull-request)
- [Building](#building)
- [Style Guide](#style-guide)
- [Test](#test)
2016-01-31 03:46:05 +00:00
- [Code of Conduct](#code-of-conduct)
- [License](#license)
2016-01-08 05:57:00 +00:00
2016-01-31 03:46:05 +00:00
## Open an Issue
2016-01-08 05:57:00 +00:00
2018-02-16 05:01:21 +00:00
[Open an Issue](../../../issues/new) to report any problems or improvements. When necessary, use [Codepen](http://codepen.io/) to show the problem. Be sure to include some description to explain the problem.
2016-01-08 05:57:00 +00:00
2016-01-31 03:46:05 +00:00
## Submit a Pull Request
2016-01-06 05:18:47 +00:00
2016-01-31 03:46:05 +00:00
To submit a new feature, make sure that changes are done to the source code. [Follow our style guide](#style-guide) and do not forget the tests and attach the link [Codepen](http://codepen.io/) along with the description.
2016-01-06 05:18:47 +00:00
2016-01-31 03:46:05 +00:00
Try to solve a problem for each pull request, this increases the chances of acceptance. When in doubt, open a [new issue](#open-an-issue) so we can answer you. Look existing issues for ideas or to see if a similar issue has already been submitted.
1. Fork the Github repo: `git clone https://github.com/milligram/milligram.git`
1. Create a new branch: `git checkout -b issuenumber-feature-name`
1. Commit your changes: `git commit -m 'issuenumber-feature-name'`
1. Push to the branch: `git push origin my-feature-name`
1. Submit a pull request!
2020-05-15 01:43:26 +00:00
You can do all of this from your browser using Gitpod, the free online dev environment.
2019-10-31 05:53:44 +00:00
[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/milligram/milligram)
2020-05-15 04:20:35 +00:00
_Note: For issues relating to the site, please use the [milligram.github.io](https://github.com/milligram/milligram.github.io)_
2016-01-31 03:46:05 +00:00
## Building
First install [Node.js](https://nodejs.org/en/download/) for the build process. Now install all the dependencies, run `npm install` from the project directory. Once you have the dependencies installed, run `npm start`. This will run the build task which compiles the Sass files into Milligram.css file in the expanded and compressed version.
2016-01-31 03:46:05 +00:00
## Style Guide
Milligram use [Sass](http://sass-lang.com/) to give super powers to CSS. Look at how the code is being maintained, we must always be consistent. We try to follow best practices as much as possible. In addition, here are some tips you should follow:
- Properties and selectors are sorted in alphabetical order
- Always use tab to indentation, no spaces
- Always use single quote, i.e. `content: ''`
- Quote attribute values in selectors, i.e. `input[type='checkbox']`
- Avoid specifying units for zero-values, i.e. `margin: 0`
- Use `rem` unit instead of `px`
- Use lowercase and shorthand hex values, i.e. `#fff`
- Use one discrete selector per line in multi-selector rulesets
- Include a single space after colon and after each comma
- Separate each ruleset by a blank line
- Don't use prefixes, there is a task to generate this automatically
```sass
.selector-a,
.selector-b,
.selector-c,
.selector-d[type='text']
box-sizing: border-box
color: #333
content: ''
display: inline-block
font-family: 'Helvetica-Neue', 'Helvetica', 'Arial', sans-serif
2016-01-31 03:46:05 +00:00
margin-bottom: 0
margin-left: 5.0rem
2016-01-31 03:46:05 +00:00
.other-selector-a
background: #fff
2016-01-31 03:46:05 +00:00
.other-selector-b
background: #fff
2016-01-31 03:46:05 +00:00
&.increasing-the-specificity
color: #000
2016-01-31 03:46:05 +00:00
```
2020-05-15 04:20:35 +00:00
_Note: This style guide was inspired by [Idiomatic.css](https://github.com/necolas/idiomatic-css). Milligram uses an `.editorconfig` file, which most editors support, to enforce these coding standards._
2016-01-31 03:46:05 +00:00
## Test
Breaking CSS is easy. Checking every responsive page element is hard. That's why Milligram uses automated visual regression testing for responsive web UI by comparing DOM screenshots at various viewport sizes. To view the comparison run `npm test` after making changes to the source code.
## Code of Conduct
2016-01-31 03:46:05 +00:00
Help us keep Milligram open and inclusive. Please read and follow our thoughts on [Code of Conduct](http://confcodeofconduct.com/).
## License
2018-02-16 05:01:21 +00:00
By contributing your code, you agree to license your contribution under the [MIT license](../license).