Reusable elements (custom templates/master pages and components/symbols)

I've just started using Bootstrap Studio. Great app! After only a few days, I already feel more confident and productive than I felt after weeks with Pinegrow. The interface is refreshingly usable and the app also feels solid, with less surprises.

I just want to confirm my understanding about reusable elements in Bootstrap Studio. Two related concepts in design software are master pages (or template pages) and symbols (or reusable components). A master page would normally have defined editable regions, while locking the rest of the page (to protect it from accidental changes and preserve consistency across the site). Making a change to one of these locked areas on the master page itself would then propagate the changes to every child page. So it works on the premise that everything is locked unless you declare it otherwise, while the reusable symbol/component concept works the other way around—assuming everything on the page is unconnected and freely editable unless you make it a symbol.

Having read through the documentation and skimmed the forums, my understanding is that BSS supports symbols (what it calls Linked Components), but not master pages. Is this correct?

If I start a new project (Design) based on one of the pre-built themes, I can see that there is the option to 'Create Template Page' (by right-clicking on the Pages menu in the Design panel), and this creates a new page based on one of the pre-made templates. The new page contains a couple of Linked Components (nav bar and footer), but the page itself doesn't remain linked to the parent template. Also, unless I'm missing something, there seems to be no feature for generating these 'templates' from within Bootstrap Studio anyway.

So what do long-time BSS users think… do you find that not having master pages in BSS limits your productivity? Even Dreamweaver had this feature many years ago, and it's probably the only thing I missed when I moved to Coda and started hand-coding everything (before I grew tired of that). I know Pinegrow has this feature too, but I don't tend to enjoy working in PG very much. Would this be a feature you would use if it were added to BSS?

Bootstrap Studio does not have anything like the Master Page feature in Pinegrow or Dreamweaver. I never used Dreamweaver, and while I do own Pinegrow and have built some sites in it, I find that compared to Bootstrap Studio, it's interface is inelegant and poorly designed, and provides a cumbersome and wholly unsatisfying user experience. Although it's palates are fixed and limited to one monitor, Bootstrap Studio's UI is considerably more user-friendly and logically laid out. The developers simply had a better understanding of how to make use of the available real estate, and utilize every square inch or real estate to its maximum. Pinegrow could stand to take some lessons from BSS or Webflow. It would truly benefit from a ground-up redesign of the UI.

You are correct in the function of Bootstrap Studio's linked components. With linked components, I find that I don't miss having Master Pages at all. Pinegrow's Master pages never always seemed glitchy, and non-intuitive. I never actually managed to use them successfully in a site, instead settling for copying and pasting code between pages. There are times when I wish it were possible in BSS to selectively unlink certain parts of a linked component on certain pages, but overall the feature is very well implemented.

BSS does not support "templates" in the traditional sense. If you build a site and want to use it as a "template" you simply create a new folder and save that site as a newly named site.

Bootstrap Studio's ability to save components into the user library more than makes up for the lack of a template feature. I have numerous components that I've created over the years in my library that I reuse over and over, and they save me a ton of time.

About the only thing I'd like to see would be the ability to have multiple pages from a single site open at the same time, but I can understand how this could easily confuse the undo/redo history (Pinegrow's undo/redo is a flaming mess.) So I'm fine with just opening a page, copying what I need, then opening the new page and pasting. And of course, multi-monitor support would be a HUGE plus for BSS, but the developers have said they're working on this.

I haven't used Webflow (even though I created a free account) but I've heard from many Pinegrow users that Webflow has nailed the UI, and they wish the Pinegrow Developers would take a look at it for an example of how to do things right.

I'm glad you responded Printninja… It gives me a chance to say thank you, not just for this reply, but for many of your comments that I stumbled across both here and on the Pinegrow forums. I find they are always insightful and helpful.

I couldn't agree more with your assessment of PG. At first, I thought I had found what I was looking for—a faster way to code, with the convenience of instant previews and WYSIWYG editing. But over time, I was never quite sure if it was a help or a hinderance. Scouring a long, scrolling panel for a particular field certainly doesn't speed up coding—a good editor with autocomplete will beat that every time. So above all, you need the editing experience (both on the canvas and in the code) to be rock-solid… and it just isn't.

I too liked the look of Webflow… but $420 USD per year for unlimited unhosted projects?? No thank you. I tested a bunch of others too, but none of them compared with those three.

So I think I've settled on Bootstrap Studio. It certainly is polished, and the balance (between drag-and-drop ease-of-use and raw power) feels about right. It does feel a bit strange being locked out of HTML editing by default, but the UI is so well designed like you say, I reckon I can live with it. The CSS editor is nice too, and that's where I probably spend the bulk of my time anyway.

Okay, so back on topic… I've set up a page, set up the header and footer as Linked Components, and duplicated the page to populate my site. Not a bad workflow I suppose, although I do think some kind of master page feature could be even better. As a minor complaint, I don't understand why, when you roll over a page in the Design panel, there's 'Move to Folder' and 'Copy To' but not 'Copy to Folder'. I have to duplicate in-situ, then drag to another folder, then rename. Like I said, minor complaint. ?