Page 1 of 1

Bootstrap 4 with SASS and CMS Made Simple

Posted: Sun Jan 14, 2018 10:44 pm
by brentnl
Hi there,

I'm working on a new website and wanted to try Bootstrap 4 for the first time (used v3 multiple times before with cmsms).

One of the key-features of BSv4 is the use of 'SASS/SCSS'. I'm not used to those syntaxes, but I want to override some default values without altering the core files. This way I could easily update bootstrap in the future, and don't have to do the theming all over again.

How do I manage this from within CMSMS (2.2.5)? I know CMSMS does have it own kind of variables like [[$red = '#900' scope='global']] but that's not like SASS.

I just want to use Bootstrap v4 as the basics for my site, and overrule some default colors/styles, with maintaining the editability of CMSMS.

My stylesheet inside CMSMS now just looks like this;

Code: Select all

@charset "UTF-8";
@import "[[root_url]]/css/bootstrap.min.css";

Re: Bootstrap 4 with SASS and CMS Made Simple

Posted: Mon Jan 15, 2018 12:28 am
by Dr.CSS
Why not just call it out in the template like you would in a flat HTML template..?

Re: Bootstrap 4 with SASS and CMS Made Simple

Posted: Mon Jan 15, 2018 8:47 am
by brentnl
Dr.CSS wrote:Why not just call it out in the template like you would in a flat HTML template..?
Call what? My custom.scss? Or the default bootstrap files?

The thing is that I want to manage the SCSS/CSS from within the admin-panel. I find this more convenient than editing the file with FileZilla and uploading the changes..

Re: Bootstrap 4 with SASS and CMS Made Simple

Posted: Mon Jan 15, 2018 9:37 am
by velden
As far as I know you can't use the SASS files directly, they need to be converted to css files. So, this is not possible/useful to do from within the Design Manager's Stylesheets page.

The CSSPreprocessor module is probably what you need:
http://dev.cmsmadesimple.org/projects/csspreprocessor

Re: Bootstrap 4 with SASS and CMS Made Simple

Posted: Tue Jan 23, 2018 4:16 pm
by deactivated010521
Overriding Bootstrap / Sass variables in a custom file (@import) is the correct way to change settings.
See: https://getbootstrap.com/docs/4.0/getti ... d/theming/

Same as with CMS Made Simple never hack any core files.

The easiest and prefered way to hook up Sass files compiled to CSS with the CMSMS design manager is to compile to the DesignManager (Stylesheets) export files.
For this to work tweak the "npm" task, provided by Bootstrap.

I have never used the csspreproccessor module myself, but have used Bootstrap and other Sass related projects in different CMSMS 2.0 projects.

How is Sass/CSS intergrated with cms_stylesheet? Based on a side-project I work on now and then, is spelled out here: https://github.com/FrontEndStudio/cmsms_starter_theme