Theme building toolkit(s)

  • One of the best things about PS 1.7 is IMHO its new “Classic” theme. Not only because it’s cleaner on the user-visible surface, but also because it’s cleaner code.

    • It uses libsass instead of compass, which is said to be faster.
    • It uses the NPM packaging system for libraries instead of copying them into subfolders.
    • It uses webpack for automatic building and also building all sources into a single pair of .css and .js files. Downloading one bigger file is obviously faster than requesting each file separately.
    • Webpack also allows optimization, like dead/duplicate code removal (gives me some 30% smaller files on PS 1.7).

    The unfortunate thing about this Classic theme is, it’s incompatible with thirty bees. I looked a bit into getting it running, but creating kind of an adapter appears to be several months of work.

    … which doesn’t mean that thirty bees can’t use similar strategies for just building the theme, without breaking backwards compatibility. Sass is still Sass, JavaScript is still JavaScript, Smarty is still Smarty.

    The question: is it a good idea to use libsass, NPM and webpack for building the thirty bees theme, too? Is NPM better than composer, which is already in use for modules? Are there even better tools?

    I’m about to get into theme building, so I could improve the thirty bees infrastructure a bit along the way.

  • Not sure. less is often used with frameworks because you can compile it both client (JS) and server (PHP) side.

    All this node.js hipster stuff is not essential for developing faster, but it does make things easier. You can in fact already include it yourself with your 1.6 theme.

    You do not necessarily have to use webpack and we would like to discourage it. You prevent HTTP/2.0 from doing its thing by using it. A good gulp script, that minifies the core files will do, too. It is also a lot harder for merchants to make small changes when webpack is used.

  • In fact, the community theme already has a lot of what I have proposed. I think we are going to replace sass with less in the future, because it’ll pave the way for scripts like the bootstrap-live-customizer.


Looks like your connection to thirty bees forum was lost, please wait while we try to reconnect.