A software witch relies on a framework witch main idea is the "responsiveness" and the ability to be scaled and to fit to various screens and resolutions, should first of all give the possibility to work with vector graphics, imho.
Thanks for starting this thread! SVGs can be imported as images and used in your designs. The XML of SVGs can be placed in Custom Code and inserted in your document. However it won't be visualized in the program, as CustomCode is cleaned up as a security precaution (it can be seen in the Preview and when exporting).
Or maybe you require some way of visually editing SVGs?
Well, as a graphic designer and not a coder, of course I would like to have some magical software with GUI that will allow me to build complex web-sites without writing a single line of code… Unfortunately, it’s only a dream… Anyway, I don’t think that even in this perfect scenario the web-software should also be a vector graphic editor (as I come from Linux world I follow the UNIX paradigm of “programs that do one thing and do it well”.) But, what I had in mind is actually connect us directly to another thread: https://bootstrapstudio.io/forums/topic/resizing-items/ After all I agree with the answer of “Jo” - “One usually sees these things in sub par builders that the users have no clue about web design and the only way they can create a free or super cheap sub standard website is to use a builder that does every little thing for you. This usually means the website suffers from huge file sizes, huge images that the builder doesn’t resize, only resizes the viewed size and the sites are usually slow and sluggish because it’s not optimized correctly.”
But here’s exactly when comes SVG!
@martin could you maybe add a SVG component in the panel and then on the side panel have some sliders that creates the cool shapes etc?
(did not realise one already existed) https://bootstrapstudio.io/forums/topic/svg-support-2/
Thanks
Offtopic but...
Why is CustomCode cleaned up as a security precaution? Isn't most of the stuff built by the user them self? And couldn't there be an option to disable that?
I use elements with custom tags a lot, and its a pain in the ass to have to either keep 2 presets in the library, with 2 sets of classes, which I have to switch before I test, or convert the tags when the DOM loads in java script.
For example I created a numerical slider, whose tag is <slider>, but in bootstrap studio it has to be
<
div class="slider"> so I can view them properly. Then at when the DOM is ready I convert the tag from div to slider and remove the slider class. Doing it this way, my css has to look like "slider, .slider { ..Stuff }.
I would love you forever Martin if you could get a feature like this implemented, I think this program is so much more then an offline wordpress/wix, and professionals (not saying I am) could really benefit from you guys opening up some of the weirdly locked features.
+1! I would have to agree with LittleRain here. I too believe a lot of the "security" features are aimed at the total novice who really shouldn't even be using this program if they haven't got the skills to start with. I understand the reason for the lock on the default Bootstrap code and have no issues with copying it to my own CSS file, but some of the components themselves need to have that ability as well to allow us to make our own copies of them to be able to edit them.
Also, the ability to add some of the functions to our HTML would also be helpful and we should be able to do this without being treated like 5 year olds that don't know what they are doing which is what this app is starting to make me feel like with all the restrictions.
Give us the ability to turn some of those restrictions off please, those of us that do know what we are doing are well aware that we are responsible for our own websites and I'm sure I'm not the only one that came from using the Code end of Dreamweaver (hate that visual setup in that one) to using this app so I've already done most of the things you have security measures on, and I need those items to be usable, not controlled "for" me for my safety. I'm a big girl and if I mess it up I will have only myself to blame, and since I keep a lot of backups if I do, then I can always go back and try again.
Let us be responsible for our own selves, don't presume to tell us what we can and cannot do with our sites, it's what will lose you customers (and I'm sure it already has with some of the people that used to be around in here a lot when I first came around and they are not hardly ever here anymore).
Open it up! Keep the Bootstrap code locked as long as we can duplicate it to edit it that's fine, but take us off that leash you have us on and let us be creative!
End Rant Sorry for rant, but I'm having some difficulties with using a table sorter script because it won't allow me to add onclick to my HTML and I don't code Javascript/Jquery so I don't know how to get around that. I "should" be able to add that in there, it's my website, I can do it after so what's the difference? The difference is that you make me have to do 5 times the work needed, just because you assume you're saving me from something. :/
Sorry for bad english and late but Bootstrap studio supports it - maybe even authors do not knows that! Here is solution: 1. In body add custom code 2. You need svg deffinitions - please navigate to https://icomoon.io/ for ex. and grab icons which you need and grab the code, below is small example:
<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs> <symbol id="icon-cross" viewBox="0 0 32 32"> <path d="M31.708 25.708c-0-0-0-0-0-0l-9.708-9.708 9.708-9.708c0-0 0-0 0-0 0.105-0.105 0.18-0.227 0.229-0.357 0.133-0.356 0.057-0.771-0.229-1.057l-4.586-4.586c-0.286-0.286-0.702-0.361-1.057-0.229-0.13 0.048-0.252 0.124-0.357 0.228 0 0-0 0-0 0l-9.708 9.708-9.708-9.708c-0-0-0-0-0-0-0.105-0.104-0.227-0.18-0.357-0.228-0.356-0.133-0.771-0.057-1.057 0.229l-4.586 4.586c-0.286 0.286-0.361 0.702-0.229 1.057 0.049 0.13 0.124 0.252 0.229 0.357 0 0 0 0 0 0l9.708 9.708-9.708 9.708c-0 0-0 0-0 0-0.104 0.105-0.18 0.227-0.229 0.357-0.133 0.355-0.057 0.771 0.229 1.057l4.586 4.586c0.286 0.286 0.702 0.361 1.057 0.229 0.13-0.049 0.252-0.124 0.357-0.229 0-0 0-0 0-0l9.708-9.708 9.708 9.708c0 0 0 0 0 0 0.105 0.105 0.227 0.18 0.357 0.229 0.356 0.133 0.771 0.057 1.057-0.229l4.586-4.586c0.286-0.286 0.362-0.702 0.229-1.057-0.049-0.13-0.124-0.252-0.229-0.357z"></path> </symbol> <symbol id="icon-menu" viewBox="0 0 32 32"> <path d="M2 6h28v6h-28zM2 14h28v6h-28zM2 22h28v6h-28z"></path> </symbol> <symbol id="icon-vimeo" viewBox="0 0 32 32"> <path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h26c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3zM26.925 10.625c-0.1 2.25-1.675 5.331-4.719 9.244-3.144 4.087-5.806 6.131-7.981 6.131-1.35 0-2.488-1.244-3.419-3.731-0.625-2.281-1.244-4.563-1.869-6.844-0.688-2.488-1.431-3.731-2.225-3.731-0.175 0-0.781 0.363-1.813 1.088l-1.087-1.4c1.144-1 2.269-2.006 3.375-3.006 1.525-1.313 2.662-2.006 3.425-2.075 1.8-0.175 2.906 1.056 3.325 3.687 0.45 2.844 0.762 4.606 0.938 5.3 0.519 2.356 1.088 3.531 1.712 3.531 0.481 0 1.212-0.762 2.181-2.294s1.488-2.694 1.556-3.494c0.137-1.319-0.381-1.981-1.556-1.981-0.556 0-1.125 0.125-1.712 0.381 1.137-3.719 3.306-5.531 6.512-5.425 2.375 0.069 3.494 1.606 3.356 4.619z"></path> </symbol> <symbol id="icon-instagram" viewBox="0 0 32 32"> <path d="M16 2.881c4.275 0 4.781 0.019 6.462 0.094 1.563 0.069 2.406 0.331 2.969 0.55 0.744 0.288 1.281 0.638 1.837 1.194 0.563 0.563 0.906 1.094 1.2 1.838 0.219 0.563 0.481 1.412 0.55 2.969 0.075 1.688 0.094 2.194 0.094 6.463s-0.019 4.781-0.094 6.463c-0.069 1.563-0.331 2.406-0.55 2.969-0.288 0.744-0.637 1.281-1.194 1.837-0.563 0.563-1.094 0.906-1.837 1.2-0.563 0.219-1.413 0.481-2.969 0.55-1.688 0.075-2.194 0.094-6.463 0.094s-4.781-0.019-6.463-0.094c-1.563-0.069-2.406-0.331-2.969-0.55-0.744-0.288-1.281-0.637-1.838-1.194-0.563-0.563-0.906-1.094-1.2-1.837-0.219-0.563-0.481-1.413-0.55-2.969-0.075-1.688-0.094-2.194-0.094-6.463s0.019-4.781 0.094-6.463c0.069-1.563 0.331-2.406 0.55-2.969 0.288-0.744 0.638-1.281 1.194-1.838 0.563-0.563 1.094-0.906 1.838-1.2 0.563-0.219 1.412-0.481 2.969-0.55 1.681-0.075 2.188-0.094 6.463-0.094zM16 0c-4.344 0-4.887 0.019-6.594 0.094-1.7 0.075-2.869 0.35-3.881 0.744-1.056 0.412-1.95 0.956-2.837 1.85-0.894 0.888-1.438 1.781-1.85 2.831-0.394 1.019-0.669 2.181-0.744 3.881-0.075 1.713-0.094 2.256-0.094 6.6s0.019 4.887 0.094 6.594c0.075 1.7 0.35 2.869 0.744 3.881 0.413 1.056 0.956 1.95 1.85 2.837 0.887 0.887 1.781 1.438 2.831 1.844 1.019 0.394 2.181 0.669 3.881 0.744 1.706 0.075 2.25 0.094 6.594 0.094s4.888-0.019 6.594-0.094c1.7-0.075 2.869-0.35 3.881-0.744 1.050-0.406 1.944-0.956 2.831-1.844s1.438-1.781 1.844-2.831c0.394-1.019 0.669-2.181 0.744-3.881 0.075-1.706 0.094-2.25 0.094-6.594s-0.019-4.887-0.094-6.594c-0.075-1.7-0.35-2.869-0.744-3.881-0.394-1.063-0.938-1.956-1.831-2.844-0.887-0.887-1.781-1.438-2.831-1.844-1.019-0.394-2.181-0.669-3.881-0.744-1.712-0.081-2.256-0.1-6.6-0.1v0z"></path> <path d="M16 7.781c-4.537 0-8.219 3.681-8.219 8.219s3.681 8.219 8.219 8.219 8.219-3.681 8.219-8.219c0-4.537-3.681-8.219-8.219-8.219zM16 21.331c-2.944 0-5.331-2.387-5.331-5.331s2.387-5.331 5.331-5.331c2.944 0 5.331 2.387 5.331 5.331s-2.387 5.331-5.331 5.331z"></path> <path d="M26.462 7.456c0 1.060-0.859 1.919-1.919 1.919s-1.919-0.859-1.919-1.919c0-1.060 0.859-1.919 1.919-1.919s1.919 0.859 1.919 1.919z"></path> </symbol> <symbol id="icon-phone" viewBox="0 0 32 32"> <path d="M22 20c-2 2-2 4-4 4s-4-2-6-4-4-4-4-6 2-2 4-4-4-8-6-8-6 6-6 6c0 4 4.109 12.109 8 16s12 8 16 8c0 0 6-4 6-6s-6-8-8-6z"></path> </symbol> <symbol id="icon-map" viewBox="0 0 32 32"> <path d="M0 6l10-4v24l-10 4z"></path> <path d="M12 1l10 6v23l-10-5z"></path> <path d="M24 7l8-6v24l-8 6z"></path> </symbol> <symbol id="icon-facebook" viewBox="0 0 32 32"> <path d="M29 0h-26c-1.65 0-3 1.35-3 3v26c0 1.65 1.35 3 3 3h13v-14h-4v-4h4v-2c0-3.306 2.694-6 6-6h4v4h-4c-1.1 0-2 0.9-2 2v2h6l-1 4h-5v14h9c1.65 0 3-1.35 3-3v-26c0-1.65-1.35-3-3-3z"></path> </symbol> <symbol id="icon-whatsapp" viewBox="0 0 32 32"> <path fill="#25d366" style="fill: var(--color1, #25d366)" d="M23.331 19.176c-0.401-0.2-2.356-1.156-2.72-1.288-0.364-0.135-0.631-0.2-0.897 0.2-0.263 0.393-1.028 1.285-1.259 1.549-0.233 0.26-0.465 0.28-0.861 0.1-0.4-0.2-1.684-0.62-3.204-1.98-1.184-1.060-1.979-2.36-2.213-2.76-0.232-0.4-0.025-0.62 0.173-0.82 0.181-0.18 0.401-0.46 0.601-0.697 0.195-0.241 0.259-0.401 0.396-0.661 0.133-0.28 0.065-0.5-0.033-0.699-0.1-0.2-0.896-2.16-1.229-2.941-0.32-0.779-0.649-0.68-0.896-0.68-0.229-0.020-0.495-0.020-0.761-0.020s-0.697 0.099-1.063 0.479c-0.364 0.4-1.393 1.36-1.393 3.3s1.427 3.82 1.625 4.1c0.199 0.26 2.807 4.26 6.8 5.98 0.952 0.4 1.693 0.64 2.272 0.839 0.952 0.303 1.82 0.26 2.507 0.161 0.765-0.121 2.356-0.961 2.688-1.901 0.34-0.94 0.34-1.72 0.24-1.9-0.099-0.18-0.36-0.28-0.76-0.46zM16.081 29h-0.021c-2.36 0-4.699-0.64-6.74-1.84l-0.48-0.285-5 1.3 1.34-4.86-0.319-0.5c-1.32-2.101-2.021-4.521-2.021-7.013 0-7.26 5.94-13.18 13.256-13.18 3.539 0 6.86 1.38 9.361 3.88 2.5 2.479 3.879 5.8 3.879 9.32-0.005 7.259-5.947 13.18-13.247 13.18zM27.36 4.599c-3.040-2.939-7.040-4.599-11.3-4.599-8.776 0-15.921 7.112-15.925 15.857 0 2.795 0.732 5.52 2.127 7.927l-2.261 8.216 8.447-2.203c2.328 1.257 4.947 1.925 7.613 1.929h0.008c8.78 0 15.928-7.115 15.932-15.861 0-4.235-1.653-8.22-4.66-11.215z"></path> </symbol> <symbol id="icon-gmail" viewBox="0 0 32 32"> <path fill="#d14836" style="fill: var(--color2, #d14836)" d="M32 6v20c0 1.133-0.867 2-2 2h-2v-18.151l-12 8.617-12-8.617v18.151h-2c-1.135 0-2-0.867-2-2v-20c0-0.567 0.216-1.067 0.575-1.424 0.359-0.363 0.86-0.576 1.425-0.576h0.667l13.333 9.667 13.333-9.667h0.667c0.567 0 1.067 0.216 1.425 0.576 0.36 0.357 0.575 0.857 0.575 1.424z"></path> </symbol> <symbol id="icon-viber" viewBox="0 0 32 32"> <path fill="#665cac" style="fill: var(--color3, #665cac)" d="M15.197 0.003c-2.567 0.035-8.089 0.456-11.179 3.287-2.293 2.28-3.095 5.641-3.188 9.804-0.080 4.147-0.173 11.933 7.333 14.055v3.227c0 0-0.051 1.293 0.803 1.56 1.053 0.333 1.653-0.665 2.653-1.732l1.867-2.107c5.133 0.427 9.067-0.559 9.52-0.705 1.040-0.333 6.908-1.081 7.868-8.869 0.987-8.041-0.48-13.108-3.12-15.401l-0.013-0.003c-0.8-0.733-4-3.067-11.16-3.093 0 0-0.528-0.033-1.384-0.021zM15.287 2.265c0.727-0.004 1.173 0.027 1.173 0.027 6.053 0.013 8.948 1.84 9.628 2.453 2.227 1.905 3.371 6.475 2.533 13.189-0.8 6.507-5.56 6.92-6.44 7.2-0.373 0.12-3.84 0.973-8.203 0.693 0 0-3.252 3.921-4.265 4.935-0.16 0.173-0.347 0.227-0.467 0.2-0.173-0.040-0.227-0.253-0.213-0.547l0.027-5.359c-6.361-1.76-5.988-8.403-5.921-11.869 0.080-3.467 0.733-6.309 2.667-8.229 2.609-2.36 7.3-2.68 9.481-2.693zM15.767 5.732c-0 0-0.001 0-0.001 0-0.22 0-0.399 0.178-0.399 0.399 0 0 0 0 0 0v0c0 0.221 0.179 0.4 0.4 0.4v0c0.043-0.001 0.093-0.001 0.143-0.001 2.034 0 3.88 0.809 5.232 2.123l-0.002-0.002c1.453 1.413 2.161 3.307 2.188 5.787 0 0.221 0.179 0.4 0.4 0.4v0-0.012c0.221 0 0.4-0.179 0.4-0.4v0c0.005-0.109 0.008-0.236 0.008-0.364 0-2.326-0.923-4.436-2.423-5.985l0.002 0.002c-1.587-1.547-3.589-2.347-5.948-2.347zM10.495 6.652c-0.054-0.008-0.116-0.013-0.18-0.013-0.236 0-0.457 0.064-0.646 0.176l0.006-0.003h-0.016c-0.547 0.32-1.051 0.72-1.531 1.253-0.36 0.427-0.561 0.852-0.615 1.265-0.009 0.064-0.014 0.137-0.014 0.212 0 0.182 0.029 0.357 0.084 0.521l-0.003-0.012 0.027 0.013c0.458 1.331 0.998 2.476 1.646 3.549l-0.046-0.082c0.895 1.608 1.922 2.996 3.101 4.237l-0.008-0.009 0.040 0.053 0.053 0.040 0.080 0.080c1.236 1.174 2.628 2.205 4.136 3.053l0.104 0.054c1.76 0.96 2.829 1.413 3.469 1.6v0.013c0.187 0.053 0.357 0.080 0.531 0.080 0.57-0.043 1.079-0.274 1.471-0.631l-0.002 0.002c0.52-0.467 0.933-0.984 1.24-1.531v-0.013c0.307-0.573 0.2-1.121-0.24-1.495-0.845-0.742-1.782-1.421-2.781-2.007l-0.085-0.046c-0.68-0.373-1.373-0.147-1.653 0.227l-0.6 0.759c-0.307 0.373-0.867 0.32-0.867 0.32l-0.016 0.013c-4.16-1.067-5.267-5.279-5.267-5.279s-0.053-0.573 0.333-0.867l0.747-0.6c0.36-0.293 0.613-0.987 0.227-1.667-0.631-1.084-1.31-2.022-2.071-2.887l0.017 0.020c-0.166-0.204-0.399-0.349-0.665-0.399l-0.007-0.001zM16.459 7.839c-0.22 0.001-0.399 0.18-0.399 0.4s0.179 0.4 0.4 0.4c0 0 0.001 0 0.001 0h-0c1.388 0.025 2.636 0.607 3.532 1.532l0.001 0.001c0.75 0.825 1.209 1.926 1.209 3.134 0 0.103-0.003 0.205-0.010 0.306l0.001-0.014c0.001 0.22 0.18 0.399 0.4 0.399 0 0 0 0 0 0v0l0.013 0.016c0 0 0 0 0 0 0.221 0 0.4-0.179 0.4-0.4 0-0 0-0.001 0-0.001v0c0.040-1.587-0.453-2.92-1.427-3.987s-2.333-1.667-4.067-1.787c-0.008-0.001-0.018-0.001-0.028-0.001s-0.020 0-0.029 0.001l0.001-0zM17.112 9.997c-0.004-0-0.008-0-0.012-0-0.225 0-0.407 0.182-0.407 0.408 0 0.221 0.176 0.401 0.395 0.407h0.001c1.32 0.067 1.96 0.733 2.040 2.107 0.007 0.215 0.184 0.387 0.4 0.387 0 0 0 0 0 0h0.013c0.215-0.007 0.388-0.183 0.388-0.4 0-0.009-0-0.019-0.001-0.028l0 0.001c-0.093-1.787-1.067-2.788-2.8-2.881-0.002-0-0.005-0-0.008-0s-0.006 0-0.008 0h0z"></path> </symbol> </defs> </svg>
To use any of icons you need to use custom code again in your design! - ex:
<svg class="icon icon-gmail"><use xlink:href="#icon-gmail"></use></svg>Icons will not be displayed in design, but will show up in preview and of course on hosted page as well.
custom code from step 2, put as first after body.
- this is not great, it would be more frendly to import defs to project structure and use icons from there!