I like to design in Bootstrap studio, but is there an easy way to create the page from some existing HTML?

I have recently purchased Bootstrap Studio and I do love it, the visual representation of what’s going on really helps me to produce better layouts in my job. But…
I often work in the code of existing pages/frames and it’s a little unproductive to try and recreate the base page with css etc before I even start building what I am working. I kind of hope for a flow like:

  • Provide CSS file
  • Insert existing HTML (that I wish to work in, as it’s essentially a master page I want to update the internal contents.

Because I like the visual aspect of this tool, can any provide a bit of a guide fro an ametuer like me to get productive asap intot he design phase without messing around with css and stuff that seems like I should be able to copy/paste it into, as I am only after the contents of one of the DIV’s or whatever, it would be a huge help to easily include the other content without taking houras to redesign it each time as I do not even want to touch this code, just use it as a visual guide.

Sorry if this has been asked before.

Hiya Slim,

Yeah it’s been asked a kazillion (is that a word? lol) times already and I wish I could say yes, but unfortunately BSS’s has no way to import the HTML and still use the visual components, you’d have to edit it all manually as Custom Code which would defeat the purpose.

What you “can” do though is import your CSS and JS and redo just the html of the site and apply the CSS as you have it in your site now. That saves a little time at least without having to redo all the CSS classes too. Yeah it’s a lot of work/hassle to have to do that, but in the end it’s totally worth it.

1 Like

Thanks a lot. If only stack overflow was this kind and friendly, haha.

I’ll have to do myself up a workflow with your suggestions. I’m still learning the software, so I’ll see how I go.

Thanks again.

You’re quite welcome, takes a bit of getting used to, but the Docs are newly updated last month so they should help some too. Have fun!

1 Like

Now I had to laugh out loud! When Google leads me to a hit on Stack Overflow, I always have to bundle all my strength so that just reading it doesn’t overflow my stack … :upside_down_face:

1 Like

IDK, I’ve generally found Stack Overflow to be pretty useful. Found many solutions to problems there over the years. Sometimes you have to sift through stuff, but there aren’t many resources I know of that have as much raw information.

1 Like

@printninja You’re right of course, it’s not without reason that people keep coming across this website when searching Google. But I quickly feel overwhelmed there, like in a supermarket that is too big.

Then go use tools for prototyping? Ur suggestion is not even related to that for what this software was made for

@Slim_Pickins ,

This is a frank and honest evaluation of the software from a business solution developer perspective. We tested and used BSS in various scenarios and we found that, BSS is:

(1) Is great WYSIWIG tool for development from scratch.
(2) The moment we transferred files into it and configure, everything seems break and had to do lots of search-n-rescue.
(3) Especially, we had a hell of work when we tried to bring in templates.
(4) It does not seem to go well when we tried to integrate frameworks such as vue.js, node.js etc (worse unproductive things to use).

@Slim_Pickins my suggestion to is to use Pinegrow. Its perfect for what we were looking for and feel the same may apply to you too. You can use Pinegrow to import and develop simple to complex pages/site. In our opinion. BSS is simply a scale-down subset of Pinegrow.

Again, being still an individual’s preference and comfort and assure you that BSS is really good piece too, we would suggest Pinegrow if you are a serious business solution developer as it comes with full range of features, instant help, tutorials and very active forums, not to mention full working samples at every level. Also not mention, it supports tailwind, interactions, material design and different versions of bootstrap.We came up to speed in a matter of one month and now doing serious development and training with Pinegrow. We load tutorials into Pinegrow too. Unforunately both BSS and Pinegrow do not support php or python codes directly. We use PHPRad for our php needs. Pinegrow, however, does support embedding php code but will not execute them as you would need a back-end server to do that. Also, integrates with Visual Studio Code directly.

Previously, many hard-core users of BSS in here attacked me and i took it being a newbie to both BSS and Pinegrow then. Unfortunately, after 1 year of try outs,unfortunately, I am sorry, I have to mention this here again. I am not concerned about these attackers anymore because I know i am well above them.

Oh one more thing, we still use BSS to get our fresh graduates on to Bootstrap development.

1 Like

BSS and Pinegrow are similar in some regards, but they’re both designed to do different things. There’s no arguing that Pinegrow has a much larger feature set, is more flexible, and is more of a website editor/builder than just a builder. It’s also a LOT more expensive, requires an annual subscription, has a higher learning curve, and many would say the interface is cluttered, less polished, and not as “ergonomic” or “user-friendly” as BSS (though I believe it has gotten much better since version 6 was released.) Pinegrow’s undo-redo feature was never as reliable as BSS’s (not sure if this has been addressed.) Pinegrow doesn’t offer free hosting, free contact forms, or e-commerce (which is coming to BSS) and these are things that freelancers on a budget really value.

So depending on the types of clients you have, your budget, and skill level, BSS may be more than sufficient, while Pinegrow may be far more than most people will ever need. Or, BSS may be too limited, and Pinegrown may be required.

I personally own both programs, but I rarely use Pinegrow these days unless I need to do something very complicated, or need to edit an existing website that a client does want rebuilt from scratch. In that regard, Pinegrow definitely shines. But it’s not cheap. I will never built a website using Foundation, Tailwind or Wordpress, so all that stuff is extraneous to me.

It really just boils down to what your needs are. Some people need a $2 million dollar Ferrari while other people are fine with a $80,000 Corvette that does 80% of what the Ferrari can do, and some things it even does better.

1 Like

Hi @printninja ,

Nice discussing with you. I fully agree with you. Looking at the solution @Slim_Pickins needs, its a definite Pinegrow candidate. My comments/feedback was basically addressing that.

Without making a sweeping statement, most of us business developers work in the same mode as @Slim_Pickins . We get various ready-made solution and tweak them to get the system to production as fast as we can. There was a lot of hype on the Tube about delivering prototyped UI to user by using things like BootStrap and how we should use Tailwind to be more original. We as business developers ignore such ignorant rubbish (especially the Tubes that compare different software and still end up saying something on the level). The front-end user actually does not care what different UI we use. All they want is to get in there, do it fast and accurately and get out. Look at airlines system. They are on TTY mode. Just imagine they used all the wonderful looking UI, the passengers will never get on the plane on time. Worse, imagine UI on toll collection systems. I will throw bricks at the collector.

Pinegrow is definitely loaded (overloaded?) with features which many of us may not use. I agree I never used Foundation CSS, but when the templates we needed was using Material Component, Pinegrow was there immediately. Given the current environment, we use more ready made components.

Regarding the part on learning curve, i may not agree with you. We experimented with both and found Pinegrow delivered a faster learning curve as our learning was not just full-seat tutorial. It was more of get the specs, use Pingrow, develop and learn. In that respect, it is definitely faster because when needed to some extra tricks, Pinegrow was there with JIT tutorial and feature. Especially when using design feature, we had so much good feedback from on products delivered.

Thank you once again. Stay safe, Stay Free.

1 Like