Custom CSS at a template level in Meteor

This is a problem that I am going to face often and hence it is probably a good idea for me to figure out the solution.

Problem

I lean towards using standard UI templates for most coding. The traditional method was to dump all the UI files (css or less) into the client directory and they would get picked up and minified automatically.

However, the flexibility is lost here. I seem to often need Template level CSS without necessarily using the main app styling for certain specific pages (mainly landing, marketing, pricing, etc).

Again, my goto approach here is use a template of choice for creating these specific pages without necessarly screwing up the entire application!

Solution

I was able to solve this problem as follows:

• Remove twbs:bootstrap from the meteor app
• Install the npm version of bootstrap using meteor npm install bootstrap@3.3.6 -S
• Copy the bootstrap files from node_modules to imports/client/stylesheets/
• Create a namespaced verison of bootstrap as follows

Create tw-bs.less with the following code:

.tw-bs { 
  @import "./bootstrap/less/bootstrap.less";
}

This less file reference the original bootstrap.less file with a namespace

Create the compiled css file using lessc tw-bs.less tw-bs.css

IMPORTANT: REPLACE .tw-bs html in the generated css file manually to html. It other words, except html tags .. everything else is namespaced with .tw-bs

• Create a namespaced verison of theme styling file as follows

Create main.less with the following code so that it references the root styling file of the theme ... in my case it is style.less.

.tw-bs { 
  @import "./style.less";
}

Compile to main.css using: lessc main.less main.css

• Created a layout file used by the router to leverage this combination of namespaced bootstrap and namespaced theme.

The layout file in my case, used by iron:router is called blank-layout. The code for these files are as following (and self-explanatory):

blank-layout.html

<template name="blankLayout">
  <div class="tw-bs">
    <div class="color-line"></div>

    <!-- Main Wrapper -->
    {{> yield}}
  </div>
</template>

blank-layout.js

import 'bootstrap/dist/js/bootstrap.min.js'

// import 'bootstrap/dist/css/bootstrap.css'
import '/imports/client/stylesheets/tw-bs.css';
import '/imports/client/stylesheets/main.css';


Template.blankLayout.onRendered(function () {
    $('body').addClass('blank');
    $('html').addClass('tw-bs');
});

Template.blankLayout.onDestroyed(function () {
    $('body').removeClass('blank');
});

NOTE: The bootstrap.min.js file is explictly referenced here.
NOTE: The namespaced bootstrap file is explictly referenced here.
NOTE: The namespaced theme file is explictly referenced here.

FINALLY, note that the html tag has .tw-bs added explicitly for the whole plot to work using $('html').addClass('tw-bs');

For other templates that need to leverage a different styling, simply create alternate namespaced versions of HTML and accordingly import the appropriate css and js files. Used a customized router, to leverage the appropriate customized layout file to use the different styling!

My router configuration is as follows for blankLayout and can be modified for the new layout template as required!

Router.configure({
    layoutTemplate: 'blankLayout',
    notFoundTemplate: 'notFound'
});

Good fun! Seems to work fine!

Pardon all grammatical and writing errors ... unedited version for now!

UI-Kits

• Ant Design Pro - Out-of-box UI solution for enterprise applications

References

• jquery ui - css framework for an app with existing stylesheet - Stack Overflow
• Add ability to add classes to · Issue #103 · meteor/meteor
• html - How Do I Add CSS Class to body Element in Meteor? - Stack Overflow
• Using Bootstrap 3 with LESS and Meteor 1.2.1 - Meteor forums
• twbs/bootstrap-sass: Official Sass port of Bootstrap 2 and 3.
• How to Isolate Bootstrap CSS to Avoid Conflicts (using LESS) | Formden.com
• Loading different css files selectively - core - Meteor forums
• In 2019 and Beyond, How To Properly Integrate Bootstrap 4 Theme and External JS Lib Files? - help - Meteor forums
• How to integrate Ant-design with Meteor · Issue #5758 · ant-design/ant-design
• antd-meteor - npm
• reactjs - Ant Design Theme Customization in Meteor React 1.4 - Stack Overflow
• How I improved initial loading time for web apps built with Meteor — Part 1
• Top 5 Frameworks / React UI Component Libraries for 2019