Use of CSS Helper Class

What are common classes, helper classes, and utility classes in CSS?

basically:

1. utility AND HELPERS means minimizing, CSS properties like

.m-0{
  margin: 0;
}
//or
.items-center{
  align-items:center;
}

2. Common classes, the classes that have the same properties used too much like

.clearfix:after 
{
    clear:both;
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
}

read more at

1. How Writing CSS Helper Classes Improved My Productivity
2. CSS - common classes

Vuetify Breakpoint vs CSS Helper Class

CSS helper class relies purely on the browser and its processing of media queries.
I would bet it's much faster than a piece of javascript which will be always behind v-if.

Moreover, if you really need to use a piece of javascript to make some element visible or hidden, in Vue it's preferred to use v-show (it uses a display property of the element instead of adding/removing from DOM as v-if does). See for spec details.

Use a helper to set a css class

You're trying to inject spacebars template markup directly into the DOM but meteor-blaze wants to use spacebars to build the DOM. It doesn't watch the DOM for arbitrary changes and then make template substitutions inside of it!

You can instead use Meteor's reactivity to automatically insert new items into the DOM for you based on changes to the underlying data. In your case it looks like you're trying to show the details of a message that's been clicked on. You probably have a template event handler already to catch the click. In that template handler you can set a Session variable which indicates which message is currently selected and then use that Session variable inside the helper that renders the message details.

For example:

<template name="inbox">
  <div class="searchmessages">
    <input type="text" name="searchmessages" id="searchmessages" placeholder="   any word / any date">
  </div>
  <div class="row">

    <div class="col-xs-4 l-O list_messages">
      <div id="gridreceived" class="gridmessages">
        {{#each incoming_all}}
          <div id="{{_id}}" class="item {{readornot}}">
            // render summary of each message
          </div>
        {{/each}}
      </div>
    <div class="grid_nomatch">{{grid_noresult}}</div>

    {{#with selectedMessage}}
      <div id="conversation_details" class="col-xs-8" media="print">
        // render selected message details
      </div>
    {{/with}}
  </div>
</template>

Your js:

Template.inbox.events({
  'click .item'(ev) {
    Session.set('selectedMessageId',this._id);
  }
});

Template.inbox.helpers({
  selectedMessage() {
    return Messages.findOne(Session.get('selectedMessageId'));
  }
});

Now to your follow-up question about how to reactively style an element. Let's say your message* object has aisStarredboolean key. In the message detail section we've set the data context using{{#with currentMessage}}` so any key of the current message can be used directly in our spacebars template. Where you are displaying the message details you can do:

<div id="controls"">
    <i id="idcont" class="{{#if isStarred}}starred{{/if}}"></i>
</div>

Depending on whether or not the message is starred this will render as class="" or class="starred".

Should I use Bootstrap for helper classes alongside Angular Material for components?

Yes, I regularly use Angular Material for its components and Bootstrap for layout. Note that you should use @ng-bootstrap/ng-bootstrap since normal Bootstrap requires jQuery.

Here's an example of how I mix the two together:

/*-----------------------------------------------
|   Bootstrap 4 Setup
-----------------------------------------------*/
@import '~bootstrap/scss/functions';

// My custom Bootstrap overrides
@import 'theme/variables';

/*-----------------------------------------------
|   Bootstrap 4 Stylesheets
|   Comment out unused stylesheets
-----------------------------------------------*/
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/functions';
@import '~bootstrap/scss/variables';
@import '~bootstrap/scss/mixins';
@import '~bootstrap/scss/root';
@import '~bootstrap/scss/reboot';
@import '~bootstrap/scss/type';
@import '~bootstrap/scss/images';
@import '~bootstrap/scss/code';
@import '~bootstrap/scss/grid';
@import '~bootstrap/scss/tables';
@import '~bootstrap/scss/forms';
@import '~bootstrap/scss/buttons';
@import '~bootstrap/scss/transitions';
@import '~bootstrap/scss/dropdown';
@import '~bootstrap/scss/button-group';
@import '~bootstrap/scss/input-group';
@import '~bootstrap/scss/custom-forms';
@import '~bootstrap/scss/nav';
@import '~bootstrap/scss/navbar';
@import '~bootstrap/scss/card';
@import '~bootstrap/scss/breadcrumb';
@import '~bootstrap/scss/pagination';
@import '~bootstrap/scss/badge';
@import '~bootstrap/scss/jumbotron';
@import '~bootstrap/scss/alert';
@import '~bootstrap/scss/progress';
@import '~bootstrap/scss/media';
@import '~bootstrap/scss/list-group';
@import '~bootstrap/scss/close';
@import '~bootstrap/scss/toasts';
@import '~bootstrap/scss/modal';
@import '~bootstrap/scss/tooltip';
@import '~bootstrap/scss/popover';
@import '~bootstrap/scss/carousel';
@import '~bootstrap/scss/spinners';
@import '~bootstrap/scss/utilities';
@import '~bootstrap/scss/print';

/**
Angular custom theme
 */
@import '~@angular/material/theming';

@include mat-core();

$md-primary: (
        50 : #e6effc,
        100 : #c0d7f7,
        200 : #96bdf2,
        300 : #6ba3ed,
        400 : #4c8fe9,
        500 : #2c7be5,
        600 : #2773e2,
        700 : #2168de,
        800 : #1b5eda,
        900 : #104bd3,
        A100 : #ffffff,
        A200 : #cedbff,
        A400 : #9bb5ff,
        A700 : #81a2ff,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$md-warning: (
        50 : #fef0e8,
        100 : #fcd9c5,
        200 : #fac09f,
        300 : #f8a678,
        400 : #f7935b,
        500 : #f5803e,
        600 : #f47838,
        700 : #f26d30,
        800 : #f06328,
        900 : #ee501b,
        A100 : #ffffff,
        A200 : #fff2ee,
        A400 : #ffcabb,
        A700 : #ffb6a1,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #000000,
                600 : #000000,
                700 : #000000,
                800 : #000000,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$md-danger: (
        50 : #fce7eb,
        100 : #f8c3cd,
        200 : #f39bab,
        300 : #ee7389,
        400 : #ea5570,
        500 : #e63757,
        600 : #e3314f,
        700 : #df2a46,
        800 : #db233c,
        900 : #d5162c,
        A100 : #ffffff,
        A200 : #ffd3d7,
        A400 : #ffa0a8,
        A700 : #ff8691,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$md-secondary: (
        50 : #eef0f2,
        100 : #d5d9df,
        200 : #bac0ca,
        300 : #9ea7b4,
        400 : #8994a4,
        500 : #748194,
        600 : #6c798c,
        700 : #616e81,
        800 : #576477,
        900 : #445165,
        A100 : #c1d9ff,
        A200 : #8ebaff,
        A400 : #5b9cff,
        A700 : #418cff,
        contrast: (
                50 : #000000,
                100 : #000000,
                200 : #000000,
                300 : #000000,
                400 : #000000,
                500 : #ffffff,
                600 : #ffffff,
                700 : #ffffff,
                800 : #ffffff,
                900 : #ffffff,
                A100 : #000000,
                A200 : #000000,
                A400 : #000000,
                A700 : #000000,
        )
);

$default-theme-primary: mat-palette($md-primary, 500, 100, 900);
$default-theme-accent: mat-palette($md-warning, 800, 300, 200);
$default-theme-warn: mat-palette($md-danger, A700);

// create theme (use mat-dark-theme for themes with dark backgrounds)
$default-theme: mat-light-theme(
                $default-theme-primary,
                $default-theme-accent,
                $default-theme-warn
);

$custom-typography: mat-typography-config(
        $font-family: $font-family-sans-serif,
        $subheading-1: mat-typography-level(19.2px, $headings-line-height, $headings-font-weight),
        $subheading-2: mat-typography-level(27.648px, $headings-line-height, $headings-font-weight),
        $headline: mat-typography-level(39.8131px, 24px, $headings-font-weight),
        $title: mat-typography-level(33.1776px, 24px, $headings-font-weight),
        $body-2: mat-typography-level(16px, 24px, 500),
        $body-1: mat-typography-level(16px, 20px, 400),
        $caption: mat-typography-level(14px, 20px, 400),
        $button: mat-typography-level(16px, 14px, 500)
);

@include angular-material-theme($default-theme);
@include angular-material-typography($custom-typography);

/**
Custom theme files here
 */

---

Related Topics