Hello I don't understand why sometimes media-queries are added with min-width and sometimes with max-width. I need everything to be on min-width for making mobile first design.
Thank you.
I've never seen BSS add a max-width media query. Can you describe the exact process you did that made this happen. I will try to reproduce it.
Look at this screencast. It looks like max-width is systematically used for Bootstrap 3. With Bootstrap 4, BSS uses min-width.
https://youtu.be/RQ4-o6bmPvs
@Gem Store that's the right way to do it.
Bootstrap4 is mobile first, so min-width is the way to go. But old bootstrap 3 was not.
Bootstrap didn't invent responsive design. Media queries for mobile first design works for both version 3 and 4. It is only question to implement them in BSS and give users choice to use either mobile first or non mobile first. I haven't started yet Working with Bootstrap 4 because, Drupal doesn't have yet an official library of this version of Bootstrap. So, all this time I do mobile first desing with Bootstrap 3. Nothing impossible there. BSS just has to give choice.
/========== Mobile First Method ==========/
/* Custom, iPhone Retina */ @media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */ @media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */ @media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */ @media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px) {
}
/========== Non-Mobile First Method ==========/
/* Large Devices, Wide Screens */ @media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */ @media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */ @media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */ @media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */ @media only screen and (max-width : 320px) {
}
Officially, Bootstrap 3 is mobile first. This is from official documentation : Mobile first
With Bootstrap 2, we added optional mobile friendly styles for key aspects of the framework. With Bootstrap 3, we've rewritten the project to be mobile friendly from the start. Instead of adding on optional mobile styles, they're baked right into the core. In fact, Bootstrap is mobile first. Mobile first styles can be found throughout the entire library instead of in separate files.
To ensure proper rendering and touch zooming, add the viewport meta tag to your <head>.
https://getbootstrap.com/docs/3.4/css/
Thank you for the suggestion! Max-width queries are indeed used, but only in Bootstrap 3 designs. Bootstrap 4 defaults to mobile first min-width. Instead of building a setting for only for Bootstrap 3, we can do something better - when you create a new media query, we can prepopulate it with the last value you used. This will solve both the min/max width issue and the need to copy paste pixel values if you use a non-standard breakpoint. Would love to hear your thoughts on this.
My Feedback on altering the app for this issue: Don't do it, it will not be productive in getting people to learn the new systems. Yes it's a small change, but it takes 5 seconds to edit a Media Query by hand. If that's what someone wants to do then great, but ... what you add may mess up how it's working for the rest of us. Since I have sites using both 3 and 4, I don't want the values from 3 being added to my 4 and vs. vs. when I swap projects. Now ... having said that, if they are project bound only then that would probably be ok. As long as the minute I change my project it reverts to that project's last use, then that probably would be ok, but truly, it works fine as it is, I don't really see a need to change this to accommodate an old framework version with such a tiny little change. Copy and paste works wonders for this as well.
@Gem Stone: If you're starting a brand new site, why would you do it in Bootstrap 3? I have a handful of sites that the clients don't want to pay to have their sites updated from BS 3 to to BS 4, so they are stuck there, but ... any brand new sites I create are always done in Bootstrap 4 ... why you ask?
Features ... There are so many more features in Bootstrap 4 within BSS that make life so much easier that it is worth the effort to take a day and just go over the changes to see what's different. Took me a while to grasp the Mobile first setup (which by the way, BS 3.3.7 did still not have fully implemented correctly), but once I got it it was like night and day!
Give it a try and check it out, you won't go back to 3, I can promise you that lol. If you're insistent on staying on 3, then you may not get the amount of help here that you expect as most of us users have been following the trend as best as we can. I keep old ones on 3 and new ones on 4 and who knows, I may just opt to redo the 3 ones to 4 just for something to do one day lol. It's really that much better.
it will not be productive in getting people to learn the new systems : productive for whom ? The reason we are using Bootstrap Studio is to make templates which will be used on Drupal which has not yet an official support for Bootstrap 4. So integration of our templates would not be perfect using Bootstrap 4. it takes 5 seconds to edit a Media Query by hand : I don't know if you add media queries only once in your projects but with BSS philosophy, I have to call "add breakpoints" uncountable times per projects and it's too hard for the mind to have both systems in your head, mobile-first and non-mobile-first. If we must follow your philosophy, BSS should simply remove Bootstrap 3. It would make sense. If it should not be removed now, it should work the best way.
What I think is to only have in settings, a checkbox to choose, for Bootstrap 3, either mobile-first or non-mobile-first breakpoint insertion. After that, if for a particular reason we need to manually edit a breakpoint, one will do it. Life is easier that way.
I would rather it stay the same also because I am usually creating a media query when I am at that media point which is how it works now. I dont want to have to use the last media query if I am at a media point and creating one.
I am with Jo and Twinstream on this. Keep the handling of media queries the way it is.
Pretty much every day, people come to the forums requesting changes to Bootstrap Studio to facilitate their particular, specialized workflow. A small number of them are occasionally useful, but most are wildly over the top.
Dear Printninja, what I requested will changed nothing to the way you use BSS. Your reaction would have been understandable if it came from a BSS team member and if what I asked would slightly modify the application and asked for too much times for implementation. As I am not the developer of BSS, I cannot evaluate, according to their programming approach, if this option will be hard to implement. But in my sense, what I asked is logic and is the best way the application should be working. If Bootstrap 3 should still be supported in BSS, it must be the best way. Bootstrap 3 is mobile first but not implemented that way by BSS. If no one should be designing for Bootstrap 3 now, BSS just have to remove it. It's quite logical.
I have no idea what you're going on about. BSS does it in version 3 exactly how it's intended to be. If you want something different, edit it. Simple as that. I don't want to have to edit it on a constant basis just because you want to do things unconventionally within your version. You forget that there is also the issue of ... oh, I had to go run to the store for a half hour and left BSS open and ready to go. When I came back ... I forgot I changed that last one to (insert change here) and now every one I did for the past hour is set that way and now I have to go back and manually change them all..... NO THANKS!
Please don't change this setting for only one person who has ever posted on this forum any need for it. There are dozens of other features that have been asked for for years that have not been implemented yet and should be. I would think many of us would be very upset to see "one" person ask for something that gets changed right away or at all.
I've said all I'm saying here, this conversation is getting too frustrating at this point.
So your problem is your needs first. I do understand you Jo. You are not rational. But you have the right to be like that. I am a developer and I know that some features may take months to be implemented while other would take only few hours. The choices of the development team should not be made according to the fact it is me who asked for it or you. Development is a science and choices are made according to many factors among which the stability of the software after implementation, the time it takes to implement the function, the popularity of the request and others. I have not spoken against any of features you may have asked for. I will not drop BSS because my request may be rejected. I am rational. I made a request, if development team think it is feasible and quickly then accept to do it, I will be happy. Otherwise, as a developer, I will understand all the pressure they have because of their new features list. If you get frustrated for so few things I wonder about your heart health.
@ Gem Stone
If no one should be designing for Bootstrap 3 now, BSS just have to remove it. It’s quite logical.
How is that quite logical? Before Bootstrap 4, all the owners of Bootstrap Studio were building sites with Bootstrap 3. If they removed Bootstrap 3 from the program now, then how would people continue to maintain, edit, and update the thousands of sites they've built with Bootstrap Studio when Bootstrap 3 was the standard?
The program needs to maintain its backwards compatibility.
Before calling someone irrational, consider the fact that Jo, Twinstream, I, and others, have been here in these support forums for years answering questions, solving user's problems, and giving feedback and ideas to the developers. (Jo has literally made thousands of posts!)
So while we may not be part of the official "development team" we have helped guide the program's development, provided the developers with important feedback and ideas that can only be gained from hands-on use of the program hundreds of hours every month, over years, building hundreds (or combined, thousands) of websites with it.
You've been here in the forums for a week. You state you're using BSS to create templates for Drupal in Bootstrap 3 because Drupal doesn't support Bootstrap 4 fully. Well that's an issue you should be taking up with Drupal, don't you think, because Bootstrap 4 has been the standard for building Bootstrap websites since 2017. You are choosing to use an impaired workflow. This is not Bootstrap Studio's fault. Tell Drupal to support Bootstrap 4, and your problem will be solved.
I made a request, if development team think it is feasible and quickly then accept to do it, I will be happy. Otherwise, as a developer, I will understand all the pressure they have because of their new features list.