Sorting Media Queries automatically

Forums Ideas Sorting Media Queries automatically

This topic contains 15 replies, has 7 voices, and was last updated by  Gabriela Pavlova 2 weeks ago.

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #12882
    mvillar83
    Member

    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!

    #12885
    Jo
    Member

    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.

    #12888
    marrco
    Member
    Valued

    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.

    #12890
    mvillar83
    Member

    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!

    #12891
    Twinstream
    Member

    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.

    #12894
    Jo
    Member

    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?

    #12895
    Twinstream
    Member

    @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.

    #12896
    Twinstream
    Member

    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.

    #12898
    Jo
    Member

    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 🙂

    #12901
    Twinstream
    Member

    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.

    #12904
    Jo
    Member

    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. 🙂

    #13548
    Saj
    Member
    Valued

    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

    #13577
    fletch
    Member

    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.

    #13580
    fletch
    Member

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

    #13582
    fletch
    Member

    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?

Viewing 15 posts - 1 through 15 (of 16 total)

You must be logged in to reply to this topic.