44 lines
4.0 KiB
Markdown
44 lines
4.0 KiB
Markdown
# Contribution guidelines
|
|
|
|
**30 seconds of CSS** is a community effort, so feel free to contribute in any way you can. Every contribution helps!
|
|
|
|
Here's what you can do to help:
|
|
|
|
- Submit [pull requests](https://github.com/30-seconds/30-seconds-of-css/pulls) with snippets and tests that you have created (see below for guidelines).
|
|
- [Open issues](https://github.com/30-seconds/30-seconds-of-css/issues/new) for things you want to see added or modified.
|
|
- Be part of the discussion by helping out with [existing issues](https://github.com/30-seconds/30-seconds-of-css/issues).
|
|
- Tag uncategorized snippets by adding the appropriate in the snippet's frontmatter in `tags`.
|
|
- Fix typos in existing snippets, improve snippet descriptions and explanations or provide better examples.
|
|
|
|
### Snippet submission and Pull request guidelines
|
|
|
|
- **DO NOT MODIFY THE README.md FILE!** Make changes to individual snippet files. **Travis CI** will automatically build the `README.md` file when your pull request is merged.
|
|
- **Snippet filenames** must correspond to the title of the snippet. For example, if your snippet is titled `awesomeSnippet` the filename should be `awesomeSnippet.md`.
|
|
- Use `camelCase` or `kebab-case`, not `snake_case`.
|
|
- Avoid capitalization of words, except if the whole word is capitalized (e.g. `URL` should be capitalized in the filename and the snippet title).
|
|
- **Snippet metadata** must be included in all snippets in the form of frontmatter.
|
|
- All snippets must contain a title.
|
|
- All snippets must contain tags, prefixed with `tags:` and separated by commas (optional spaces in-between).
|
|
- Make sure the first tag in your snippet's tags is one of the main categories, as seen in the `README.md` file or the website.
|
|
- Snippet tags must include a difficulty setting (`beginner`, `intermediate` or `advanced`), preferrably at the end of the list.
|
|
- **Snippet titles** should be the same as the name of the function that is present in the snippet.
|
|
- All snippet titles must be prefixed with `title:` and be at the very first line of your snippet's frontmatter.
|
|
- Snippet titles must be unique (although if you cannot find a better title, just add some placeholder at the end of the filename and title and we will figure it out).
|
|
- Follow snippet titles with an empty line.
|
|
- **Snippet descriptions** must be short and to the point. Try to explain _what_ the snippet does and _how_ the snippet works and what Javascript features are used. Remember to include what functions you are using and why.
|
|
- Follow snippet descriptions with an empty line.
|
|
- **Snippet code** must be enclosed inside ` ```html `, ` ```css ` or ` ```js ` and ` ``` `.
|
|
- Remember to start your snippet's code on a new line below the opening backticks.
|
|
- Please use Javascript [Semi-Standard Style](https://github.com/Flet/semistandard).
|
|
- Try to keep your snippet's code short and to the point. Use modern techniques and features. Make sure to test your code before submitting.
|
|
- Try to make your snippet's name unique, so that it does not conflict with existing snippets.
|
|
- **Snippet explanations** should be written as lists of points, describing the implemented functionality.
|
|
- Use unordered lists if you have a few points, otherwise use an ordered list.
|
|
- If you have JavaScript functionality in your snippet, it might be worthwhile separating the explanation with it, by adding a new list or a horizontal line break (`---`).
|
|
- **Snippet browser support** should be specified as a list of links to https://www.caniuse.com/ features.
|
|
- Use the `#` next to the feature that you want in the website to get a link to it.
|
|
- Snippets should be short. If your snippet is long, you can still submit it, and we can help you shorten it or figure out ways to improve it.
|
|
- Snippets _should_ solve real-world problems, no matter how simple.
|
|
- Snippets _should_ be abstract enough to be applied to different scenarios.
|
|
- You can start creating a new snippet, by using the [snippet template](snippet-template.md) to format your snippets.
|