Skip to content

Noodlebox1/stacksorted

 
 

Repository files navigation

Stack Sorted.

An open-source, open-to-contribution project that categorizes websites, not by general design or topic but by specific elements.

How to contribute

You can either contribute by improving the code or adding sites to the database. Before that, make sure to read the Codes of Conduct.

Improving the code

If there's a feature you'd like to see, open an issue or send a pull request.

Adding a site

We add sites and categories mainly to database.js.

There are up to 5 properties you can specify for each site:

{
          name: "Site/Project/Design Name",
          url: "https://example.com",
          code: "link to code implementation of the design (if existing, preferrably on Codepen)",
          image: "/images/{category}-{number}.webp",
          gif: "/images/{category}-{image-number}.webp",
},

Keep in mind

  1. The name, url, and image are mandatory. code and gif are optional.
  2. You can add it if there is an existing implementation of the design on CodePen or similar sites. If you're making one yourself, you can add the link there too.
  3. You can add the images to public/images.
  4. There is a naming convention for images too: {category}-{number}.webp The number follows the last existing image number. If you're adding the first site in a category, e.g., grainy, then it'd be grainy-1.webp, followed by grainy-2.webp, and so on.
  5. A GIF is added when it's helpful to show a preview animation of the element. It must have the same number as the image followed by letter 'g', e.g., image-1g.webp. This GIF will show in the modal only.
  6. Image should perfectly capture the element (200x344).
  7. GIF should be as short as possible, only capturing the main effect/animation, so the file should not exceed 10MB.

Thank you for checking the project out!

Stack Sorted. - Find Inspiration in Design Elements. | Product Hunt

About

Find Inspiration in Design Elements.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 49.4%
  • Svelte 35.2%
  • CSS 13.2%
  • HTML 2.2%