I've been rebuilding a site that uses bootstrap to implement responsive web pages -- i.e., web pages that resize and reconfigure themselves to look good on all different devices. Was trying to use certain features and realized that bootstrap's latest version (4.x) is quite different than 3.x. A friend also said "i think the long, slow decline for bootstrap has begun." I was, admittedly, quite chagrined to hear that. He claimed that CSS Grid and Flexbox do everything we need these days and I was further chagrined that I am in no ways familiar with these newer(?) technologies. I checked Google Trends and it would indeed appear that mentions of bootstrap are declining.

What is everyone using for UI design these days? Can we initiate a pro/con discussion of the available options?

    Thank you, Weedpacket. I also avoid UI work. I decided long ago that it's pretty thankless work, mostly because of the subjectivity involved. The explosion of mobile devices looked like an insurmountable problem for awhile, too. I'm glad to see these tools and new design paradigms filling the gap.

      Two old people arguing next to an iMac with Photoshop? 😃 😃 😉

        Yeah, I'd rather write SQL than CSS, but I discovered CSS Grid within the past year, and found it pretty cool for use with media types in CSS to do some decent responsive designs without a lick of JavaScript being needed -- which I find to be a huge bonus, personally. 🙂 If you build your site with a mobile-first mentality, then even if they're using some antiquated browser, it will still be usable if not as "pretty" as you intended in those edge cases. I think this was the video that inspired me to look into it:

        https://www.youtube.com/watch?v=7kVeCqQCxlk&t=18s

        CSS grid is awesome, but older browsers do still have issues with it. Where autoprefixers help quite a bit, they sometimes can't go all the way. For instance, gulp-autoprefixer successfully adds the IE11 prefixes to grid as necessary, however it runs into problems when you use grid-template-areas with media queries. It won't (as far as I have seen in my use of it) recalculate the row/column span of the template area, so you have to redefine it at every break. Example:

        .grid{
    display: grid;
    grid-template-columns: 1fr 3fr 2fr 1fr;
    grid-template-areas:
      "header header header header"
      ". content sidebar ."
      "ad footer footer footer";
      @media screen and (max-width: 900px){
          grid-template-columns: 3fr 1fr;
          grid-template-areas:
             "header header"
             "content sidebar"
             "ad ad"
             "footer footer";
        }
}
.main{
    grid-area: content;
}

        The unfortunate part is that with the above example because gulp-autoprefix transpiles the grid-template-areas to basic column/row definitions, it doesn't go back and recalculate the new start and stop values of the template area. This means that you'll have to create a media query in the .main definition in order redefine the grid template area as 'content' - exactly as it was already defined. But, because the transpiler is converting the areas to row/grid values, now it'll work properly. If you're OK with doing the extra work, don't have to worry about IE11, or find a module that does this - at which point please let me know - then grid id totally do-able now.

        Personally, I do a lot of front-end work as well as back-end and I have to support IE11; to me that's a lot of extra typing that I can forget to do on every site, so I use flexbox which is handled well by gulp-autoprefixer even through media queries.

          NogDog

          'not as "pretty" as you intended'

          And therein lies the rub. Pixel-perfect PDFs are the design spec, designed by someone who's already been on SS retirement for most of this century.

            dalecosp

            Well, actually, they can still be pixel-perfect -- just it will be the mobile layout pixel-perfect being displayed on a bigger screen when a non-supporting browser is used.

                all this novation slow down performans under old browsers...

                  Write a Reply...