It is best practice to use an external css file, because external css classes make significant difference in the page load time as compared to inline css. When a html page is repeatdly loading by the user, external css files will be cached on browser thus loading becomes faster, as in the case of inline styles it need to be load each time.
So I wonder is there the possibility to export without inline css? How can I export to html in a way that all styling configurations I did with bootstrap studio are written automatically into a css file? Or is there the possibility to deactivate inline css at all, so by default all styling changes are written into a separate file?
Actually it's not that it's not exporting correctly, it's exporting exactly how you have it. What you did wrong was created the styles inline to start with.
When you use the Look & Feel pane to apply styles, you need to use the pulldown menu on there to choose where you want the styles to go. If you don't, then it defaults to "inline". You can choose to have it go to a new class and create it, you can have it go to an already existing class or even a totally different CSS file than your basic custom one.
The key is that you "do" need to choose or it will do inline.
Personally I would rather see a popup asking where you want to apply styles so that those that have no idea that it's doing inline styles can be prompted.
Also, keep in mind that the choice you make will remain until you change it so if you make other changes that you want to go to a different class or file you need to change it again.
Personally I find it easier to just add the classes in the CSS window myself and be done with it. Faster and easier if you already know what you're doing with CSS.
Yes, there's a pulldown menu on the Look & Feel pane near the top. Pull that down and it allows you to choose either a default class file, or a specific class etc.
OK, so when I drag&drop Navbar into body, I can click an element and then choose:
"Style Attribe" which stands for "inline styling"?
"Create CSS Block" which stands for "write CSS into a new file"?
I also have to click each element of the Navbar (e.g. Link, Navbar Brand, Navbar Colapse etc) separately and choose each time "Create CSS Block" right? Couldn't find another way...
Is there also just a checkbox, which I can just click and then it writes ALL style into a separate file??
No, unfortunately when you have already got it set up as inline, you'll need to go through and redo that or add a class and file to tell it to go there. I "think" you can just use the pulldown to choose your Custom file. BSS creates one for you called styles.css, I tend to rename mine to custom.css so it doesn't get mixed up with anything I might import later where that developer named theirs styles or style. Just choose that custom file in that dropdown and it will default that file as your default CSS file for that session. IMPORTANT: it is session based so you will have to choose your default file again next time you run BSS and each time after.
Basically the settings are like so:
If you leave it set at "Style Attribute" it defaults as inline styling.
If you change it to Create CSS Block, it will add a CSS block to your "Default" file automatically. Change that default or it will default to whatever file is first in your list of CSS files in the Design pane. In the CSS window you will need to change the class to whatever name you want it to be at that point.
If you choose an existing class name in the list, it will add the attributes to that class directly.
You can also do this all in the CSS Styles window as well. In the little pulldown at the top that says Create, click that arrow and it allows you to tell it what your default CSS file is.
IMPORTANT: If you do NOT tell it what your default file is, either in the Look & Feel or in the Styles window, it will automatically default to the first file listed in your Styles section of the Design pane, alphabetically. That means you'll be moving classes from one file to another later to fix the fact that you sent them to the wrong file when created.
Good practice to make some automatic things to do when you first start a project.
1. Open the project if working on an existing one and do a Save As and increment a number after the file name. This gives you backups.
2. After that set your default CSS file.
Thank you.
I have now created a new project and then my first step was choosing "Create CSS Block"! I have then drag&drop a paragraph into this project and wanted to change the margin, but nothing was written into the CSS file! I had to configure this for the paragraph element separately and then for all additional element also...
Do I understand it correctly, that I have to do this step for every little element? Each element
I drag I have to configure separately "Create CSS Block" so that it doesn't use inline styling?
How can I set "NO INLINE STYLING" to default, so that I have to configure each element in case I want to use inline styling, because nobody uses inline styling!! Are you from the developers team? What is the reason BSS use inline styling for everything instead of using a css file???
There is no default setting for no inline styling. I truly wish there were. I did make some suggestions in the Ideas forum on this and referenced this post so they could see the issues you are having trying to work this out.
In the meantime, you don't have to do this for every element if .... you apply premade classes to them. I don't know what you're knowledge of CSS is so it's hard for me to know what to tell you. The main things are that with CSS you can define an area, page, col, row, div, etc. with a specific ID and from there you can assign classes to "all" of a specific element within those confines. Or you can create CSS classes that will encompass "all" elements of that type such as P, H1/2/3/etc., LI, and so on. Or you can create classes or that you apply to specific areas such as if you select a Heading, you can then in the Attributes pane add that class to the class box and that Heading will then take on the attributes of that class.
If you are not sure how to do this, I would highly suggest doing some tutorials on CSS so you can get more familiarized with it. There's not going to be any time soon (if ever) that this app is going to be 100% drag and drop and no knowledge needed to style and arrange things. There is knowledge needed in HTML, CSS and Bootstrap itself to really do what is needed to make a site look right and do what you want it to do.
It's definitely worth taking the time for some tutorials or class instruction (online there are many) if you really want your site, or any other you might want to create, to look great using BSS.
There is knowledge needed in HTML, CSS and Bootstrap itself to really
do what is needed to make a site look right and do what you want it to
do.
Yes, I know this, but the funny thing is you are NOT(!) able to edit HTML Code inside BSS, also you are NOT(!) able to do it with an external editor!! You have to export the project as HTML first, then recognize, that all CSS is inline and that there is no easy way to switch between inline/external-css-file and then delete this tool again and use VSCode again :-)
True enough, BSS is a "builder" -- never marketed as an "editor" per se, so you have to compare it to other products that are "builders" -- and just how many (or how few!) of them have any sort of appreciable editing capabilities. Mobirise has to have a separate editing module (and a separate PopUp Builder if you want this capability -- just what is it that makes this so special -- everyone else has the same capability - without charging extra for it!) and that editing module is anything but capable AND it costs more than the LIFETIME version of BSS.
Negative comments I'm sure are appreciated -- there's even a separate forum for Ideas, but one should try to make sure they're reasonable, and informed.
BTW I have no personal stake in the financial business of BSS.
Sorry for the confusion caused by our Look and Feel panel. That panel was developed as an alternative to writing CSS by hand. And the first step to writing CSS is choosing which block your rules will end up in. There are three ways that the app can handle this:
The app creates CSS blocks automatically. This would mean that we have to generate a unique id/class name for the component (think .button-123) and create a CSS block that targets it. This will make your CSS unmaintainable and incomprehensible pretty fast. You will have to edit selectors frequently. You don't want this.
Choose a preexisting CSS block (if there is one). If you have multiple selectors matching an element, we can't choose which one to use as they may affect other elements on the page. If we choose an incorrect selector, you will end up moving your rules manually in the CSS editor. Not to mention that due to CSS specificity, some other class may override the property you are trying to change, so Look & Feel would appear as not working.
Don't do anything automatically and leave it up to the user.
We do the third option currently. Everything else has drawbacks and will result in frustration.
Still, automatically adding everything to inline style is not optimal. Maybe the best solution is to have an export option that automatically extracts all inline styles to a separate stylesheet for people who need it.
An enticing idea Martin. Would that then convert the inline to classes? Or is the separate stylesheet just for the use of finding all the inline styling to fix?
Maybe a way to combat the possibility of overwriting someone's existing classes or id's (basically in the case of the app somehow naming something the same as the person named something) would be to append all classes with "bss-". This is if it were converting the inline to actual classes.
@mathiasbaer: Actually that's not totally true. Although you cannot "edit" the code in the HTML, you have full view of all CSS that is currently connected to every single component that you select. That means, if you don't see your changes there, they are not in the CSS. The Style window is a very powerful window for CSS viewing, editing and managing. That's why I suggested you get more training if you aren't versed in it already. No offense meant there if you are trained already, just I have no way to know what you know is all.
Every time you click any component in a project, the Style window adjusts to show all classes and ID's that are connected to it. Everything from Bootstraps default to all your own custom classes will show up there.
In actuality as well, logic does hint right off the bat that if you did "not" assign a class and file to the styles, how would the program know where you wanted it and what you wanted to name it? Any good web developer knows that you will always need to have a custom CSS file to put your custom styles in and that you should think on your naming processes so that your class and ID names are logical and easy to find as well as practical to the component. I'm sure that's why it's set up the way it is, because the app would have to assign some pretty generic names to things (Hence my suggestion on the "bss-" prefix in my previous post).
Anyways, all the key clues and information you need to make sure things are the way they should be "before" exporting are there, you just need to learn how to use the app and not expect yourself to just know how it all works without practicing to learn it's features. Go through the tutorials both text and videos. Some are old for sure but they do still touch much on the basics of the app.
I have never needed to edit the HTML that BSS creates. On occasion, I've added a bit of my own via the custom code component, which does the job nicely.
Inline styling is generally frowned upon because it can slow page load, and it can make it difficult for someone unfamiliar with the site to edit it in the future. Also, if it's a very large site, you don't want to be styling every component differently, and end up with a site that has no uniformity between pages. And, of course, you lose the benefits of the cascade.
However, for a small site that only you will be editing, used sparingly, I don't see anything wrong with an occasional inline style for a unique component that will not appear anywhere else.
i'm trying to update this to be a little more accurate and clear. to get this done (and it IS tedious AF) just do the following:
1) from the Styles tab on the bottom right, click the DOWN ARROW (not the Create Button, the arrow beside it)
2) choose styles.css. this is there by default. you can rename it if you like (i recommend doing so so as not to conflict with other imported stuff)
- you will see below that a new empty body tag will appear and in the bottom right of that new block, you should see styles.css in grey text.
3) now go to the Appearance tab on the right pane and look for the Style Attribute dropdown at the very top. make sure Body is highlighted in blue just above it.
4) click on Style Attribute and choose the body from the list. again, you'll see styles.css in grey beneath it.
5) any CSS changes will now be written to this file.
now. EVERYTIME YOU ADD A NEW ELEMENT YOU HAVE TO DO THIS TAPDANCE. added a Navbar? you have to create a CSS block in the Styles tab and then set it in the Attributes tab. added a button? you have to create a CSS block in the Styles tab and then set it in the Attributes tab. for. every. goddamn. thing.
why this isn't a default switch i cannot comprehend. it completely ignores standard practice of having CSS in an external file. inline styling is not only "frowned upon", it's flat out BAD. were it not for this single thing, this would be a crazy powerhouse tool. it's because of this, i've literally stopped using it because despite being a great builder, it exports horribly bad HTML. and the inline CSS is the reason. most unfortunate.
anyway. i had a couple people ask me about this and so after reading this confusing post, i wanted to update it to be accuracte and clear. it otherwise misleads you into thinking this is a 'do once and done' thing. it isn't. not at all. not even remotely.
When I build a website in BSS, I usually have my styles.css file open (and maybe one or two other CSS files.) When I add a new element that requires something other than the default styling, I just create a new CSS class and write my rules directly in the Styles panel. I never use the "Style Attribute" dropdown menu because that WOULD be tedious and time consuming.
There's more than one way to do things in BSS. If I can't modify a component through the Options panel, or by adding a Bootstrap helper class in the Attributes panel, I just hand write the CSS in the Styles panel. Let's say I wanted a particular paragraph of text on a page to be in a unique font, with a unique size, weight and letter spacing. I would never add the text component, click the paragraph, go to the attribute panel, change the font size, font family, weight and spacing and then click the "Style Attribute" dropdown and choose "create CSS Block." Nor would I ever use inline styling. I would simply create a new class in my CSS file, write out the rules (the styling I desired), and then add that class to the component via the attributes panel.
I presume this is how most seasoned developers build websites in BSS? Maybe I'm wrong?
I see the method of styling with the "Style Attribute" dropdown menu more as catering to new people who don't know how to write CSS, and are forced to use the Appearance panel to do their styling. Honestly, I almost never use the Appearance panel for anything other than adding new font families, or maybe to quickly check the dimensions of a component.
@iansebryk You can easily do this by using the CSS file itself instead of the styles tab if that is how you want to be sure it works right. I hardly ever use the Look and Feel tab for editing my CSS files, but I like coding so ... yeah lol.
BUT ... you know what, they changed the Options pane setup and now the Look and Feel is called Appearance, and I cannot find a way to put the CSS file in there anywhere at all that I want my classes to default to. It keeps choosing whatever it wants or the last one I used or installed most likely. I'll see if I can find something out on this by posting a bug and hopefully someone can enlighten us here as it isn't supposed to be anywhere near as hard as what you are saying.
You "should" be able to set the CSS file you want to use and then anything you create from there will go there in new classes you create in the Appearance pane. That usually won't change until you restart the program and you just set that page again and you are supposed to be good to go ... something missing there I think. I'll post back here when I find out (or you can if you see it first).
@Printninja I'm with you on the coding it by hand too. I find it much easier to manage it that way than having to click a ton of settings all over the place. Easier to keep track of what I'm doing when I do it by hand myself. Hence why I didn't notice that tab even changed LOL.