• CEP

PS-Panels-Boilerplate on GitHub!

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.

Photoshop Tools Panel

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

Photoshop HTML Panels Development course
Updated to CC 2019.

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!