I’ve created a new project on my GitHub account where I will collect both Boilerplate code for HTML Panels and other Demo extensions - it’s called PS-Panels-Boilerplate. I’ve started with a revised version of my Topcoat CSS integration post. The code is now better because it doesn’t rely on the usual two version of topcoat:
- topcoat-desktop-light.css
- topcoat-desktop-dark.css
Instead, I’ve tweaked the original .styl and the Grunt.js files - and following Garth Braithwaite’s tutorial I’ve eventually been able to output 4 CSS files that better match the Photoshop GUI, keeping the peculiar Topcoat personality:
- topcoat-desktop-lightlight.css
- topcoat-desktop-light.css
- topcoat-desktop-dark.css
- topcoat-desktop-darkdark.css
The themeManager.js code is refactored too, also (thanks to David Deraedt’s idea) injecting app’s Font information in the CSS.
UPDATE - Photoshop Tools
I’ve added this HTML Panel, which has been fun to build - go grab it on my GitHub page.
In the future - job, family and time permitting - I hope to be able to store in that repository the full code related to my entire HTML Panels tip series (and more! Since I’ve started approaching Angular, I plan to cover that one too).
The Photoshop HTML Panels Development Course
If you’re reading here, you might be interested in my Photoshop Panels development – so let me inform you that I’ve authored a full course:
- 300 pages PDF
- 3 hours of HD screencasts
- 28 custom Panels with commented code
Check it out! Please help me spread the news – I’ll be able to keep producing more exclusive content on this blog. Thank you!