Turn off base theme css and js in sub themes by default

I have changed this from a support request to bug as it does happen and back in #2070285: Always disable base theme CSS and JS it was made clear that the base theme css should be disable when the sub-theme is being used.

There is a setting in your theme settings under "Styles and Scripts" to disable it.

Alternatively you can add this to your info.yml

stylesheets-remove:
  - '@zurb_foundation/css/foundation.min.css'

After bower is removed ( #2895755: Remove Bower and use npm instead ) I think we should look at adjusting this and improving the documentation.

So the there are there base files which (by default) get pulled into the subtheme:
1) foundation.min.css
2) zurb_foundation.css
3) motion-ui.css

Ticking "Disable Base Theme CSS" in /admin/appearance/settings/sub-theme stops all three being loaded.

Both foundation.min.css and motion-ui (mui classes) are already part of the subtheme so produce duplicates.

Zurb_foundation.css is not present and contains " Contains all Drupal-specific SASS for this theme." We have a currently empty "_drupal.scss" in /STARTER/scss/base so it make sense to place this in here. Once that is done

Once that is added we can add STARTER.settings.yml in STARTER/config/install containing

settings:
  zurb_foundation_disable_base_css: true

This should fix this up and make it work as originally intended and be off by default.

@HongPong if you think this is the correctly way to handle without breaking existing them give me the nod and I will create a patch.

I think yes the disable_base_css true, should be added to starter config install. Are you saying that all of zurb_foundation.css would be added to _drupal.scss ? Thank you for poking around in this, I know it needs help.

re #7, yes.
Below is the zurb_foundation.scss which should be copied into _drupal.scss . As you can see almost all of it is fixes which need to be re-evaluated. We should copy across for now(to fix and close this issue) and then open issues to see if/how to remove and distribute in the future. Those who want to inherit CSS from the base theme will be unaffected.

/*
 * zurb_foundation.scss - Contains all Drupal-specific SASS for this theme.
 *
 * @todo Split this into multiple folders/files.
*/

// A fix for https://www.drupal.org/node/953034 - Themes currently cannot
// determine if a region is empty

.region-highlighted:empty {
    display: none;
}

// This has been an issue since 7.x, Foundation rules about list elements
// affect Navbar sizing.

.toolbar-tray a {
    font-size: 13px;
}

// Remove Foundation's top margin from the toggle orientation button.

.toolbar .toolbar-toggle-orientation .toolbar-icon {
    margin: 0;
    // Fix offset problem where half of orientation button is not visible.
    &:before {
        min-height: 0;
    }
}

// Override styles from /core/modules/system/css/components/menu.theme.css

.top-bar-section ul li {
    padding-top: 0;
    a.is-active {
        color: #FFFFFF;
    }
}

// Offset the top bar if the Navbar (toolbar) is present.

body.toolbar-fixed .sticky.is-stuck .top-bar {
    margin-top: 39px;
}

body.toolbar-fixed.toolbar-horizontal.toolbar-tray-open .sticky.is-stuck .top-bar {
    margin-top: 78px;
}

body.toolbar-fixed .sticky.is-stuck.is-at-top {
    margin-top: 0 !important;
}

// Removes core arrow image from menu items.

.top-bar {
    .menu-item--collapsed,.menu-item--expanded {
        list-style: none;
    }
}


// Style the search form, if embedded in the Top Bar.

.top-bar .search-block-form {
    .form-item-keys, .form-actions {
        display: inline-block;
    }
}

// Dropdown button styling.

.dropbutton-wrapper {
    // Sub-themes will have to override this color, unfortunately.
    background-color: #008CBA;
    margin: 0 0 1.25rem;
    .button {
        margin-bottom: 0;
        width: 100%;
        text-align: left;
    }
}

Todo:

1. copy contents of zurb_foundation.scss into STARTER/scss/base/_drupal.scss
2. Edit STARTER/gulpfile.js line 35 to read lintIgnore: ['scss/_settings.scss', 'scss/base/_drupal.scss'],

I think this will be a sufficient fix for now.

I opened and created a patch at #2912011: Duplicate 'all Drupal-specific SASS' in Starter SCSS which copies the zurb_foundation.scss into the Starter theme.

Once that is in we can disable the importing of the base (css and js) theme by default, which we can do here.

The Drupal specific CSS fixes are now in STARTER CSS as per #2912001: Undefined index content warning during serialize / normalize of link tag so we can go ahead and disable the importing by default. We need to check the JS import too.

Ok, I've added a MR that uses the install config to turn off those settings by default when installing a new subtheme.

@sim I have checked the "merge request !10" working fine. The files are updated in the "STARTER/config/install" path. Now once you create the subtheme the CSS and JS will not be built by default.

After applying the patch below files will be added and work fine.

Great, thanks for helping with this! Merged.

@sim_1 Can you please give credit for Reviewing/Testing the patch?

Shoot, I thought I did! This is what I had in the commit message, did this not work?

Issue #2850823 by sim_1, Shyam_Bhatt, serg2, HongPong, mathiasha, pektinasen

Let me know how I can do it correctly and I absolutely will change it if I can.

@sim_1 Please check https://www.drupal.org/docs/develop/issues/issue-procedures-and-etiquett... link