I want to REALLY import a webpage

I want to import the HTML, CSS, and JS for a sample Bootstrap page in a tutorial, so I can use BSS to modify it. But if I just use Import, then it goes into a new page as a Custom Code component, which cannot be modified inside BSS. It displays okay, but cannot be modified.

If you've REALLY searched for this topic, you'll REALLY know the answer to your question, however much you might regret it. One of the most annoying things about, not only, but also, BSS is that this really isn't possible -- neither is it possible with any other builder that makes use of proprietary formats as a "middle step" -- not possible, for example, with things like Mobirise or CoffeeCup.

I thought I read somewhere that BSS is really flexible: if you want your own modifications to Bootstrap, you can edit the source files and then use them in BSS to design websites and apps. But you are telling me this isn't possible?

David, we users have wanted and asked for this for over 4 years and I have never ever seen a single Dev come in and say anything close to it might be possible in the future. Not once. So, as TeschToy already said, it's not possible, but in the end it's probably not something that will be added as he's right that other proprietary file builders are the same way or worse. And just for the record, although I don't suggest it as it's kind of silly to bother when doing so in a normal text editor is easier ... you "can" edit the HTML directly in the Custom Code window for any HTML you import so it is editable, just not drag and drop editable and that's the part that I doubt very much we will see.

Thanks, Jo. Although I've never tried it myself, I think PrintNinja has said something like Pinegrow might go some small way towards making it possible to concurrently edit the different parts. IF (a big IF) you know your way around that program.

Yeah that one is a pretty great app, but ... the learning curve is steep and in the end you'll need more CSS knowledge for that one than for this one, although it's best for both. Pinegrow doesn't use a proprietary file system like BSS, it uses a settings file system similar to what Dreamweaver and a few others do for keeping track of per project settings. I use it for a few sites that I haven't redone in BSS due to the size of the site or that the site is already setup fairly well and ... well let's face it, if it ain't broke there's no sense fixing it lol. In those cases I just want to update the code here and there so it works great for me for that.

It's one of those things you just need to decide what's important to you and utilize the tools that encompass those goals. Only you can do that though. :)

<h1>David2,</h1>

gee whiz, innocenc! ain't it sweet ;-D

-- sorry, not meaning to get smarmy But ..... What do you think a (CSS) Framework is? Bootstrap is a (CSS) Framework, remember? Better yet, what's a "CDN" -- look it up in Wikipedia, and think about it. I suppose you missed my comment (elsewhere?) about the next version of Bootstrap -- Bootstrap 5, or even "is it worthwhile learning Bootstrap in 2020?"

Pardon me for a (very) rough and ready answer -- a Content Delivery Network (CDN) is something that delivers content, in this case instructions to deliver information within a set of constraints (say colored "bits" --- lines, dots, etc) in a set of pre-defined ways -- that's a "framework" where the information is a computer's operations upon that information. A CSS framework is a library (of routines / data --- like different colors) allowing for easier, more standards-compliant web design using the Cascading Style Sheets language. One of the changes from Bootstrap 4 to Bootstrap 5 is that you're supplied with a broader range of colors to use. Another change is that you're allowed to customise your own parameters for the bits and pieces and their relationships with each other. BUT BSS, or any "builder" program has to place some constraints on those relationships. People think Mobirise (or CC Site Designer, or whatever) use "Bootstrap" -- WRONG!!!! They use a subset of it -- rather than have the developers of those programs be forced to deal with every different permutation and combination of CSS elements, they identify a workable subset of them. And the CDN have operating software that says "using this set of colors, put together elements of those colors together in only these ways". There're sets of these instructions and properties (like "H1" -- a heading, line of text, having this relationship to other text present). So, it isn't the case that with BSS you get to work entirely with your own "files" -- although something more like that is coming, next version. Those CDNs distributed throughout the world receive your files -- sets of HTML, CSS, JS etc in terms of sets of instructions -- and distribute properly configured sets of instructions, not a copy of the files on your computer. Or else some way would have to be found of providing (safely -- in this day and age?, would you be serious!) a copy of your files to every possible computer that might be interested in seeing you expose your wares on the world's stages. Ain't gonna happen! Short of that ....

OK, boffins!! Jo, etc, come and attack my "rough exposition" ;-D

Haha I love it @TeschToy and it pretty much sums it up, and yes with BS 5 there's going to be even more want/need for having a good grasp of CSS and even Sass (really need to get on that myself lol). Sorry no attack tonight :P evil grin waiting for next time LOL

It's not really that there's anything wrong with the suggestion that you should be able to compile your own custom "Bootstrap" (or CSS stylesheet), just that this isn't the market for this product. If you wish to start on this path you might find this interesting Jacob Lett's YouTube video But others have similar tutorials.

Using such techniques you'll be able to build your own customised, optimised, Bootstrap stylesheets (go even further, develop your own CSS library, and give frameworks a complete miss!) But then you'd be missing out on profiting from the tens of thousands of hours REAL developers have poured into developing these aides mémoires, their courses, their building tools, their handy question forums ;-D

And sure, along the way you'll be using "bloated" software (with its extras Bootstrap is one of the largest file downloads among frameworks, but wait for a couple of years and things'll be better). Currently, until BS5, BS4 is dependent on external JS libraries, like JQuery, and icon sets (like Font Awesome), but is "soon", in BS5, to have its own internal set). But you'll have to put in all those hours yourself, with little reliable, as readily accessible, backup support. People lose track of what these forums are for -- using BBS effectively, it's not to learn how to do everything with Bootstrap. You pay, what, for it, 60 bucks?! Not 60,000!! And for that it REALLY is a bargain.

Indeed, were you REALLY able to do all these things, you still probably wouldn't be able to REALLY "import" an existing webpage. C'est la vie!

There's no "importing" a purchased/downloaded Bootstrap website into Bootstrap studio and then editing it through the visual UI as if you built the site in BSS. It's not going to happen. Not ever. It's because BSS was not fundamentally designed to do this. It would literally require rewriting the entire program from scratch with a completely different method of saving website projects, and it would be a far more complex (and probably costly) program if it could do this. So just forget it.

Pinegrow does EXACTLY what David2 wants. You can open almost any website in Pinegrow and edit it with the program's visual tools (Definitely Bootstrap sites.) It will even open a Wix site and show you the tree (loaded with awful inline classes) but it won't render the site in the workspace because Wix doesn't allow it. They have 100% locked down the ability to copy their shitty websites.

Pinegrow is a considerably more sophisticated piece of software than BSS. It does Wordpress. Bootstrap. Foundation. Materialize. Tailwind. It has an interactions plug-in that makes BSS animation tools look primitive by comparison. It's also three times more expensive, has an annual fee, a steep learning curve, terrible documentation, no free web server slots, no free forms, but it can do what just about no other website builder/editor out there can do, and it's actively developed and updated as much as BSS. It also has a vibrant, robust (and better) forum than BSS, with a lot of VERY knowledgeable developers. There are plug-ins and "pre-built block" websites for Pinegrow. There are many, many tutorial videos. They do a monthly newsletter. It's a serious piece of software for experienced developers, but it's not a program I ENJOY using to build websites, and that's a huge deal when you do this day-in, day-out for a living. It also causes my machine to occasionally crash with a BSOD (blue screen of death) but that's probably because my video card is ancient and doesn't like Pinegrow's multi-monitor implimentation.

I don't love Pinegrow. I don't even like it. But I need it, and when I need it, it's because it's the only solution for the problem at hand (one of which I'm dealing with right now.)

So, David, if you really want to be a professional website developer, and want to be able to buy, open and edit Bootstrap websites with a visual builder, then Pinegrow is your solution. And that's all I have to say about that (Forrest Gump voice)

although isn't it a matter of opinion whether or not, or to what extent, Pinegrow is a "visual" (? drag-n-drop??) builder???<br /> Although I sometimes see this as being suggested "might" be becoming available "sometime soon"????? (becoming available, in the form of a program module or something)

Thank you, everyone, for an interesting discussion.

If you want to know my eventual plan, it is to create my own simple fast and lean website builder in PHP or JavaScript that will package some of the Bootstrap components into parameterized black boxes. Then, to create a page, you write JSON to structure these components together into a tree. I might even provide a GUI to make that JSON editing easier (using either Electron or Qt).

But it would most definitely only address a simple subset of Bootstrap, sufficient for the websites and apps that I personally wish to create. And it would require the same level of understanding of Bootstrap and CSS that is required by BSS. If I make this project (already started) Open Source, I would probably support adding new components and properties as requested by real users. It might be considered a lower-end version of BSS.

My main motivation is that BSS is a standalone application, so integrating it into a much larger project, either involving forms, dynamic pages, or a full-scale App, has to be more or less manual. Whereas the smaller builder I am envisioning would just be PHP or JavaScript files that could be included in any project.

Currently, I am focused on taking a Udemy course in Bootstrap and CSS and working through examples (thanks to Jo).

Glad to hear you're checking into some courses then, because what you talk about above should mean you have a very good understanding of website structure with HTML and CSS as well as JS etc. so that you don't end up being another low level builder like Wix :P Keep up the good work!

I have realized that BSS is nowhere near where it should be. It is great however at pushing out a design in record time that is compliant and responsive. Once I have the design and elements all in place, and I am happy to start working on the PHP, I export the design, cut it up into different template files and integrate it into CodeIgnitor for the final app. I am now, at this stage done with BSS and it fulfilled its purpose. All development from this point on will be done in a VisualCode

@OkayOK curious whats your approach / workflow if monumental changes need made once you orphan things past BSS?

I would just make the changes like I have for years, using a text editor for elements in the page. Using Codeignitor, it separates the design from the logic, so I would be able to generate a whole new site design in BSS, export, and replace the template files with a new design and the site should update. I must admit I have not totally replaced an entire design as yet.

1 Like

Gotcha. Thanks I’m always curious of peoples workflows once orphaned from apps that don’t deal with native files. :wink:

I have taken a different approach to website creating, which I call SpringWeb, using BSS as one of my inspirations. Unlike BSS, this approach is completely flexible and extendible, as you create both the macros and their calls.

I lay out my components using macros, which I design to represent Bootstrap 5 objects of various kinds, including global variables (I use one background color for all pages, which I specify in a global macro used as a variable).

For example, I wrap my body code in a Bootstrap 5 container, like so:

[[container]]
...
[[container-end]]

Elsewhere in my macro source file, I write the definitions for these two macros:

[[[container*=<div class="container-fluid row d-flex justify-content-evenly align-items-center text-center">]]]

[[[container-end*=</div>]]]

Note that the macros have grown to be much longer than the standard Bootstrap 5 container divs, as I have discovered new functionality that they should have. In particular, you will see that my container macro doesn’t just define the container, but also automatically aligns and wraps the contained elements so they look good at all viewport widths (“responsive design”).

The value of macros is not evident just from these two lines. They shine when they are used many times.

For example, if I want to put many Bootstrap 5 cards on a page, I can use a macro for each one:

[[[card(image,heading)*=
...
]]]

[[[card-end(btnFile)*=</p>
...
]]]

Note the three parameters of a card are the path of the image file, the heading text, and the path the button will go to.

Then I can simply use a macro call for each card, as follows:

[[card(a.jpg,We've all got Stress)]]
It's all about internal stress: what it is, where it comes from, and how it causes problems.
[[card-end(stress.php)]]

[[card(b-1.jpg,NSR: A Natural Solution to Stress)]]
NSR is an easy and natural mental technique that melts stress away&#8212;permanently.
[[card-end(natural.php)]]

This makes cards just as easy as in BSS to create and maintain: just three lines of code each. No clutter!

These are actual excerpts from a current website, and they work nicely.

In addition, I am creating an automatic form page generator, driven by a standard JSON file, which is easy to create and change using a JSON editor. I am doing this because my order form is very long.

Here is an example of a single command from that file (“policy” is a modal popup triggered by an ‘info’ icon in the generated control):

"name": {
		"label": "Your full name",
		"policy": "You must provide your real and full name with your first order.",
		"placeholder": "Example: John H. Doe, Jr",
		"type": "text"
	},

I hope someone finds this posting of interest.

David Spector
Springtime Software