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 with snippets and tests that you have created (see below for guidelines).
- Open issues for things you want to see added or modified.
- Be part of the discussion by helping out with existing 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.
- 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 beawesomeSnippet.md
.- Use
camelCase
orkebab-case
, notsnake_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).
- Use
- 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 (
begginer
,intermediate
oradvanced
), 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.
- All snippet titles must be prefixed with
- 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.
- 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.
- Use the
- 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 to format your snippets.