Using Publii with existing content and minor abstraction

[anonymous] wrote:

I’ve looked through theme creation documentation and can understand the handlebars methodology but it appears to me to be another layer of abstraction in terms of implementation of CSS and HTML existing structure

Hi Sam! I’ve been in your shoes (sort of) and understand how handlebars can get tricky if you’re more of a designer and have a beginner/intermediate level skills in HTML and CSS. I’m also not too keen on using WordPress or React for the reasons you’ve explained. They just feel too complicated for the kinds of websites I make.

I will say, though, that what drew me to Publii over more visual platforms like, say, Wix, Cargo, Squarespace, etc. is how close to HTML handlebars felt to me, and how optimized it is for SEO (if you fill things out correctly).

Rather than regarding them as “posts”, think of them as page templates and variables. Designing templates and using partials allows you to quickly iterate through different designs for components efficiently. Rather than create 10 similar-looking pages with HTML, and have to go back and re-design every single one because you changed your mind about the menu, you just have to work on the menu partial in one place and regenerate the site. I think of it like mail merge.

I shared my workflow in another post, but my trick is to design my mockups ahead of time (I use Penpot, but Figma / Inkscape / Photoshop / pen and paper / whatever works), pick a theme that resembles the layout I want the most, and make changes via theme overrides. Although I sometimes tweak the post templates in my theme files to change their layout, 90% of my theming work is done in the assets > css > main.css file.

I’ll preview/generate the site from Publii and use the Inspect / dev tools in my browser to experiment with different styling options in real-time. Once I’m satisfied with the result, I use my code editor to make the change in the overridden main.css file (with comments added). After a series of changes, I’ll regenerate the site from Publii to make sure everything’s good, and make more changes until it looks like what I sketched out. Let me know if any of this doesn’t make sense.

For me, the key is having a mockup and solid understanding of CSS (or doing a lot of googling and learning). freecodecamp, Mimo, SuperHi’s Plan Design Code, MDN web docs, css-tricks.com, and W3 have helped me immensely in the past two years with Publii, and what I learn can be directly applied to Publii.

[anonymous] wrote:

Webflow is pretty decent for design but falls short due to platform lock in which shouldn’t be a thing for any standards based system like HTML and CSS.

There will always be some level of lock-in, even with Publii. The major difference, I suppose, is that the site Publii generates can be opened and edited outside of Publii, but the inputs (post database, partials, templates, json info) are meant to be used with the Publii GUI to generate said site.

[anonymous] wrote:

I’d like to use existing standards based design files to create a new template for Publii swiftly, I’m a bit confused about things like where and how do I edit my index page layout and design etc.

As I’ve mentioned in the other post, building on top of an existing theme and overriding the stylesheet is probably the fastest way to go about it, rather than building from scratch. Looking through the theme files for an existing theme will give you a good sense of how they’re built, and you can use the dev docs to search up what different tags, variables, helpers, and partials mean.

To edit your index page’s layout and markup, open the index.hbs file in a code editor. To preview those changes, save the file, open Publii, and generate your site in the browser by clicking on “Preview your changes”. Anytime you make changes to theme files and want to see them, you’ll have to hit “preview”. For style and design changes, you can save yourself time by using Inspect / Dev Tools to see (temporary) changes in real-time. Just remember to apply styling changes to the main.css file in your code editor and saving. You can also override CSS inside the Publii GUI, but I prefer implementing advanced theme customizations directly to the theme files with a code editor.

Another thing to keep in mind: the WYSIWYG post editor has an “HTML” button which allows you to edit the source code for that post. So if you have a particular page which has a unique element to it, you can code it directly from there, rather than fiddling with the post template theme file(s). You can even set a “post” page as your front page.

Last thing: these tutorial series, albeit old, helped me a lot with theming: https://github.com/SimonPadbury/Publii-Bootstrap-Starter/tree/master/TUTORIALS and https://www.youtube.com/watch?v=fsOUQHdnbfM&list=PL4Fb33QfSHwmYxxr08vBgUtc-1jZpSkW5&index=11

Anyway, I know this is a long reply, but I hope the information was helpful, even if you decide to use something else.