TACTIC Open Source
4.8 Bootstrap Material Design CSS - Printable Version

+- TACTIC Open Source (http://forum.southpawtech.com)
+-- Forum: TACTIC Open Source (http://forum.southpawtech.com/forumdisplay.php?fid=3)
+--- Forum: TACTIC Discussion (http://forum.southpawtech.com/forumdisplay.php?fid=4)
+--- Thread: 4.8 Bootstrap Material Design CSS (/showthread.php?tid=110)

4.8 Bootstrap Material Design CSS - Celton McGrath - 05-07-2020

Hey guys,

I originally generated the CSS for 4.8 Bootstrap Material Design using SASS and source code from this repository:


In this commit, you can see that I made modifications for TACTIC 4.8

(This handled colours, checkbox sizes, and changed the button look.)

I would recommend you use this SASS repo to move forward. 

If that is something you are interested in, let's come up with a process.



RE: 4.8 Bootstrap Material Design CSS - remkonoteboom - 05-07-2020

How is this related to this file:


Does it replace it or is it complementary to it?

RE: 4.8 Bootstrap Material Design CSS - Celton McGrath - 05-08-2020

Using the sass command

ie. > sass <input file scss file> <output css file>

I generated the css file that was used in the proprietary product.

I assume that was the origin of this file:

This is why the "--primary" variable is blue, and not teal. Note that this blue is not the same as the standard bootstrap 4 blue.

Last I checked, the proprietary product is using a custom css file and custom palette colours.

However, this was NOT the intended final implementation.

What would be ideal IMHO is that there is a common css for all themes (except DARK) that doesn't have any colour overrides.
Then the palette class defines custom TACTIC colour variables (ie. color1, color2, background1 , etc) AND overrides the "--primary" variable.

To make this happen I just need to regenerate the css file without colour overrides, and add the ability to override primary in Palette.

Let me know if you want to do this.

On the other hand, the DARK theme is tricky since our friends at Bootstrap Material Design haven't implemented it yet, even though a DARK theme is specified by standard Material Design.
However, I think it's entirely possible do it ourselves, since we already colour backgrounds using TACTIC Palette variables

RE: 4.8 Bootstrap Material Design CSS - Celton McGrath - 05-08-2020

Actually, I now remember why I created a custom CSS and custom palette colours set. It's not so simple to override the --primary colour, since various shades of it are generated by the SCSS, and hardcoded through the Boostrap Material Design css.

I need to think about the best way to do this! The only option on my mind right now is a custom generated CSS for all themes, but not doesn't allow for easy custom theming using Palette Sad

RE: 4.8 Bootstrap Material Design CSS - remkonoteboom - 05-09-2020

Yes, I did take the generated css for bmd-bs-dark.css file. I started with both a light and dark file for the themes, however, in reality I have been using just the dark one for all themes since I have found (so far) that you can just use var(--spt-palette-background) in those files. At present the "dark" file can be used for all available themes. I don't think any of the themes that we're currently using will be so drastically different that we need to have more of these files since the themes really just correspond to color changes.

Of course, this may change in the future and it is already possible to use a custom css file for any given project should that be desired. this can be done with the project setting "feature/css_library"