Bootstrap 4 with SASS and CMS Made Simple

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Locked
brentnl
Power Poster
Power Poster
Posts: 493
Joined: Mon May 11, 2009 4:35 pm

Bootstrap 4 with SASS and CMS Made Simple

Post 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";
User avatar
Dr.CSS
Moderator
Moderator
Posts: 12709
Joined: Thu Mar 09, 2006 5:32 am
Location: Arizona

Re: Bootstrap 4 with SASS and CMS Made Simple

Post by Dr.CSS »

Why not just call it out in the template like you would in a flat HTML template..?
brentnl
Power Poster
Power Poster
Posts: 493
Joined: Mon May 11, 2009 4:35 pm

Re: Bootstrap 4 with SASS and CMS Made Simple

Post 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..
User avatar
velden
Dev Team Member
Dev Team Member
Posts: 3483
Joined: Mon Nov 28, 2011 9:29 am
Location: The Netherlands

Re: Bootstrap 4 with SASS and CMS Made Simple

Post 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
deactivated010521

Re: Bootstrap 4 with SASS and CMS Made Simple

Post 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
Locked

Return to “Layout and Design (CSS & HTML)”