CSS Snippets

CSS Snippets - Contribution Guide

Use this snippet template to write a new snippet.

• Snippet filenames must correspond to the title of the snippet. For example, if your snippet is titled ### Awesome snippet the filename should be awesome-snippet.md.
  • Use kebab-case, not camelCase or snake_case.
• 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 ### and be at the very first line of your snippet.
  • 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.
  • Follow snippet descriptions with an empty line.
• Snippet HTML code must be enclosed inside ```html and ```.
  • Remember to start your snippet's code on a new line below the opening backticks.
  • Please use Plain HTML/HTML5 markup, do not use any templating languages.
• Snippet CSS code must be enclosed inside ```css and ```.
  • Remember to start your snippet's code on a new line below the opening backticks.
  • Please use Vanilla CSS, do not use any css preprocessors.
  • Try to keep your snippets' code short and to the point. Use modern techniques and features. Make sure to test your code before submitting.
• Demo section
  • All snippets must have a Demo section (### Demo). Leave an empty line after the demo title as this part will be automatically generated inside the extension.
• Explanation section
  • All snippets should have an explanation of the used features.
• Snippets should be short. If your snippet is a 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 can be abstract enough to be applied to different scenarios.
• Snippets can showcase creative efforts as long as something useful in real-world problems can be learned from them.