Skip to content

Latest commit

 

History

History
79 lines (57 loc) · 4.03 KB

README.md

File metadata and controls

79 lines (57 loc) · 4.03 KB
Raw

Cool Animated Components 😎

Create animated components using HTML, CSS, JS and get them featured here

Latest Announcements 📢

🔴 As we have a lot of people willing to contribute and fewer issues, please make sure you work on the task assigned to you within 5 days (or inform the maintainers that you are still working on it, by commenting on the issue itself)

🔴 If we do not receive any updates from your end then we will have to assign the task to another willing contributor.

🔴 If you come across an issue that has been open for a while but has no updates from the assigned person, you may comment on it to get assigned to the issue.

🔴 Issues which have the unassigned label can be worked on. You can comment on thees issues and get assigned to them.

🔴 Some issues can be worked upon by multiple people so if you see the unassigned label there you may comment on it

Contribution Guidelines

  • Create a new folder with the name of your component
    eg. If you are creating a Navbar Component then name your folder Navbar

  • Add the html, css, js files in that folder (Don't add your component code to the index.html)
    eg. If you are creating a Navbar then name your files Navbar.html, Navbar.js, Navbar.css

  • Link the html file of your component to the link on the card created at index.html file.

  • Create a new card for every new component that you make.

  • Please take a look at the sample component to understand the folder structure better.

  • You can contribute to as many components as you like. You can add cool animated components of your own by creating an issue!

    NOTE: Please do NOT create a pull request unless the issue has been assigned to you else the pull request will be marked invalid

Folder Structure

  1. Create a new folder with the name of your component
  2. Add your files to your newly created folder with the proper naming convention as specified above
  3. In the index.html file add a comment stating your component name
  4. Below the comment create a new card. The code for the card is as below: 
<!--     Sample Component (Replace the name with your component name  -->

      <div class="card">
        <div class="box">
          <div class="content">
            <h2>Add your component number (Ex : 13)</h2>
            <h3>Name of your component</h3>
            <p>
              Describe your component in 12-15 words.
            </p>
            <a
              href="/animated-components/YOUR-FOLDER-NAME/YOUR-HTML-FILE.html"
              target="_blank"
              >Live Demo</a>
          </div>
        </div>
      </div>
  1. Make sure you add the above code to the main index.html file present in the root and NOT YOUR newly created html file.
  2. Please make sure you add the correct href to the card component. Use the format given below. 
 href="/animated-components/YOUR-FOLDER-NAME/YOUR-HTML-FILE.html"
  1. Describe your components in not more than 12-15 words.You may look at previous cards descriptions to get an idea on how it is supposed to be written. Place your description in the following

    tag

<p>Describe your component in 12-15 words.</p>

How to Contribute?

  • Take a look at the existing issues or create your own Issues
  • Wait for the issue to be assigned to you after which you can start working on it.
  • Fork the Repository and create a branch for the issue you are working on.
  • Read the Code of Conduct
  • Create a Pull Request which will be reviewed by the maintainers and suggestions would be added to improve it (if needed)
  • Describe what your codeblock / function does in the PR.
  • Having difficulty in contributing? Read the Contribution Guide for a detailed explanation.