Sorting Media Queries automatically

Ideas
1

This is both a feature-request for future version of BSS and a bug from the current version. Media Queries ordering in a CSS file matter and this is so annoying to me. Let me show you with an example:

// This is MD screens and above
@media (min-width 576px)
.my_style {
with: 200px;
}

// This is LG screens and above
@media (min-width 992px)
.my_style {
with: 300px;
}

// This is for XS screens (by default since Bootstrap uses a mobile-first approach)
.my_style {
with: 100px;
}

The code above won't work correctly since LG media query should go above MD query. We either need a way to manually sort the styles (drag & drop or some kind of arrows inside the style editor) or let BSS to sort them automatically based on the media queries scheme.

Thanks in advance!

2

The default media queries will already be in the correct order, but if you add your own media queries, you then must reorder them manually by opening your CSS file (or click the name of your CSS file that is greyed out dark to the right bottom of each of your custom classes in the main CSS window (default window). You can then drag those classes up and down the page to reorder them the page by finding the little up/down arrrows to the left of the 3 dots that give you the menu for each class. Mouse over the arrows there and grab them and you will be able to drag and drop them where you want them.

I'm going to take a guess here that since the devs aren't giving us any love to our custom CSS files for upgrading from BSS 3 to 4, they are probably not going to give us any love for automatically reordering anything in our custom files either, so we'll be stuck with it this way.

The real issue here isn't that we can't reorder them, since we can. The real issue is that they reorder "backwards" in our custom files in order to work. Figure that one out, took me forever to understand that it was backwards! In the default file you will see them going from small to large, but in the custom file they need to go from large to small, that's not right man! lol, but that is how it seems to work. Not sure why it's like that, would love it to make things work the same between default and custom CSS files.

3

css and sass will probably be editable via a linked external editor.

So as soon as Martin allows the external editing for CSS, just use Atom with beautify and one of the many css-sort plugin (ie. https://atom.io/packages/search?utf8=%E2%9C%93&q=css+sort&commit=Search) and of course all emmet, linter, autocomplete, color picker etc. feature you want.

4

Thanks so much Jo, as you just said looks like in the realtime-style-editor everything is sort reversed :-S By opening the entire CSS you are allowed to re-order styles using the right-side arrows. Thanks again, you made my day!

5

Media querys seem to work fine mobile up for a custom css file for me ? I am confused by your post Jo. I am doing the same order a style.css.

6

YW mvillar83, glad it helped you. Thanks @Marrco for your input too, I didn't realize they were even working on that, good to hear!

@Twinstream: That's interesting if you're able to do it so they are ordered the same as the default CSS files are. I wonder what is different between us? I'm on an iMac, are you on Mac or Windows? Might be a version issue?

7

@Jo: I think it really does not matter except for the logic of mobile up is that the smallest media query should come first because of the preferred way of parsing css stylesheets for mobile is from smaller to larger media queries.

You see this on desktop mode where all the mobile up css is negated until the desktop css is reached.

The mobile unit comes to the first true css media statement and then stops. Easy on mobile even though its a few milliseconds. I suppose on huge styesheets it would become more obvious but probably still insignificant since adding one picture can increase loading 100 fold.

8

Just to make sure I understand the topic, its not that the media query order effects how the media queries work, it just for beautification purposes and coding it in the order of mobile up which Bootstrap 4 has switched to from Bootstrap 3.

9

It absolutely matters which order the media queries are in. If they are put in in the wrong order they will not work correctly. Play with that a bit and you'll see what I mean :)

10

I would agree, that analysis I gave of the topic was worded incorrectly. The order does matter. I still think the original poster is incorrect though as both the MD and LG should go below the XS in that order and not above. (unless I am having one of those days....)

That would be how mobile up css works.

11

One thing to keep in mind here when you're doing Media Queries in your custom CSS file. You control it completely as to where you put it when you are first creating it. My way is usually to duplicate the original and make the media queries from there and put them in the correct order from the start. Media queries are easily added and removed using the right little 3 dot button menu so you can:

  • change your screen size to the size you want to add the Media Query to, using the screen size buttons at the top right Then
  • duplicate a class and add a media query Or
  • duplicate a current Media Query class
  • remove the class
  • then add a Media query and it will automatically be the correct one.

This way you don't have to manually change the text yourself. :)

12

This is an example of mobile first in the way that CSS inheritance works

// mobile first
.container {
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}

// overrides mobile first
@media (min-width: 576px) {
  .container {
    max-width: 540px;
  }
}

// overrides previous
@media (min-width: 768px) {
  .container {
    max-width: 720px;
  }
}

// overrides previous
@media (min-width: 992px) {
  .container {
    max-width: 960px;
  }
}

// overrides previous
@media (min-width: 1200px) {
  .container {
    max-width: 1140px;
  }
}

Your mobile first CSS should be first as if you didn't care about other screen sizes, then you build to the "expansion" of the sites design.

What ever came last should be last to override the previous as is the purpose of CSS inheritance.

Saj

13

I spent many frustrating hours, trying to work out why my media queries would not work. Eventually I found that the order that Boostrap studio displays the queries, was different to the order in the styles file. You have to open the styles file and check that the order is correct. The display seems to get out of sync with the css file. This needs urgent attention.

It would also be really nice if you could change the order of the css media queries with a up and down arrow or a menu item on same menu used to create an item.

I am using the latest version.

14

My apologies I see there are arrows that can be used to move the css queries up and down in the display.

15

OK now I see why I missed the up and down arrows for changing order in css. They only appear when you open the styles.css file. Can they also be added to the styles editor for an item style?

16

TL;DR - Unfortunately, it is not possible to reorder blocks in the Styles tab.

The Styles tab shows all the CSS blocks (from all your css files) for the current component ordered by priority. Keeping this in mind, unfortunately it would be virtually impossible to add the ability to reorder them there.

Let's say you see this in the Styles tab:

.btn { // from buttons.css
    background-color: blue;
}

.btn { // from forms.css
    background-color: green;
}

In this case, the button is blue, because the buttons.css file is included after the forms.css file. In order for the second block to take priority, we would either have to a) change the include order of their respectful .css files or b) move the second block from forms.css to buttons.css after the first block. Neither of those is a thing the app should be doing automatically, hence neither is a viable option.

Even if we only consider blocks from the same file, a simple reordering wouldn't work for prioritizing a block over another.

For example, say in styles.css you have:

.description {
    font-size: 1rem;
}

p.description {
    font-size: 1.2rem;
}

Now in the Styles tab p.description would be above .description. But even if we changed their order in styles.css, p.description would still be shown before .description, as it has higher priority.