Spice up and level up your page! Pitch is a small collection of CSS components and tweaks designed specifically for itch.io project pages.


Getting Started

  Note

This is a detailed walkthrough on how to use the app. You can skip this and start using the app, as it already has a built-in tutorial.

Requirement

  • Custom CSS access on your itch.io account.
  • A little bit of HTML and CSS know-how.

Using the app & the components

Pick components of your choice on the sidebar. Click on its name to see the live preview of it, and tick the checkbox to add it to your collection. Click Copy CSS button, the CSS codes of the components of your selection should be copied to your clipboard.

If you're unable to copy it from the button, copy it from the 'CSS OUTPUT' container on the left instead.

Paste the copied CSS codes to your page's custom CSS field, and save it. Its located at the bottom of the theme editor sidebar.

Go to your project's edit page. Edit the content/description in HTML mode. Follow the use example for each components. Copy-paste the sample codes provided in the component's live preview for a quick start.

  Important Note

Once you edit your page's content in HTML mode, Its best to keep using HTML mode onward to avoid messing up the layout.

  Limitations

(Some) components are not compatible with profile pages and/or jam pages.


  Best Practices & Tips

  • Always back up and save your HTML codes to a file, everytime you make changes.
  • Use external code editor, like Sublime Text or Visual Studio Code to get the advantages like syntax highlighting, autocompletion, etc.
  • Test your project's page against multiple screen sizes, and on multiple browsers, including the itch app before publishing it.

License

  The Pitch web app is licensed under MIT license .
  The CSS components are licensed under CC0 .
The placeholder content in the HTML preview and/or in the image preview may be subject to different license or copyright restrictions.


Feel free to give feedback in the comments below, and report bugs in the GitHub Issues page.
Updated 24 days ago
StatusReleased
CategoryTool
PlatformsHTML5
Rating
Rated 5.0 out of 5 stars
(5 total ratings)
Authornnda
Tagscss, design, framework, html, Open Source, page, sourcecode, Project template
Code licenseMIT License
Asset licenseCreative Commons Zero v1.0 Universal
LinksSource code, Ko-fi

Development log

Comments

Log in with itch.io to leave a comment.

(+1)(-2)

Hello, I liked the idea of the program, but I want a Linux version AppImage

(+1)

This really helps a lot thank you :-)

any way to make those “Responsive layout adapts to different screen sizes “ boxes? :3

thats not a part of the css components actually 😅 but heres the html & css source code for those https://gist.github.com/nndda/63ff54c575dbb9e9f6158dc8a446c0db

awww tysm :D