Has anyone here used Bootstrap Studio in conjunction with Django development? I bought bootstrap studio for some web work before and was wondering if I might be able to use this to help with my Django program.
I'm using a custom export script to add Django template markup to BSS pages. For example,
<div class="item" dj-for="i in items">
<h2 dj-ref="i.name">This is the heading</h2>
<div dj-ref="i.content|markdown">Lorem ipsum dolor sit amet …</div>
</div>
becomes
{% for i in items %}
<div class="item">
<h2>{{ i.name }}</h2>
<div>{{ i.content|markdown }}</div>
</div>
{% endfor %}
This means I get to do design in Bootstrap Studio, with fake page content that looks good in BSS, but it is easy to move from BSS to Django templates where real content from the site will be inserted instead. It was fairly straightforward to write the export script in Python based on BeautifulSoup. Works pretty well for me.
Dear Anslem,
Am very new to the Django development. Its exciting to know that you are integrated Django with Bootstrap in exporting. Kindly share the export script which you used. -Mahesh
Dear anselm, I am looking for your assistance, as soon as possible.
For anyone who is interested I have created a github repo so that we can share and expand on the code. I've added ability to create django if and block statements statements. https://github.com/lingster/django-bootstrap-studio-tools Please raise a ticket in GitHub for future improvements. PRs welcome!
I have been learning how to do something similar in a "testing environment" for integrating a CMS. I am actually using the link component feature of Bootstrap Studio save sections of code to a sub folder called templates which contain each block of code sections on a page I will make to dynamically update. After export, I use B Soup to parse the html templates, remove everything from the page except the block, and update, change, modify, append etc using all the wonderful option of B Soup. The nice thing about this is that any changes to my main project page is linked to the component page which also gets update everytime I export. I have one python script for the main pages that add lines of code to the top of the pages and changes designated links from html to php as well as stripping the code blocks that will be replaced by the php calls. The pages are converted to php extensions also on save.
I also apply beautify to the html or php files so everything comes out looking well formatted and nice looking too.
Soup is amazing.
Wow, this is very interesting !
I'll take a look on your script ! I'm using Flask with Jinja (almost the same template engine).
After the script is run, are the files exported all you need to move into a django project and have going or do you still need to work out the view model and such?
Alternative to blingster repo, https://github.com/AbcSxyZ/bootstrap-studio-to-django-template
Will also move created files inside a django application folder.
@abcsxyz There is an issue with this script, namely, it’s not handling Django’s own view urls very well, i.e. I can’t find in the export script code any template “{% ur”.
I think I fixed it in my fork. There is just a “dj-to-url” attribute that you must put on the tag with the src or href attribute.
I then branch in the code and it outputs the right {{% url “my_page”}} format.
See this SO answer here:
Is this what you’re looking for? I can show you how to run it, requires that you have Python installed but so does Django. I tried compiling ALL to EXE and it simply has a much longer loading time, but you want it to be fast on export from BSS, right? So this is the best way. If DEBUGGER_PATH.txt contains your path to wingdb.exe or if PyCharm’s debug exe is called with similar arguments you could use that. Then dev_bss_to_django.exe will call “[path to wingdb.exe] bss_to_django.py …” so that you can even help me debug this script when you run it from BSS!!!
If there is no DEBUGGER_PATH.txt the exe simply runs python bss_to_django.py
. Anyway see the link for a screenshot. It produces really nice results.
Thanks so much for this reply. It gave me an idea and I ended up implementing a python listener for the Boostrap Studio active page, using this idea, python and Jinja2.
Basically now I can actively render the pages with data from the database to get a live view of the page.
It would be interesting if Bootstrap Studio supported modules, idk if it does so anyone reading, feel free to point it out.
Anyways, thanks.
It supports components. But each component is wrapped in an HTML/Body. So what I do is I design a “component” on my _component_design.html page. I then copy / paste (as HTML) everything except HTML/Body into a e.g. “template_path/my_custom_component.html”. From there once I get “most of the layout” working in BSS, I hand-edit to include all the data. Couldn’t really do this without BSS starting out as it’s too difficult to achieve the nice Bootstrap responsive effects by hand.
I recently fixed a bug in the BootstrapStudioToDjango exporter script, please clone the code and point BSS to the dev_… exe. This loads Python / the export script source. So if it crashes, if you have your DEBUGGER.txt configured (at least this works for Wing Pro for me), if the export script has troubles, it will open up the IDE to the place it had trouble.
It’s a messy code, but I’m currently (probably the only one) using the export script to do some really nice Django / BSS work. The tool has a lot of room for improvement.