Quasar: Responsive text alignment

[rulrok]

Is your feature request related to a problem? Please describe.
Just like on Bootstrap, it'd be handy to have a breakpoint version of each text-{bp}-{left|right|center|justify}.

Describe the solution you'd like
I think something could do the trick.

In the snippet below, text-left, text-right, text-center and text-justify are sm by default and don't need to specify the breakpoint explicitly.

The functions and mixins I've copied from bootstrap and I'm using them tailored on my project for now. I leave as a suggestion.

@import "~quasar/src/css/variables";

// Minimum breakpoint width. Null for the smallest (first) breakpoint.
//
@function breakpoint-min($name, $breakpoints: $sizes) {
  $min: map-get($breakpoints, $name);
  @return if($min != 0, $min, null);
}

// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
// Useful for making responsive utilities.
//
//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    ""  (Returns a blank string)
//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
//    "-sm"
@function breakpoint-infix($name, $breakpoints: $sizes) {
  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
}

// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
// Makes the @content apply to the given breakpoint and wider.
@mixin media-breakpoint-up($name, $breakpoints: $sizes) {
  $min: breakpoint-min($name, $breakpoints);
  @if $min {
    @media (min-width: $min) {
      @content;
    }
  } @else {
    @content;
  }
}

$alignments: ('right', 'left', 'center', 'justify');

@each $breakpoint in map-keys($sizes) {
  @include media-breakpoint-up($breakpoint){
    $infix: breakpoint-infix($breakpoint, $sizes);

    @each $alignment in $alignments {
      .text#{$infix}-#{$alignment} {text-align: #{$alignment} }
    }
  }
}

The generated CSS

.text-right {
     text-align: right;
}
 .text-left {
     text-align: left;
}
 .text-center {
     text-align: center;
}
 .text-justify {
     text-align: justify;
}
 @media (min-width: 600px) {
     .text-sm-right {
         text-align: right;
    }
     .text-sm-left {
         text-align: left;
    }
     .text-sm-center {
         text-align: center;
    }
     .text-sm-justify {
         text-align: justify;
    }
}
 @media (min-width: 1024px) {
     .text-md-right {
         text-align: right;
    }
     .text-md-left {
         text-align: left;
    }
     .text-md-center {
         text-align: center;
    }
     .text-md-justify {
         text-align: justify;
    }
}
 @media (min-width: 1440px) {
     .text-lg-right {
         text-align: right;
    }
     .text-lg-left {
         text-align: left;
    }
     .text-lg-center {
         text-align: center;
    }
     .text-lg-justify {
         text-align: justify;
    }
}
 @media (min-width: 1920px) {
     .text-xl-right {
         text-align: right;
    }
     .text-xl-left {
         text-align: left;
    }
     .text-xl-center {
         text-align: center;
    }
     .text-xl-justify {
         text-align: justify;
    }
}

Describe alternatives you've considered
I've considered styling things using the body-classes functionality, but as stated on documentation:

In order to enable the behavior above, edit your /quasar.conf.js file like below. Please note that this will increase a bit the time for First Meaningful Paint.

I'm trying to be as performant as possible on this project I'm building, so I don't want to go this pathway.

Additional context
Inspired on bootstrap: https://getbootstrap.com/docs/4.0/utilities/text/
Working on a previous project, it was very useful having responsive classes for that because often text alignment changes for mobile/desktop.

[pdanpdan]

Use dynamic class names based on $q.screen sizes. It's much cheaper than defining lots of classes.

[rulrok]

Sorry, but I have to entirely disagree with you @pdanpdan .

It is NOT cheaper; it involves JavaScript and it is actually more costly doing so.

The quasar documentation states so

The Quasar Screen plugin allows you to have a dynamic and responsive UI when dealing with your Javascript code. When possible, it is recommended to use the responsive CSS classes instead, for performance reasons.

Also, I've described considering using the body classes solution, but I've turned away from that for two reasons:

1. Documentation says it potentially increases my First Meaningful Paint time
2. It's much cleaner just having the responsive css class on the element rather than cluttering my style based on the body element class given that it's being applied to text elements which are quite common throughout the design.

Having this css class is not meant to solve one or two local problems, but as a general problem found when designing responsible templates. It's often common to have centered text on mobile designs and left otherwise. That's why bootstrap have them by default.

_Furthermore_, we are only adding 16 additional classes besides the already existing ones. How is using JavaScript _cheaper_ over having them, when doc says to stay away from whenever possible?

[Daemach]

@rulrok You're right. And I need this now. Where do I put your code? I'm using sass so I have an app.sass file I can add it to.

[Daemach]

I switched quasar to scss and this works now. Thanks for providing it.