Convert HTML to BSS format file?

Client sent me his index.html bootstrap files and asked me to adjust sections and move things around. I tried to import html page in BSS but it came up as just custom code and I was not able to do anything with it other than edit as custom code. Is there maybe a simple way of how to import HTML file into BSS and have all the element edit functions? Or some faster way of duplicating HTML file into BBS?

Client sent me in total 30 HTML files, that I need to change up and I have no option to back out, as I need money! I hoped with BBS I would be able to do it, but after trying things out, seems it will not gonna work as I expected.

If someone have any method of how to duplicate regular HTML into BSS format so I can edit it into BSS, please contact me at markjohanson021@gmail.com

it’s custom code after import as per design of the app.

Should you want to use drag and drop then you need to rebuild a new BSS design from scratch using this app ( which probably doesn’t help you in this instance)

Alternatively you could chunk up blocks of html into a few custom code components and you could move those around with drag and drop I suppose

Yes, I will recreate each html into BSS, I downloaded https://chrome.google.com/webstore/detail/cssviewer/ggfgijbpiheegefliciemofobhmofgce to more efficiently set correct CSS for each element.

Maybe someone knows some other extensions or tool to copy element css and structure easier, or just be a useful tool?

Unfortunately Chris has the answer and HTML pages will need to be redone within the app manually to recreate them, but .... all is not lost!

The beauty of BSS, is that you can just import the CSS files and they can be used as they are now, you don't have to recreate all of that. Then just reference your current HTML files and apply the classes (copy/paste) to the BSS HTML elements as you add them. At least you won't have to do the CSS or JS files, you can import both of those without it making any problems with drag and drop etc.

As a developer, I'm curious as to why the technical limitation in simply rebuilding what's needed from an imported HTML. I recently started using BSS, saved all of my files, did previews, etc... but didn't realize (until after coming across the same problem) that the .bsdesign file wasn't created. Certainly, I can manually edit the code (or rebuild from scratch), but it just seems odd that there wouldn't be a better import option.

Not complaining, just very curious if there's some technical barrier I'm missing, or if there's some "business" decision to force people (roughly paraphrasing a quote I read somewhere on the forum) "use BSS for everything." It seems like it'd be pretty straightforward to simply create (at the very least) a stacked outline based on the major block tags (div, nav, section, etc.) if not all of the tags... which is how most sites handle this. (I also use Pinegrow 4.x which is also a great tool... and works well with external editors.)

I also use VS Code for a lot of code editing, running build scripts like Gulp, etc. ... I like(d) BSS because it's quicker to get things visually arranged... but it's not a replacement for the full set of dev tools needed and used these days. I like @Marky thought I'd look to see if I could manually recreate the .bsdesign file ... but it's binary. Again, not complaining, but just seems so odd compared to all of the other dev and design tools out there to have something like the project file be "proprietary."

What am I missing in the business decision here? There are some great features that make BSS a good quick tool... but the lack of being able to maintain a drag-and-drop outline once something is "custom code" seems like a pretty big drawback and unnecessary limitation. For what it's worth, as a marketing guy, if I'm the BSS dev/owner, I'd look at Pinegrow as the main competitor, and purchase a copy and innovate from there.

I still plan to use BSS -- but just as a help to those that need to "reimport" with drag and drop capability, my unpaid and unaffiliated advice is to bring it back into Pinegrow ... it has it's own set of pros/cons, but the ability to import and edit files and maintain drag-and-drop-ability is not a limitation. That's what I did to "recover" the time spent on the BSS project that only saved the files but not the project. Hope that helps someone. :-)

1 Like

ideaspring,

Actually the design file is just an archive Basically if you extract it... you get a file with json in it... but it would be a pain to build a converter.

Example:

{
"version": 31,
"timestamp": 1529351441502,
"design": {
    "id": "6b28e1227c77cabad9d5a21e59aa759d_1529348539527",
    "name": "form",
    "settings": {
        "theme": {
            "id": "default",
            "type": "builtin"
        },
        "jqueryVersion": 3,
        "headContent": "",
        "meta": []
    },
    "placeholders": {},
    "framework": "4",
    "assets": {
        "images": {
            "name": "",
            "expanded": false,
            "children": []
        },
        "fonts": {
            "name": "",
            "expanded": false,
            "children": []
        },
        "css": {
            "name": "",
            "expanded": false,
            "children": [{
                "name": "styles.css",
                "properties": {},
                "priority": 0,
                "blocks": []
            }]
        },
        "js": {
            "name": "",
            "expanded": false,
            "children": []
        }
    },
    "pages": {
        "name": "",
        "expanded": false,
        "children": [{
            "name": "index.html",
            "properties": {},
            "priority": 0,
            "html": {
                "class": "HTML",
                "cssClasses": {
                    "system": "",
                    "parent": ""
                },
                "overrides": {},
                "flags": {
                    "canBeMoved": false,
                    "canBeDeleted": false,
                    "canBeDuplicated": false,
                    "canBeEdited": false,
                    "canBePackaged": false,
                    "canBeCopied": false
                },
                "properties": {},
                "label": "",
                "children": [{
                    "class": "Body",
                    "cssClasses": {
                        "system": "",
                        "parent": ""
                    },
                    "overrides": {},
                    "flags": {
                        "canBeMoved": false,
                        "canBeDeleted": false,
                        "canBeDuplicated": false,
                        "canBeEdited": false,
                        "canBePackaged": false,
                        "canBeCopied": false
                    },
                    "properties": {},
                    "label": "",
                    "children": [{
                        "class": "Block",
                        "cssClasses": {
                            "system": "",
                            "parent": ""
                        },
                        "overrides": {},
                        "flags": {
                            "canBeMoved": true,
                            "canBeDeleted": true,
                            "canBeDuplicated": true,
                            "canBeEdited": false,
                            "canBePackaged": true,
                            "canBeCopied": true
                        },
                        "properties": {},
                        "label": "2 Rows 1+2 Columns",
                        "children": [{
                            "class": "Form",
                            "cssClasses": {
                                "system": "",
                                "parent": ""
                            },
                            "overrides": {},
                            "flags": {
                                "canBeMoved": true,
                                "canBeDeleted": true,
                                "canBeDuplicated": true,
                                "canBeEdited": false,
                                "canBePackaged": true,
                                "canBeCopied": true
                            },
                            "properties": {
                                "action": "",
                                "method": "",
                                "target": "",
                                "enctype": "",
                                "inline": false
                            },
                            "label": "",
                            "children": [{
                                "class": "Container",
                                "cssClasses": {
                                    "system": "container-fluid",
                                    "parent": ""
                                },
                                "overrides": {
                                    "/": {
                                        "style": "max-width:450px;"
                                    }
                                },
                                "flags": {
                                    "canBeMoved": true,
                                    "canBeDeleted": true,
                                    "canBeDuplicated": true,
                                    "canBeEdited": false,
                                    "canBePackaged": true,
                                    "canBeCopied": true
                                },
                                "properties": {
                                    "fluid": true
                                },
                                "label": "",
                                "children": [{
                                    "class": "Row",
                                    "cssClasses": {
                                        "system": "form-row",
                                        "parent": ""
                                    },
                                    "overrides": {},
                                    "flags": {
                                        "canBeMoved": true,
                                        "canBeDeleted": true,
                                        "canBeDuplicated": true,
                                        "canBeEdited": false,
                                        "canBePackaged": true,
                                        "canBeCopied": true
                                    },
                                    "properties": {
                                        "gutters": true,
                                        "row-horizontal-alignment": "",
                                        "row-vertical-alignment": "",
                                        "row-sm-horizontal-alignment": "",
                                        "row-sm-vertical-alignment": "",
                                        "row-md-horizontal-alignment": "",
                                        "row-md-vertical-alignment": "",
                                        "row-lg-horizontal-alignment": "",
                                        "row-lg-vertical-alignment": "",
                                        "row-xl-horizontal-alignment": "",
                                        "row-xl-vertical-alignment": ""
                                    },
                                    "label": "",
                                    "children": [{
                                        "class": "Column",
                                        "cssClasses": {
                                            "system": " col-md-12 col-xl-12",
                                            "parent": ""
                                        },
                                        "overrides": {},
                                        "flags": {
                                            "canBeMoved": true,
                                            "canBeDeleted": true,
                                            "canBeDuplicated": true,
                                            "canBeEdited": false,
                                            "canBePackaged": true,
                                            "canBeCopied": true
                                        },
                                        "properties": {
                                            "colxs": -1,
                                            "colsm": -1,
                                            "colmd": 12,
                                            "collg": -1,
                                            "colxl": 12,
                                            "colxsOffset": -1,
                                            "colsmOffset": -1,
                                            "colmdOffset": -1,
                                            "collgOffset": -1,
                                            "colxlOffset": -1,
                                            "col-valign": "",
                                            "col-order": "",
                                            "col-margin-auto": "",
                                            "col-sm-valign": "",
                                            "col-sm-order": "",
                                            "col-sm-margin-auto": "",
                                            "col-md-valign": "",
                                            "col-md-order": "",
                                            "col-md-margin-auto": "",
                                            "col-lg-valign": "",
                                            "col-lg-order": "",
                                            "col-lg-margin-auto": "",
                                            "col-xl-valign": "",
                                            "col-xl-order": "",
                                            "col-xl-margin-auto": ""
                                        },
                                        "label": "",
                                        "children": [{
                                            "class": "Heading",
                                            "cssClasses": {
                                                "system": {
                                                    "textAlignment": "text-center"
                                                },
                                                "parent": ""
                                            },
                                            "overrides": {},
                                            "flags": {
                                                "canBeMoved": true,
                                                "canBeDeleted": true,
                                                "canBeDuplicated": true,
                                                "canBeEdited": true,
                                                "canBePackaged": true,
                                                "canBeCopied": true
                                            },
                                            "properties": {
                                                "type": "h1",
                                                "text-alignment": "center"
                                            },
                                            "label": "",
                                            "children": [{
                                                "class": "InlineCharacter",
                                                "char": "H",
                                                "bold": false,
                                                "italic": false,
                                                "strike": false,
                                                "underline": false,
                                                "link": false
                                            }, {
                                                "class": "InlineCharacter",
                                                "char": "e",
                                                "bold": false,
                                                "italic": false,
                                                "strike": false,
                                                "underline": false,
                                                "link": false
                                            }, {
                                                "class": "InlineCharacter",
                                                "char": "a",
                                                "bold": false,
                                                "italic": false,
                                                "strike": false,
                                                "underline": false,
                                                "link": false
                                            }, {
                                                "class": "InlineCharacter",
                                                "char": "d",
                                                "bold": false,
                                                "italic": false,
                                                "strike": false,
                                                "underline": false,
                                                "link": false
                                            }, {
                                                "class": "InlineCharacter",
                                                "char": "i",
                                                "bold": false,
                                                "italic": false,
                                                "strike": false,
                                                "underline": false,
                                                "link": false
                                            }, {
                                                "class": "InlineCharacter",
                                                "char": "n",
                                                "bold": false,
                                                "italic": false,
                                                "strike": false,
                                                "underline": false,
                                                "link": false
                                            }, {
                                                "class": "InlineCharacter",
                                                "char": "g",
                                                "bold": false,
                                                "italic": false,
                                                "strike": false,
                                                "underline": false,
                                                "link": false
                                            }]
                                        }]
                                    }]
                                }, {
                                    "class": "Row",
                                    "cssClasses": {
                                        "system": "form-row",
                                        "parent": ""
                                    },
                                    "overrides": {},
                                    "flags": {
                                        "canBeMoved": true,
                                        "canBeDeleted": true,
                                        "canBeDuplicated": true,
                                        "canBeEdited": false,
                                        "canBePackaged": true,
                                        "canBeCopied": true
                                    },
                                    "properties": {
                                        "gutters": true,
                                        "row-horizontal-alignment": "",
                                        "row-vertical-alignment": "",
                                        "row-sm-horizontal-alignment": "",
                                        "row-sm-vertical-alignment": "",
                                        "row-md-horizontal-alignment": "",
                                        "row-md-vertical-alignment": "",
                                        "row-lg-horizontal-alignment": "",
                                        "row-lg-vertical-alignment": "",
                                        "row-xl-horizontal-alignment": "",
                                        "row-xl-vertical-alignment": ""
                                    },
                                    "label": "",
                                    "children": [{
                                        "class": "Column",
                                        "cssClasses": {
                                            "system": " col-md-6 col-xl-6",
                                            "parent": ""
                                        },
                                        "overrides": {
                                            "/": {
                                                "style": "padding:10px;"
                                            }
                                        },
                                        "flags": {
                                            "canBeMoved": true,
                                            "canBeDeleted": true,
                                            "canBeDuplicated": true,
                                            "canBeEdited": false,
                                            "canBePackaged": true,
                                            "canBeCopied": true
                                        },
                                        "properties": {
                                            "colxs": -1,
                                            "colsm": -1,
                                            "colmd": 6,
                                            "collg": -1,
                                            "colxl": 6,
                                            "colxsOffset": -1,
                                            "colsmOffset": -1,
                                            "colmdOffset": -1,
                                            "collgOffset": -1,
                                            "colxlOffset": -1,
                                            "col-valign": "",
                                            "col-order": "",
                                            "col-margin-auto": "",
                                            "col-sm-valign": "",
                                            "col-sm-order": "",
                                            "col-sm-margin-auto": "",
                                            "col-md-valign": "",
                                            "col-md-order": "",
                                            "col-md-margin-auto": "",
                                            "col-lg-valign": "",
                                            "col-lg-order": "",
                                            "col-lg-margin-auto": "",
                                            "col-xl-valign": "",
                                            "col-xl-order": "",
                                            "col-xl-margin-auto": ""
                                        },
                                        "label": "",
                                        "children": [{
                                            "class": "FormGroup",
                                            "cssClasses": {
                                                "system": "form-group",
                                                "parent": ""
                                            },
                                            "overrides": {},
                                            "flags": {
                                                "canBeMoved": true,
                                                "canBeDeleted": true,
                                                "canBeDuplicated": true,
                                                "canBeEdited": false,
                                                "canBePackaged": true,
                                                "canBeCopied": true
                                            },
                                            "properties": {},
                                            "label": "",
                                            "children": [{
                                                "class": "InputText",
                                                "cssClasses": {
                                                    "system": "",
                                                    "parent": ""
                                                },
                                                "overrides": {},
                                                "flags": {
                                                    "canBeMoved": true,
                                                    "canBeDeleted": true,
                                                    "canBeDuplicated": true,
                                                    "canBeEdited": false,
                                                    "canBePackaged": true,
                                                    "canBeCopied": true
                                                },
                                                "properties": {
                                                    "name": "",
                                                    "value": "",
                                                    "disabled": false,
                                                    "readonly": false,
                                                    "required": false,
                                                    "placeholder": "",
                                                    "maxlength": "",
                                                    "minlength": "",
                                                    "pattern": "",
                                                    "autofocus": false,
                                                    "autocomplete": "",
                                                    "inputmode": ""
                                                },
                                                "label": ""
                                            }]
                                        }]
                                    }, {
                                        "class": "Column",
                                        "cssClasses": {
                                            "system": " col-md-6 col-xl-6",
                                            "parent": ""
                                        },
                                        "overrides": {
                                            "/": {
                                                "style": "padding:10px;"
                                            }
                                        },
                                        "flags": {
                                            "canBeMoved": true,
                                            "canBeDeleted": true,
                                            "canBeDuplicated": true,
                                            "canBeEdited": false,
                                            "canBePackaged": true,
                                            "canBeCopied": true
                                        },
                                        "properties": {
                                            "colxs": -1,
                                            "colsm": -1,
                                            "colmd": 6,
                                            "collg": -1,
                                            "colxl": 6,
                                            "colxsOffset": -1,
                                            "colsmOffset": -1,
                                            "colmdOffset": -1,
                                            "collgOffset": -1,
                                            "colxlOffset": -1,
                                            "col-valign": "",
                                            "col-order": "",
                                            "col-margin-auto": "",
                                            "col-sm-valign": "",
                                            "col-sm-order": "",
                                            "col-sm-margin-auto": "",
                                            "col-md-valign": "",
                                            "col-md-order": "",
                                            "col-md-margin-auto": "",
                                            "col-lg-valign": "",
                                            "col-lg-order": "",
                                            "col-lg-margin-auto": "",
                                            "col-xl-valign": "",
                                            "col-xl-order": "",
                                            "col-xl-margin-auto": ""
                                        },
                                        "label": "",
                                        "children": [{
                                            "class": "FormGroup",
                                            "cssClasses": {
                                                "system": "form-group",
                                                "parent": ""
                                            },
                                            "overrides": {},
                                            "flags": {
                                                "canBeMoved": true,
                                                "canBeDeleted": true,
                                                "canBeDuplicated": true,
                                                "canBeEdited": false,
                                                "canBePackaged": true,
                                                "canBeCopied": true
                                            },
                                            "properties": {},
                                            "label": "",
                                            "children": [{
                                                "class": "InputText",
                                                "cssClasses": {
                                                    "system": "",
                                                    "parent": ""
                                                },
                                                "overrides": {},
                                                "flags": {
                                                    "canBeMoved": true,
                                                    "canBeDeleted": true,
                                                    "canBeDuplicated": true,
                                                    "canBeEdited": false,
                                                    "canBePackaged": true,
                                                    "canBeCopied": true
                                                },
                                                "properties": {
                                                    "name": "",
                                                    "value": "",
                                                    "disabled": false,
                                                    "readonly": false,
                                                    "required": false,
                                                    "placeholder": "",
                                                    "maxlength": "",
                                                    "minlength": "",
                                                    "pattern": "",
                                                    "autofocus": false,
                                                    "autocomplete": "",
                                                    "inputmode": ""
                                                },
                                                "label": ""
                                            }]
                                        }]
                                    }]
                                }, {
                                    "class": "Row",
                                    "cssClasses": {
                                        "system": "form-row",
                                        "parent": ""
                                    },
                                    "overrides": {},
                                    "flags": {
                                        "canBeMoved": true,
                                        "canBeDeleted": true,
                                        "canBeDuplicated": true,
                                        "canBeEdited": false,
                                        "canBePackaged": true,
                                        "canBeCopied": true
                                    },
                                    "properties": {
                                        "gutters": true,
                                        "row-horizontal-alignment": "",
                                        "row-vertical-alignment": "",
                                        "row-sm-horizontal-alignment": "",
                                        "row-sm-vertical-alignment": "",
                                        "row-md-horizontal-alignment": "",
                                        "row-md-vertical-alignment": "",
                                        "row-lg-horizontal-alignment": "",
                                        "row-lg-vertical-alignment": "",
                                        "row-xl-horizontal-alignment": "",
                                        "row-xl-vertical-alignment": ""
                                    },
                                    "label": "",
                                    "children": [{
                                        "class": "Column",
                                        "cssClasses": {
                                            "system": " col-md-6 col-xl-6",
                                            "parent": ""
                                        },
                                        "overrides": {
                                            "/": {
                                                "style": "padding:10px;"
                                            }
                                        },
                                        "flags": {
                                            "canBeMoved": true,
                                            "canBeDeleted": true,
                                            "canBeDuplicated": true,
                                            "canBeEdited": false,
                                            "canBePackaged": true,
                                            "canBeCopied": true
                                        },
                                        "properties": {
                                            "colxs": -1,
                                            "colsm": -1,
                                            "colmd": 6,
                                            "collg": -1,
                                            "colxl": 6,
                                            "colxsOffset": -1,
                                            "colsmOffset": -1,
                                            "colmdOffset": -1,
                                            "collgOffset": -1,
                                            "colxlOffset": -1,
                                            "col-valign": "",
                                            "col-order": "",
                                            "col-margin-auto": "",
                                            "col-sm-valign": "",
                                            "col-sm-order": "",
                                            "col-sm-margin-auto": "",
                                            "col-md-valign": "",
                                            "col-md-order": "",
                                            "col-md-margin-auto": "",
                                            "col-lg-valign": "",
                                            "col-lg-order": "",
                                            "col-lg-margin-auto": "",
                                            "col-xl-valign": "",
                                            "col-xl-order": "",
                                            "col-xl-margin-auto": ""
                                        },
                                        "label": "",
                                        "children": [{
                                            "class": "FormGroup",
                                            "cssClasses": {
                                                "system": "form-group",
                                                "parent": ""
                                            },
                                            "overrides": {},
                                            "flags": {
                                                "canBeMoved": true,
                                                "canBeDeleted": true,
                                                "canBeDuplicated": true,
                                                "canBeEdited": false,
                                                "canBePackaged": true,
                                                "canBeCopied": true
                                            },
                                            "properties": {},
                                            "label": "",
                                            "children": [{
                                                "class": "InputText",
                                                "cssClasses": {
                                                    "system": "",
                                                    "parent": ""
                                                },
                                                "overrides": {},
                                                "flags": {
                                                    "canBeMoved": true,
                                                    "canBeDeleted": true,
                                                    "canBeDuplicated": true,
                                                    "canBeEdited": false,
                                                    "canBePackaged": true,
                                                    "canBeCopied": true
                                                },
                                                "properties": {
                                                    "name": "",
                                                    "value": "",
                                                    "disabled": false,
                                                    "readonly": false,
                                                    "required": false,
                                                    "placeholder": "",
                                                    "maxlength": "",
                                                    "minlength": "",
                                                    "pattern": "",
                                                    "autofocus": false,
                                                    "autocomplete": "",
                                                    "inputmode": ""
                                                },
                                                "label": ""
                                            }]
                                        }]
                                    }, {
                                        "class": "Column",
                                        "cssClasses": {
                                            "system": " col-md-6 col-xl-6",
                                            "parent": ""
                                        },
                                        "overrides": {
                                            "/": {
                                                "style": "padding:10px;"
                                            }
                                        },
                                        "flags": {
                                            "canBeMoved": true,
                                            "canBeDeleted": true,
                                            "canBeDuplicated": true,
                                            "canBeEdited": false,
                                            "canBePackaged": true,
                                            "canBeCopied": true
                                        },
                                        "properties": {
                                            "colxs": -1,
                                            "colsm": -1,
                                            "colmd": 6,
                                            "collg": -1,
                                            "colxl": 6,
                                            "colxsOffset": -1,
                                            "colsmOffset": -1,
                                            "colmdOffset": -1,
                                            "collgOffset": -1,
                                            "colxlOffset": -1,
                                            "col-valign": "",
                                            "col-order": "",
                                            "col-margin-auto": "",
                                            "col-sm-valign": "",
                                            "col-sm-order": "",
                                            "col-sm-margin-auto": "",
                                            "col-md-valign": "",
                                            "col-md-order": "",
                                            "col-md-margin-auto": "",
                                            "col-lg-valign": "",
                                            "col-lg-order": "",
                                            "col-lg-margin-auto": "",
                                            "col-xl-valign": "",
                                            "col-xl-order": "",
                                            "col-xl-margin-auto": ""
                                        },
                                        "label": "",
                                        "children": [{
                                            "class": "FormGroup",
                                            "cssClasses": {
                                                "system": "form-group",
                                                "parent": ""
                                            },
                                            "overrides": {},
                                            "flags": {
                                                "canBeMoved": true,
                                                "canBeDeleted": true,
                                                "canBeDuplicated": true,
                                                "canBeEdited": false,
                                                "canBePackaged": true,
                                                "canBeCopied": true
                                            },
                                            "properties": {},
                                            "label": "",
                                            "children": [{
                                                "class": "InputText",
                                                "cssClasses": {
                                                    "system": "",
                                                    "parent": ""
                                                },
                                                "overrides": {},
                                                "flags": {
                                                    "canBeMoved": true,
                                                    "canBeDeleted": true,
                                                    "canBeDuplicated": true,
                                                    "canBeEdited": false,
                                                    "canBePackaged": true,
                                                    "canBeCopied": true
                                                },
                                                "properties": {
                                                    "name": "",
                                                    "value": "",
                                                    "disabled": false,
                                                    "readonly": false,
                                                    "required": false,
                                                    "placeholder": "",
                                                    "maxlength": "",
                                                    "minlength": "",
                                                    "pattern": "",
                                                    "autofocus": false,
                                                    "autocomplete": "",
                                                    "inputmode": ""
                                                },
                                                "label": ""
                                            }]
                                        }]
                                    }]
                                }, {
                                    "class": "Row",
                                    "cssClasses": {
                                        "system": "form-row",
                                        "parent": ""
                                    },
                                    "overrides": {},
                                    "flags": {
                                        "canBeMoved": true,
                                        "canBeDeleted": true,
                                        "canBeDuplicated": true,
                                        "canBeEdited": false,
                                        "canBePackaged": true,
                                        "canBeCopied": true
                                    },
                                    "properties": {
                                        "gutters": true,
                                        "row-horizontal-alignment": "",
                                        "row-vertical-alignment": "",
                                        "row-sm-horizontal-alignment": "",
                                        "row-sm-vertical-alignment": "",
                                        "row-md-horizontal-alignment": "",
                                        "row-md-vertical-alignment": "",
                                        "row-lg-horizontal-alignment": "",
                                        "row-lg-vertical-alignment": "",
                                        "row-xl-horizontal-alignment": "",
                                        "row-xl-vertical-alignment": ""
                                    },
                                    "label": "",
                                    "children": [{
                                        "class": "Column",
                                        "cssClasses": {
                                            "system": " col-md-6 col-xl-12",
                                            "parent": ""
                                        },
                                        "overrides": {
                                            "/": {
                                                "style": "padding:10px;"
                                            }
                                        },
                                        "flags": {
                                            "canBeMoved": true,
                                            "canBeDeleted": true,
                                            "canBeDuplicated": true,
                                            "canBeEdited": false,
                                            "canBePackaged": true,
                                            "canBeCopied": true
                                        },
                                        "properties": {
                                            "colxs": -1,
                                            "colsm": -1,
                                            "colmd": 6,
                                            "collg": -1,
                                            "colxl": 12,
                                            "colxsOffset": -1,
                                            "colsmOffset": -1,
                                            "colmdOffset": -1,
                                            "collgOffset": -1,
                                            "colxlOffset": -1,
                                            "col-valign": "",
                                            "col-order": "",
                                            "col-margin-auto": "",
                                            "col-sm-valign": "",
                                            "col-sm-order": "",
                                            "col-sm-margin-auto": "",
                                            "col-md-valign": "",
                                            "col-md-order": "",
                                            "col-md-margin-auto": "",
                                            "col-lg-valign": "",
                                            "col-lg-order": "",
                                            "col-lg-margin-auto": "",
                                            "col-xl-valign": "",
                                            "col-xl-order": "",
                                            "col-xl-margin-auto": ""
                                        },
                                        "label": "",
                                        "children": [{
                                            "class": "FormGroup",
                                            "cssClasses": {
                                                "system": "form-group",
                                                "parent": ""
                                            },
                                            "overrides": {},
                                            "flags": {
                                                "canBeMoved": true,
                                                "canBeDeleted": true,
                                                "canBeDuplicated": true,
                                                "canBeEdited": false,
                                                "canBePackaged": true,
                                                "canBeCopied": true
                                            },
                                            "properties": {},
                                            "label": "",
                                            "children": [{
                                                "class": "InputTextarea",
                                                "cssClasses": {
                                                    "system": "",
                                                    "parent": ""
                                                },
                                                "overrides": {},
                                                "flags": {
                                                    "canBeMoved": true,
                                                    "canBeDeleted": true,
                                                    "canBeDuplicated": true,
                                                    "canBeEdited": false,
                                                    "canBePackaged": true,
                                                    "canBeCopied": true
                                                },
                                                "properties": {
                                                    "name": "",
                                                    "disabled": false,
                                                    "readonly": false,
                                                    "required": false,
                                                    "textValue": "",
                                                    "placeholder": "",
                                                    "maxlength": "",
                                                    "minlength": "",
                                                    "autofocus": false,
                                                    "autocomplete": "",
                                                    "inputmode": "",
                                                    "rows": "",
                                                    "cols": "",
                                                    "spellcheck": "",
                                                    "wrap": false
                                                },
                                                "label": ""
                                            }]
                                        }]
                                    }]
                                }, {
                                    "class": "Row",
                                    "cssClasses": {
                                        "system": "form-row",
                                        "parent": ""
                                    },
                                    "overrides": {},
                                    "flags": {
                                        "canBeMoved": true,
                                        "canBeDeleted": true,
                                        "canBeDuplicated": true,
                                        "canBeEdited": false,
                                        "canBePackaged": true,
                                        "canBeCopied": true
                                    },
                                    "properties": {
                                        "gutters": true,
                                        "row-horizontal-alignment": "",
                                        "row-vertical-alignment": "",
                                        "row-sm-horizontal-alignment": "",
                                        "row-sm-vertical-alignment": "",
                                        "row-md-horizontal-alignment": "",
                                        "row-md-vertical-alignment": "",
                                        "row-lg-horizontal-alignment": "",
                                        "row-lg-vertical-alignment": "",
                                        "row-xl-horizontal-alignment": "",
                                        "row-xl-vertical-alignment": ""
                                    },
                                    "label": "",
                                    "children": [{
                                        "class": "Column",
                                        "cssClasses": {
                                            "system": " col-md-6 col-xl-12",
                                            "parent": ""
                                        },
                                        "overrides": {
                                            "/": {
                                                "style": "padding:10px;"
                                            }
                                        },
                                        "flags": {
                                            "canBeMoved": true,
                                            "canBeDeleted": true,
                                            "canBeDuplicated": true,
                                            "canBeEdited": false,
                                            "canBePackaged": true,
                                            "canBeCopied": true
                                        },
                                        "properties": {
                                            "colxs": -1,
                                            "colsm": -1,
                                            "colmd": 6,
                                            "collg": -1,
                                            "colxl": 12,
                                            "colxsOffset": -1,
                                            "colsmOffset": -1,
                                            "colmdOffset": -1,
                                            "collgOffset": -1,
                                            "colxlOffset": -1,
                                            "col-valign": "",
                                            "col-order": "",
                                            "col-margin-auto": "",
                                            "col-sm-valign": "",
                                            "col-sm-order": "",
                                            "col-sm-margin-auto": "",
                                            "col-md-valign": "",
                                            "col-md-order": "",
                                            "col-md-margin-auto": "",
                                            "col-lg-valign": "",
                                            "col-lg-order": "",
                                            "col-lg-margin-auto": "",
                                            "col-xl-valign": "",
                                            "col-xl-order": "",
                                            "col-xl-margin-auto": ""
                                        },
                                        "label": "",
                                        "children": [{
                                            "class": "FormGroup",
                                            "cssClasses": {
                                                "system": "form-group",
                                                "parent": ""
                                            },
                                            "overrides": {},
                                            "flags": {
                                                "canBeMoved": true,
                                                "canBeDeleted": true,
                                                "canBeDuplicated": true,
                                                "canBeEdited": false,
                                                "canBePackaged": true,
                                                "canBeCopied": true
                                            },
                                            "properties": {},
                                            "label": "",
                                            "children": [{
                                                "class": "Button",
                                                "cssClasses": {
                                                    "system": "btn btn-primary btn-block",
                                                    "parent": ""
                                                },
                                                "overrides": {},
                                                "flags": {
                                                    "canBeMoved": true,
                                                    "canBeDeleted": true,
                                                    "canBeDuplicated": true,
                                                    "canBeEdited": true,
                                                    "canBePackaged": true,
                                                    "canBeCopied": true
                                                },
                                                "properties": {
                                                    "type": "Button",
                                                    "href": "#",
                                                    "target": "",
                                                    "buttonType": "button",
                                                    "style": "btn-primary",
                                                    "size": "",
                                                    "disabled": false,
                                                    "active": false,
                                                    "block": true,
                                                    "outlined": false
                                                },
                                                "label": "",
                                                "children": [{
                                                    "class": "InlineCharacter",
                                                    "char": "B",
                                                    "bold": false,
                                                    "italic": false,
                                                    "strike": false,
                                                    "underline": false,
                                                    "link": false
                                                }, {
                                                    "class": "InlineCharacter",
                                                    "char": "u",
                                                    "bold": false,
                                                    "italic": false,
                                                    "strike": false,
                                                    "underline": false,
                                                    "link": false
                                                }, {
                                                    "class": "InlineCharacter",
                                                    "char": "t",
                                                    "bold": false,
                                                    "italic": false,
                                                    "strike": false,
                                                    "underline": false,
                                                    "link": false
                                                }, {
                                                    "class": "InlineCharacter",
                                                    "char": "t",
                                                    "bold": false,
                                                    "italic": false,
                                                    "strike": false,
                                                    "underline": false,
                                                    "link": false
                                                }, {
                                                    "class": "InlineCharacter",
                                                    "char": "o",
                                                    "bold": false,
                                                    "italic": false,
                                                    "strike": false,
                                                    "underline": false,
                                                    "link": false
                                                }, {
                                                    "class": "InlineCharacter",
                                                    "char": "n",
                                                    "bold": false,
                                                    "italic": false,
                                                    "strike": false,
                                                    "underline": false,
                                                    "link": false
                                                }]
                                            }]
                                        }]
                                    }]
                                }]
                            }]
                        }]
                    }]
                }]
            },
            "meta": []
        }]
    }
}

}

1 Like

This feature is a must. Everyone is thinking the same. Can someone on the dev team say if they are thinking of doing this?

1 Like

@zerofill Thanks for pointing this out. This looks like a daunting task but I may be able to get some groundwork going on a possible parser that can do this. I've began a github repo and anyone that is able to contribute is free too. However it'll be a few months before any real progress is made.

Repo: https://github.com/kevin2107/BSS-HTML

This is precisely why I have both BSS and Pinegrow. Wish they could combine the best from these two programs into one super website builder.

@zerofill thank you this is perfect! Do you know what compression algorithm is used? I'm writing a java application to convert it now! @kevin2107 Do you mind if I use your python code as a reference? Or do you wish to work with me on this project?

@Soultaker0227

I don't remember... should be able to look at the hex values on a bsdesign file to see though.

@Soultaker0227: I also had the same idea today, because I've a webtempleate and need to convert to bss file... And to code a simple parser is not a problem for me...

@zerofill witch kind of archive is here used? I try with zip and rar, but I don't get it extracted...

OK, I recognized that, after unzipping the file, I got a file with the same filename. This file contains the JSON Code... The archive type is GZip

I renamed the .bstudio extension to .zip and while I was unable to "unzip" it through Windows Explorer, 7-Zip recognized it as a zip file and allowed me to extract the contents.

I understand that it can be difficult to import an entire HTML file created in god knows what format, but what about basic HTML weblayout like

<h1>text</h1>
<p>abc </p>
<p> abc <strong>abc2</strong></p>
<h2>heading2</h2>

with no CSS at all…

Because often times we need to draft the text of our website as a team and then import it later on separate from the design of the site itself… surely this could be manageable at least?

@kevin2107 can your app start with a basic import like that?

Seriously? The thread is a year old and the gitbub is 2 years old.

The status of imports has not changed in the past year. That should have been your main question really. You cannot import HTML and still have editable access via the features of the app. All you can do to import html is to import the HTML file itself and lose all editablity other than manually in the code window, or to create custom code blocks and paste the code there. That is the only way to import any structural code other than CSS, JS or photos. It has pretty much been that way from the start. I don’t expect this is going to change any time soon, but we can hope it will eventually.

In the meantime, truly, if you’re talking about basic text fields how hard can it be to create a page within the app:

  1. Create a blank page
  2. Scan over the original and create the structure needed
  3. Create however many heading and paragraph etc. needed
  4. Copy and paste your text into them
  5. Use the apps Top Editing pane to add special features like Strong, Underline, etc.

Now you have a page that can be edited over and over. Make a page a template for all other pages that will keep your work to a minimum that way.

There are lots of ways this could happen, and the above is just one example of many I’m sure, but it would get your pages into the app and editable within the app rahter than via the app’s text editor for custom code.

Hope you work it out either way, and good luck!

The userPackages file is a minified JSON file so it is easy to manipulate.

If I have custom code that I want as an user component, first I add the custom code to the library.

Then I run a script that convert the custom code to a bss user component and add it to the library. When I restart BSS I have the two components one with the custom code and one as a normal bss component. If I’m happy with the new normal bss component I export it and I have a “real” :smiley: .bscomp file.