Previewing and Exporting Your Designs

Forums Tutorials Previewing and Exporting Your Designs

This topic contains 2 replies, has 3 voices, and was last updated by  Chris Hackwood 1 week, 1 day ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #3284
    Danny Markov
    Bootstrap 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.


    PREVIEW

    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:

    1. Hit the Preview button from the Main toolbar.
    2. In the dialog that is shown, hit Enable Preview and copy one of the URLs.
    3. 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.

    Preview Dialog

    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.


    EXPORTING

    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.

    Export Options

    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!

    #4975
    Specter473
    Member

    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?

    #4986
    Chris Hackwood
    Member
    Valued

    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

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.