[FEATURE] Support SASS with Bootstrap 4

[benjaminkott]

• Add SASS Parser
• Move Custom CSS to SASS
• Update to Bootstrap 4

[daybugging]

If I wanted to contribute, what would be the best way? It obviously wouldn't be branched off the master branch, no?

[benjaminkott]

The master branch is compatible with bootstrap3 and bootstrap4 (not finished) you can have a look at the current state here: Bootstrap 3: https://www.bootstrap-package.com/ Bootstrap 4: https://www.bootstrap-package.com/?framework=bootstrap4

• Bootstrap 4 Sources are available
• SASS Parser is available
• Almost all custom css is already moved to SASS

Currently i am using this addition to test bs3 and bs4

[globalVar = GP:framework = bootstrap4]
<INCLUDE_TYPOSCRIPT: source="FILE:EXT:bootstrap_package/Configuration/TypoScript/Bootstrap4/setup.typoscript">
[end]
config.linkVars = L(int),framework

All changes are going always to master, after a release the versions get own branches to backport bugfixes, stuff etc if nessesary. Adding changes would be done with a regular pull request with editing rights available. Important for CSS changes is that we also need to provide compiled versions.

Workflow:

cd Build
yarn install
grunt build

Please have a look at the Gruntfile for all available tasks: https://github.com/benjaminkott/bootstrap_package/blob/master/Build/Gruntfile.js#L498-L504

Currenlty missing stuff:

• [x] New Google Webfont implementation with local cache https://github.com/benjaminkott/bootstrap_package/pull/522
• [x] Better subnavigation implementation
• [x] Responsive images rework https://github.com/benjaminkott/bootstrap_package/pull/517
• [x] TypoScript Constants for SCSS https://github.com/benjaminkott/bootstrap_package/pull/500 (must be done at the end)

[hilburger]

Hi Benjamin, I have built the files from here locally and overwritten the TER version installed on my staging. But where can I switch to BS4? Even if I add the lines in the Setup of the template and &framework=bootstrap4 to the URL things are kind of strange - e.g. I get an Oooops-error on sub pages. Thanks for your help, Thomas

[hilburger]

Alright, thats working now - had to re-select the Backend-Layouts of the "Content Elements" page and sub pages. The demo template looks alright now.

But the carousel CEs do not work (Ooops error within the CE on the correctly rendered page). Looks like a template file thing.

[hilburger]

Haha, also done - just had to change the CE type of two CE inside the carousel - works perfect - thanks for the awesome work! Will continue testing the BS4 part.

[benjaminkott]

The default rendering is now bootstrap 4. See https://github.com/benjaminkott/bootstrap_package/commit/6dee2d125c9b2e0e6c181d3ad2610b86b594bdb4 for more details.