Pitch – CSS Components and Tweaks for Your Project Pages
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
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.
Note
Requirement
- Custom CSS access on your itch.io account.
- Contactitch.io support to request the CSS access. Please read theCSS Customization Guide first before proceeding.
- 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. ClickCopy 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.
Once you edit your page's content in HTML mode, Its best to keep using HTML mode onward to avoid messing up the layout.
Important Note
(Some) components are not compatible with profile pages and/or jam pages.
Limitations
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 theitch app before publishing it.
License
The Pitch web app is licensed underMIT license .
The CSS components are licensed underCC0 .
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 theGitHub Issues page.
| Updated | 6 days ago |
| Status | Released |
| Category | Tool |
| Platforms | HTML5 |
| Rating | Rated 5.0 out of 5 stars (9 total ratings) |
| Author | nnda |
| Tags | css,design,framework,html,Open Source,page,sourcecode,Project template |
| Code license | MIT License |
| Asset license | Creative Commons Zero v1.0 Universal |
| Links | Source code,Ko-fi |
Development log
Comments
Log in with itch.io to leave a comment.
Thank you for the comments!
For the main projects section, I usedGrid layout, and for the collections, I usedList layout in the page’s theme editor.
As for the two-column layout of the collections, that was done through this custom CSS:
@media (min-width: 780px) { /* Split collections row into two-column layout on desktop */ .collections { display: grid; grid-template-columns: 50% 50%; padding: 2em 0 !important; } .collections .inner_column { height: 100%; display: flex; flex-direction: column; } /* Fade out gradient */ .collection_row { position: relative; overflow: hidden; margin: 0 0.8em; } .collection_row::before { content: ""; position: absolute; bottom: 0; box-shadow: inset -13em 0 9em -2em #0f1116; /* Match the background color */ pointer-events: none; width: 100%; height: 76%; z-index: 2; } .collection_row:first-child { padding-left: 1.2em; } .collection_row:last-child { padding-right: 1.2em; }}Glad it helped! :)
Yea, for my profile page’s CSS, you’d have to build the CSS from the repo first. I’ve put theinstallation section for that in the readme. Its quite a mess of a system, because I want to save characters count. itch.io limits profile page’s CSS to 5120 characters for some reason :/
And yep, you need your itch.io’s username, instead of the display name for the Author Badge.
Thank you for the comments!
I’ve been a little hesitant on adding hover effects or animation-related stuff. Since I’m aiming more on CSS stuff for the page’s content.
But I do plan on adding more decorations, including animation-related tweaks.
And if or when there’s the components/tweaks like you’ve described, it’ll probably be under the ‘Decorations’ or ‘Tweaks’ section/category :)
Hi, the buttons are actually just radio-type<input> elements. I don’t think you can insert it in project pages directly, since input/form elements will be sanitized.
The project isopen source. Here’s the snippet of the codes that makes the buttons if you’re interested:
Script:https://github.com/nndda/Pitch/blob/80ac0c31949f5ef281493bcbb7d416ca868be869/src/app/scripts/themes.ts#L61C1-L74C7
Styling:https://github.com/nndda/Pitch/blob/80ac0c31949f5ef281493bcbb7d416ca868be869/src/app/styles/_input.scss#L107C1-L140C2
thats not a part of the css components actually 😅but heres the html & css source code for thosehttps://gist.github.com/nndda/63ff54c575dbb9e9f6158dc8a446c0db
