Hello, I have been using this app for some time now, so I have some suggestions for improvements.
Colors variables. When working on huge projects I need to maintain same color palette throughout whole project. If I fail to nail colors from the first time, I need to re-change every color in the website. It would be easier if I would be able to make something like color variables for whole project and in CSS where I need color I would write the variable name. For example, in settings or somewhere: variable name - colorBlue, and its value - #5D7794, and in CSS it could be used by writing something like background: $colorBlue. Like there is a way to make colors variables in SASS.
Support for video files. I would like I could import video files in the project, like there is a way to import images.
Integrated Lorem Ipsum generator. When designing an mock-up for a website it's easier to just spam random words. Like every designer is using Lorem Ipsum texts all over the place when designing something. So it would be awesome I would be able to generate any number of random words and place them anywhere where I can put text. There is plugin called Emmet which has this function, you just write lorem, press tab and it will generate default word count text, but if you write like lorem10 and press tab, it would generate 10 random words of lorem ipsum. Easiest way to use that in BS would be in text editing mode, write that lorem and press tab, and it would fill up the text. For example, I would place paragraph or heading inside where I need some placeholding text, write lorem20, press tab and it would generate 20 random lorem ipsum words exactly in there.
+1 on all those suggested as well, and I'd also like to add audio to the video and PDF as well as any other possible file types needed to be importable.
As far as I recall, there were some discussions some time ago that Sass is something they plan to integrate. I don't recall if it was something that would be done along with Bootstrap 4 updates or after that or what, but I'm pretty sure it's in the plans.
Unless I missed the present existence, I would think:
In the “Look and Feel” when you presently create a color, right now you have “Select / Design / Favorites / Library”. It seems like it would be simple for the app to also have the ability to store "used colors" for the project. Then all the user would need to do is edit the desired stored used color(s) and all instances of this color within the project would be globally updated when each is edited. Basically a “Used Colors” tab or palette to store and edit the used colors within the project. This could then also be tied into a $colorVariable / SASS support down the road when implemented as well.
Also, nice to hear about SASS, will be even nicer when it comes to the Boostrap Studio.
I haven't noticed that “Select / Design / Favorites / Library” thing, but now I found it. Still it's not so easy to quickly pick needed colors. But thanks for the tip, I will try to use it.
I created a Project with 3 pages with the same structure and their own CSS color palletes files, but I couldn´t manage inside BSS what color CSS file is associated in each HTML.
In other words, I think it would be useful we have the possibility to combinate diferent CSS files with the HTMLs inside BSS.
Actually it´s easy to create one or more CSS files inside BSS, but all HTMLs use the same CSS files. It´s imposible to choose what HTML use a specific CSS or CSS group files and what HTML doesn´t use another CSS group or file.
@mhcosta It's not a typical thing to utilize separate CSS setups for each page, so I'm thinking this isn't something we're going to see, but don't quote me on that as I am not positive. Most people utilize a uniform setup for their sites so that all pages are familiarly the same looking for various reasons.
What you would normally do when you want to utilize different things on different pages is give the areas separate classes/ID's in order to make the pages have their own setups. If you add an ID to a page's Body tag (or it's container depending on your structure), you can then utilize that ID to create specific looks for that page. You can utilize so many different ways to do this that it isn't practical for me to list this stuff, but using alternate classes and ID's is how you would accomplish this in BSS and many other apps. We're hoping to see a separation of supporting files so we can specifically state which CSS files and JS files etc. go to which page, but for now this would be what you need to do.
You "could" create a different project for each page, but it would be tedious trying to keep all the code the same while only altering the CSS for each page that you want to be different.
There really are other options, but they would all be a tedious amount of work rather than creating the specific classes for those items that will be different on each page. That would really be the best solution for this until we hopefully get the ability to specify our supporting files.
Yes, it´s not common, but in my case I separate the colors in different CSS files, then in each page I have a combination of a format CSS and a especific Color CSS file.
It´s only a suggestion! If you can´t do it, no problem! Thanks!
@mhcosta - you can control this by simply creating different class names in your 1 style sheet to control different colours that are used on each page.
But as you say it's specific to your needs, I just think you are making it harder for yourself to manage
I'm new to Bootstrap Studio, and just test it for two days, as a quick prototyping tools.
I just read about adding scss language in v4.1 this is great great news !
About variables, i manage actualy this probelm using css var and a postcss process after the export, extending the ::root variables of the bootswatch themes.
I just notice that, the @apply rule can't be used in the editor due to it specific declaration type : @apply --my-var.
It could be nice, to suggest these vars when typing in the code editor, like in the chromedev tools … ^^
Definitely would like to see the ability to import files of any type even if they arent directly usable/viewable in the program.
Like the custom code component, except for files, if that makes sense. keeping the dream alive in 2020