January 18, 2017 at 3:17 pm #3284Danny MarkovBootstrap Studio Developer
Bootstrap Studio has two powerful features – Preview and Export, with which you can test your design in real time across multiple browsers, and export your work as a beautiful stand-alone website.
Bootstrap Studio has a powerful feature called Preview. With it, you can open your design in multiple web browsers and devices, and every change you make within the app will be shown instantaneously everywhere. Here is how to start it:
- Hit the Preview button from the Main toolbar.
- In the dialog that is shown, hit Enable Preview and copy one of the URLs.
- Open this URL on the devices/browsers that you wish to test. This URL is only available in your local network and can’t be seen from outside.
Now you can experiment with a design and test it at the same time. No need to switch to a web browser and hit the refresh button, which is a great productivity increase.
In a team setting, Preview is a great tool for collecting feedback from colleagues.
Once you are happy with a design, you can export it into regular HTML+CSS. Just hit the Export button and choose a folder on your computer. Bootstrap Studio will generate a number of files which are a perfect representation of your design.
You can also choose to minify your JS and CSS, or to use CDN versions of jQuery, Bootstrap and the icon fonts for extra performance.
For the technically minded folks, there is also the option for configuring an Export Script. You point it to an executable file (can be a bash script, an exe program or anything else that can be run from a terminal), and it will be run whenever you export your design. You can use it for post processing the resulting code. The export destination path is passed as arg 1.
After you hit the Export button, Bootstrap Studio exports your design as clean and well-structured HTML. It looks as if a professional front end developer had written it by hand!April 19, 2017 at 7:42 pm #4975Specter473Member
It keeps saving as a bs.design file.
I want to further edit the given templates with DOM manipulation (in SublimeText)
This seems convenient for practicing visual while coding. But would defeat the purpose of convenience without being able to extract the work as css files html, js etc.
Copy and pasting from the browser tools would become tedious.
Is there a way to export the file as an html, Css, and JS file?April 19, 2017 at 10:43 pm #4986Chris HackwoodMemberValued
Yes there is, click export and pick a file to save to. The bs.design will get converted into valid HTML along with folders for css / img / js files
You must be logged in to reply to this topic.