• twitter image
  • facebook image
  • youtube image
  • linkedin image
Language: CMS Made Simple Czech CMS Made Simple France CMS Made Simple Hungary CMS Made Simple Russia CMS Made Simple Netherlands

All times are UTC




Post new topic Reply to topic  [ 5 posts ] 
Author Message
 Post subject: Bootstrap 4 with SASS and CMS Made Simple
PostPosted: Sun Jan 14, 2018 10:44 pm 
Offline
Power Poster
Power Poster

Joined: Mon May 11, 2009 4:35 pm
Posts: 473
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:
@charset "UTF-8";
@import "[[root_url]]/css/bootstrap.min.css";


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bootstrap 4 with SASS and CMS Made Simple
PostPosted: Mon Jan 15, 2018 12:28 am 
Offline
Administrator
Administrator
User avatar

Joined: Thu Mar 09, 2006 5:32 am
Posts: 12640
Location: Arizona
Why not just call it out in the template like you would in a flat HTML template..?

_________________
Check ver. CMSMS, PHP, server OS, in System Information page.
Default content http://multiintech.com/defaultcontent/
People are Wonderful
Business is Great
Life is Terrific
Ever wonder what happened to the Album module? Well it is alive and well.
http://album.multiintech.com/
Image


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bootstrap 4 with SASS and CMS Made Simple
PostPosted: Mon Jan 15, 2018 8:47 am 
Offline
Power Poster
Power Poster

Joined: Mon May 11, 2009 4:35 pm
Posts: 473
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..


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bootstrap 4 with SASS and CMS Made Simple
PostPosted: Mon Jan 15, 2018 9:37 am 
Offline
Dev Team Member
Dev Team Member

Joined: Mon Nov 28, 2011 9:29 am
Posts: 3020
Location: The Netherlands
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
 Post subject: Re: Bootstrap 4 with SASS and CMS Made Simple
PostPosted: Tue Jan 23, 2018 4:16 pm 
Offline
Power Poster
Power Poster

Joined: Sun Apr 19, 2009 9:33 am
Posts: 1266
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


Top
  Profile  
 
Share On:
Share on Facebook Share on Twitter Share on Google+
Display posts from previous:  Sort by  
Post new topic Reply to topic  [ 5 posts ] 

All times are UTC


Who is online

Users browsing this forum: googlebot


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Search for:
Jump to:  
A2 Hosting