Removed starterkits and remaining grunt scripts

Issue #2852156 by markcarver: Move "overrides" source files and generated CSS to separate project
Moved to: https://github.com/unicorn-fail/drupal-bootstrap-stylesSigned-off-by: markcarver's avatarMark Carver <mark.carver@me.com>
parent 36dde42e
module.exports = function (grunt, options) {
'use strict';
// Register the "clean-vendor-dirs" task.
grunt.registerTask('clean-vendor-dirs', 'Ensures vendor directories do not cause Drupal to segfault. Read more in: MAINTAINERS.md.', function () {
var glob = [
'node_modules/**/*.info',
'bower_components/**/*.info',
'lib/**/*.info'
];
var files = grunt.file.expand(glob);
if (files.length) {
files.forEach(function (file) {
grunt.log.ok('Removed ' + file);
grunt.file.delete(file, {force: true});
});
}
grunt.log.ok('Vendor directories clean!');
});
};
var pkg = require('../package');
module.exports = function (grunt) {
'use strict';
var dev = !!grunt.option('dev');
var path, cssPath, libraries, librariesCache, librariesPath, versions, latestVersion;
// Helper function for falling back to a Bootstrap variables file.
var resolveVariables = function (file, backup) {
if (backup === true) grunt.verbose.write('Checking for backup variables file...');
if (!grunt.file.exists(path.join(librariesPath, file))) {
if (backup === true) grunt.verbose.warn();
grunt.verbose.writeln("Missing " + file);
file = false;
if (backup && backup !== true) {
file = resolveVariables(backup, true);
if (file) grunt.verbose.writeln("Using: " + file);
}
return file;
}
else if (backup === true) grunt.verbose.ok();
return file;
};
// Register the "compile" task.
grunt.registerTask('compile', 'Compiles the Drupal/Bootstrap override CSS files for the base theme.', function () {
var cwd = process.cwd();
path = require('path');
cssPath = path.join(cwd, pkg.paths.css);
librariesCache = path.join(cwd, pkg.caches.libraries);
librariesPath = path.join(cwd, pkg.paths.libraries);
if (!grunt.file.exists(librariesCache) || !grunt.file.isDir(librariesPath)) {
return grunt.fail.fatal('No libraries detected. Please run `grunt sync`.');
}
libraries = grunt.file.readJSON(librariesCache);
if (!libraries.bootstrap || !libraries.bootswatch) {
return grunt.fail.fatal('Invalid libraries cache. Please run `grunt sync`.');
}
versions = Object.keys(libraries.bootstrap);
latestVersion = [].concat(versions).pop();
grunt.config.set('latestVersion', latestVersion);
// Register a private sub-task. Doing this inside the main task prevents
// this private sub-task from being executed directly and also prevents it
// from showing up on the list of available tasks on --help.
grunt.registerTask('compile:overrides', function () {
var done = this.async();
var total = {count: 0};
var less = require('less');
var LessPluginAutoPrefix = require('less-plugin-autoprefix');
var LessPluginCleanCSS = require('less-plugin-clean-css');
var lessPlugins = [
new LessPluginCleanCSS({
advanced: true
}),
new LessPluginAutoPrefix({
browsers: [
"Android 2.3",
"Android >= 4",
"Chrome >= 20",
"Firefox >= 24",
"Explorer >= 8",
"iOS >= 6",
"Opera >= 12",
"Safari >= 6"
],
map: true
})
];
var queue = require('queue')({concurrency: 1, timeout: 60000});
// Iterate over libraries.
for (var library in libraries) {
if (!libraries.hasOwnProperty(library) || (dev && library !== 'bootstrap')) continue;
// Iterate over versions.
for (var version in libraries[library]) {
if (!libraries[library].hasOwnProperty(version) || (dev && version !== latestVersion)) continue;
// Iterate over themes.
for (var i = 0; i < libraries[library][version].length; i++) {
// Queue LESS compilations.
(function (library, versions, version, theme, total) {
queue.push(function (done) {
var lessPaths = [path.join(librariesPath)];
var latestVersion = [].concat(versions).pop();
var latestVariables = path.join(latestVersion, 'bootstrap', 'less', 'variables.less');
var latestMixins = path.join(latestVersion, 'bootstrap', 'less', 'mixins.less');
var themeVariables = path.join(version, library, (library === 'bootstrap' ? 'less' : theme), 'variables.less');
var backupVariables = path.join(version, 'bootstrap', 'less', 'variables.less');
var fileName = (library === 'bootstrap' ? 'overrides.min.css' : 'overrides-' + theme + '.min.css');
var outputFile = path.join(cssPath, version, fileName);
// Resolve the variable files.
latestVariables = resolveVariables(latestVariables);
if (!latestVariables) return done(false);
themeVariables = resolveVariables(themeVariables, backupVariables);
if (!themeVariables) return grunt.fail.fatal("Unable to create: " + outputFile);
var options = {
filename: outputFile,
paths: lessPaths,
plugins: lessPlugins
};
var imports = [
// First, import the latest bootstrap (missing variables).
'@import "' + latestVariables + '"',
// Then, override variables with theme.
'@import "' + themeVariables + '"',
// Then, import latest bootstrap mixins.
'@import "' + latestMixins + '"',
// Then, import the variable overrides.
'@import "' + path.join('starterkits', 'less', 'less', 'variable-overrides.less') + '"',
// Finally, import the base-theme overrides.
'@import "' + path.join('starterkits', 'less', 'less', 'overrides.less') + '"',
// Add some default variables that may not be available.
'@form-group-margin-bottom: 15px',
'@screen-sm-min: @screen-sm',
'@screen-md-min: @screen-md',
'@screen-lg-min: @screen-lg',
'@container-sm: @container-tablet',
'@container-md: @container-desktop',
'@container-large-desktop: (1140px + @grid-gutter-width)',
'@container-lg: @container-large-desktop'
];
grunt.log.debug("\noptions: " + JSON.stringify(options, null, 2));
grunt.log.debug(imports.join("\n"));
less.render(imports.join(';') + ';', options)
.then(function (output) {
total.count++;
grunt.log.writeln('Compiled '.green + path.join(version, fileName).white.bold);
grunt.file.write(outputFile, output.css);
done();
}, function (e) {
if (e.type === 'Parse') {
grunt.log.error("File:\t".red + e.filename.red);
grunt.log.error("Line:\t".red + [e.line, e.column].join(':').red);
grunt.log.error("Code:\t".red + e.extract.join('').white.bold);
grunt.log.writeln();
}
return grunt.fail.fatal(e);
})
;
});
})(library, Object.keys(libraries[library]), version, libraries[library][version][i], total);
}
}
}
// Start LESS compilations queues.
queue.start(function (e) {
// Report how many files were compiled.
grunt.log.ok(grunt.util.pluralize(total.count, '1 file compiled./' + total.count + ' files compiled.'));
return done(e);
});
});
// Run necessary sub-tasks.
var subtask = (dev ? 'dev' : 'css');
grunt.task.run([
'clean:' + subtask,
'compile:overrides',
'csslint:' + subtask
]);
});
};
module.exports = function (grunt, options) {
return {
options: {
browsers: [
"Android 2.3",
"Android >= 4",
"Chrome >= 20",
"Firefox >= 24",
"Explorer >= 8",
"iOS >= 6",
"Opera >= 12",
"Safari >= 6"
],
map: true
},
css: {
src: ['css/**/*.css']
},
dev: {
src: ['css/<%= latestVersion %>/overrides.css']
}
}
};
module.exports = function (grunt, options, arg1, arg2) {
return {
css: ['css/**/*.css'],
dev: ['css/<%= latestVersion %>/overrides.css']
};
};
module.exports = function () {
return {
options: {
csslintrc: '.csslintrc'
},
css: {
src: ['css/**/*.css']
},
dev: {
src: ['css/<%= latestVersion %>/overrides.min.css']
}
};
};
module.exports = function (grunt, options) {
return {
options: {
report: 'gzip'
},
css: {
files: [{
expand: true,
cwd: 'css',
src: ['**/*.css', '!**/*.min.css'],
dest: 'css',
ext: '.min.css'
}]
},
dev: {
files: [{
expand: true,
cwd: 'css',
src: ['<%= latestVersion %>/overrides.css'],
dest: 'css',
ext: '.min.css'
}]
}
}
}
module.exports = function (grunt, options) {
return {
install: {
options: {
template: '.githooks.js.hbs'
},
// Change to something else once the {{ hook }} variable can be used.
// @see https://github.com/wecodemore/grunt-githooks/pull/40
'pre-commit': 'pre-commit',
'post-merge': 'post-merge',
'post-checkout': 'post-checkout',
'post-commit': 'post-commit'
}
};
};
module.exports = function (grunt, options) {
return {
less: {
files: ['starterkits/less/**/*.less'],
tasks: ['compile']
}
}
}
This diff is collapsed.
<!-- @file Instructions for subtheming using the CDN Starterkit. -->
<!-- @defgroup sub_theming_cdn -->
<!-- @ingroup sub_theming -->
# CDN Starterkit
The CDN Starterkit is rather simple to set up. You don't have to do anything
until you wish to override the default [Drupal Bootstrap] base theme settings
or provide additional custom CSS.
- [Prerequisite](#prerequisite)
- [Override Styles](#styles)
- [Override Settings](#settings)
- [Override Templates and Theme Functions](#registry)
## Prerequisite
Read the @link subtheme Sub-theming @endlink parent topic.
## Override Styles {#styles}
Open `./THEMENAME/css/style.css` and modify the file to your liking.
## Override Settings {#settings}
Please refer to the @link theme_settings Sub-theme Settings @endlink topic.
## Override Templates and Theme Functions {#registry}
Please refer to the @link registry Theme Registry @endlink topic.
[Drupal Bootstrap]: https://www.drupal.org/project/bootstrap
[Bootstrap Framework]: https://getbootstrap.com/docs/3.4/
[jsDelivr CDN]: http://www.jsdelivr.com
global-styling:
css:
theme:
css/style.css: {}
core: 8.x
type: theme
base theme: bootstrap
name: 'THEMETITLE'
description: 'Uses the jsDelivr CDN for all CSS and JavaScript. No source files or compiling is necessary and is recommended for simple sites or beginners.'
package: 'Bootstrap'
regions:
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'
libraries:
- 'THEMENAME/global-styling'
<?php
/**
* @file
* Bootstrap sub-theme.
*
* Place your custom PHP code in this file.
*/
# Default settings should not be located here. This file is only used to
# initially install a theme's "settings".
#
# Instead, the Drupal Bootstrap base theme uses the @BootstrapSetting
# annotated plugin discovery process. This ensures that sub-theme settings are
# inherited from base themes themes properly and to determine when a setting
# should be saved to config as "overridden".
#
# @see \Drupal\bootstrap\Plugin\SettingBase
# @see \Drupal\bootstrap\Plugin\SettingInterface
# @see \Drupal\bootstrap\Plugin\SettingManager
# @see \Drupal\bootstrap\Plugin\Form\SystemThemeSettings
# @see \Drupal\bootstrap\ThemeSettings
# This file cannot be empty, so install an initial empty array for "schemas".
# @see https://www.drupal.org/node/2813829
schemas: []
# Schema for the theme setting configuration file of the THEMETITLE theme.
THEMENAME.settings:
type: theme_settings
label: 'THEMETITLE settings'
/**
* Place your custom styles here.
*/
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="32px" height="32px"
viewBox="0 0 32 32" preserveAspectRatio="none">
<g>
<image width="32" height="32" xlink:href="data:image/png;base64,
iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAohJREFUeNrEl1tIVGEQx12L0BQjoXwpoRfxIQUJuhAIvVRLIRQELYj1
oKDgpQgVNQhBChQfLFDLoovVS0RQYuqLPUgFgTcQia5CSBBERUiKuv0+GGGJPd/l7Nkc+DNn98w3
8/++mXNmTigajaasp4T8Ejhx+GIWavOTkbaviRBITWBtIbgDkfT1InAGHAGDkNj2X1NAwFLU3ZgN
fATnSMezpBIgcAaqWRBPHoFLEJlNVgpWRC943D8FJiDaA3IDOQEc5aNK5Ocou3vDf3u5HgFbNEu/
gzrs7/smQKAa1BWQEfN3L06ruFcmdWCSa+A8a1acUkCAetTVf4IrqeReBIf3pPhMojbR41QDBDiO
atc4LRU9ZVk7FXKaZgLyhus2OExbS6FDAV+OV5jxTqAa7DQ4e4qzTegiBwKZoFFLAKdqZ+UGR8Pk
vwu9A7i+AU8TY6vuBNTjtcvgJB0nJyGhCvAgeO9AIBsc0hHYb+GkGDyGxG1ITHIdlmfeVop1BAoc
HJ2FxENIqBOodVhXoCOw3TGnEfVCgsQDrmcc0uBJYNVHR20S3R/EPDDvw0c+p6AK94Wl/aKOwLTP
uSIPfAHLFrYfdAReJzBZ2abvpY7ABHjrg8AcyAEbDXZL4LknAapZGdxyDD4vpPdZ2A7JC0zbC3pl
R7bSJ70+YjFNtVoNJNKObQbMcXAA7AFjhhGvA6INVvMAhgOoBkNwNQsck5Z8wxB8wGuQ9VwEiQ7U
BSmcWPkGOiXnv2QS3q0Jru6rCWrZ71BaKH0/JLXxCmd/+F8RuKkJ/gO0YNsd6IcJgcPSfI56mLxT
3RJcJ/jnoD9MNsg3oZobcqWxqGf/J/gkdTFJ4N9J/zoOSv4KMAC++teHNUg1rQAAAABJRU5ErkJg
gg==
"/>
</g>
</svg>
Use this directory to override template, theme and \[pre\]process functions.
Please refer to the @link registry Theme Registry @endlink topic for more info.
<!-- @file Instructions for subtheming using the Less Starterkit. -->
<!-- @defgroup sub_theming_less -->
<!-- @ingroup sub_theming -->
# Less Starterkit
Below are instructions on how to create a Bootstrap sub-theme using a Less
preprocessor.
- [Prerequisites](#prerequisites)
- [Additional Setup](#setup)
- [Overrides](#overrides)
## Prerequisites
- Read the @link getting_started Getting Started @endlink and
@link sub_theming Sub-theming @endlink documentation topics.
- You must understand the basic concept of using the [Less] CSS pre-processor.
- You must use a **[local Less compiler](https://www.google.com/search?q=less+compiler)**.
- You must use the [Bootstrap Framework Source Files] ending in the `.less`
extension, not files ending in `.css`.
## Additional Setup {#setup}
Download and extract the **latest** 3.x.x version of
[Bootstrap Framework Source Files] into the root of your new sub-theme. After
it has been extracted, the directory should be renamed (if needed) so it reads
`./THEMENAME/bootstrap`.
If for whatever reason you have an additional `bootstrap` directory wrapping the
first `bootstrap` directory (e.g. `./THEMENAME/bootstrap/bootstrap`), remove the
wrapping `bootstrap` directory. You will only ever need to touch these files if
or when you upgrade your version of the [Bootstrap Framework].
{.alert.alert-warning} **WARNING:** Do not modify the files inside of
`./THEMENAME/bootstrap` directly. Doing so may cause issues when upgrading the
[Bootstrap Framework] in the future.
## Overrides {#overrides}
The `./THEMENAME/less/variable-overrides.less` file is generally where you will
the majority of your time overriding the variables provided by the [Bootstrap
Framework].
The `./THEMENAME/less/bootstrap.less` file is nearly an exact copy from the
[Bootstrap Framework Source Files]. The only difference is that it injects the
`variable-overrides.less` file directly after it has imported the [Bootstrap
Framework]'s `variables.less` file. This allows you to easily override variables
without having to constantly keep up with newer or missing variables during an
upgrade.
The `./THEMENAME/less/overrides.less` file contains various Drupal overrides to
properly integrate with the [Bootstrap Framework]. It may contain a few
enhancements, feel free to edit this file as you see fit.
The `./THEMENAME/less/style.less` file is the glue that combines the
[Bootstrap Framework Source Files] and `overrides.less` files together.
Generally, you will not need to modify this file unless you need to add or
remove files to be imported. This is the file that you should compile to
`./THEMENAME/css/styles.css` (note the same file name, using a different
extension of course).
#### See also:
- @link theme_settings Theme Settings @endlink
- @link templates Templates @endlink
- @link plugins Plugin System @endlink
[Bootstrap Framework]: https://getbootstrap.com/docs/3.4/
[Bootstrap Framework Source Files]: https://github.com/twbs/bootstrap/releases
[Less]: http://lesscss.org
framework:
css:
theme:
css/style.css: {}
js:
bootstrap/js/affix.js: {}
bootstrap/js/alert.js: {}
bootstrap/js/button.js: {}
bootstrap/js/carousel.js: {}
bootstrap/js/collapse.js: {}
bootstrap/js/dropdown.js: {}
bootstrap/js/modal.js: {}
bootstrap/js/tooltip.js: {}
bootstrap/js/popover.js: {}
bootstrap/js/scrollspy.js: {}
bootstrap/js/tab.js: {}
bootstrap/js/transition.js: {}
core: 8.x
type: theme
base theme: bootstrap
name: 'THEMETITLE'
description: 'Uses the Bootstrap framework LESS source files and must be compiled (not for beginners).'
package: 'Bootstrap'
regions:
navigation: 'Navigation'
navigation_collapsible: 'Navigation (Collapsible)'
header: 'Top Bar'
highlighted: 'Highlighted'
help: 'Help'
content: 'Content'
sidebar_first: 'Primary'
sidebar_second: 'Secondary'
footer: 'Footer'
page_top: 'Page top'
page_bottom: 'Page bottom'
libraries-extend:
bootstrap/framework:
- THEMENAME/framework
<?php
/**
* @file
* Bootstrap sub-theme.
*
* Place your custom PHP code in this file.
*/
# Default settings should not be located here. This file is only used to
# override existing settings. If your theme is the one that introduces a new
# theme setting, it should use the Drupal Bootstrap base theme's
# @BootstrapSetting annotation discovery process. This ensures that sub-theme
# settings are inherited from base themes themes properly and to determine when
# a setting should be saved to config as "overridden".
#
# @see \Drupal\bootstrap\Plugin\SettingBase
# @see \Drupal\bootstrap\Plugin\SettingInterface
# @see \Drupal\bootstrap\Plugin\SettingManager
# @see \Drupal\bootstrap\Plugin\Form\SystemThemeSettings
# @see \Drupal\bootstrap\ThemeSettings
# Disable the CDN provider so compiled LESS source files can be used.
cdn_provider: ''
# Schema for the theme setting configuration file of the THEMETITLE theme.
THEMENAME.settings:
type: theme_settings
label: 'THEMETITLE settings'
/**
* This file will be overwritten when the Bootstrap Framework source files
* are compiled using the LESS CSS pre-processor.
*/
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path fill="#EE0000" d="M0,7.562l1.114-3.438c2.565,0.906,4.43,1.688,5.59,2.35C6.398,3.553,6.237,1.544,6.22,0.447h3.511 c-0.05,1.597-0.234,3.6-0.558,6.003c1.664-0.838,3.566-1.613,5.714-2.325L16,7.562c-2.05,0.678-4.06,1.131-6.028,1.356 c0.984,0.856,2.372,2.381,4.166,4.575l-2.906,2.059c-0.935-1.274-2.041-3.009-3.316-5.206c-1.194,2.275-2.244,4.013-3.147,5.206 l-2.856-2.059c1.872-2.307,3.211-3.832,4.017-4.575C3.849,8.516,1.872,8.062,0,7.562"/></svg>
// This is almost an exact duplication of the bootstrap.less file provided
// by the Bootstrap Framework itself. The only difference from that file and
// this one are the first two @import statements for the original framework's
// variables and this theme's overrides of those variables. This is necessary
// due to the fact that the Less pre-compiler language does not have the
// concept of "default" variables.
//
// @see https://www.drupal.org/node/2775481
@import "../bootstrap/less/variables.less";
@import "variable-overrides.less";
// Mixins.
@import "../bootstrap/less/mixins.less";
// Reset and dependencies
@import "../bootstrap/less/normalize.less";
@import "../bootstrap/less/print.less";
@import "../bootstrap/less/glyphicons.less";
// Core CSS
@import "../bootstrap/less/scaffolding.less";
@import "../bootstrap/less/type.less";
@import "../bootstrap/less/code.less";
@import "../bootstrap/less/grid.less";
@import "../bootstrap/less/tables.less";
@import "../bootstrap/less/forms.less";
@import "../bootstrap/less/buttons.less";
// Components
@import "../bootstrap/less/component-animations.less";
@import "../bootstrap/less/dropdowns.less";
@import "../bootstrap/less/button-groups.less";
@import "../bootstrap/less/input-groups.less";
@import "../bootstrap/less/navs.less";
@import "../bootstrap/less/navbar.less";
@import "../bootstrap/less/breadcrumbs.less";
@import "../bootstrap/less/pagination.less";
@import "../bootstrap/less/pager.less";
@import "../bootstrap/less/labels.less";
@import "../bootstrap/less/badges.less";
@import "../bootstrap/less/jumbotron.less";
@import "../bootstrap/less/thumbnails.less";
@import "../bootstrap/less/alerts.less";
@import "../bootstrap/less/progress-bars.less";
@import "../bootstrap/less/media.less";
@import "../bootstrap/less/list-group.less";
@import "../bootstrap/less/panels.less";
@import "../bootstrap/less/responsive-embed.less";
@import "../bootstrap/less/wells.less";
@import "../bootstrap/less/close.less";
// Components w/ JavaScript
@import "../bootstrap/less/modals.less";
@import "../bootstrap/less/tooltip.less";
@import "../bootstrap/less/popovers.less";
@import "../bootstrap/less/carousel.less";
// Utility classes
@import "../bootstrap/less/utilities.less";
@import "../bootstrap/less/responsive-utilities.less";
/**
* AJAX (throbber) styling.
*/
// @todo This should probably be it's own mixin/component?
@keyframes glyphicon-spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(359deg); }
}
.glyphicon-spin {
display: inline-block;
animation: glyphicon-spin 1s infinite linear;
}
a .glyphicon-spin {
display: inline-block;
text-decoration: none;
}
html.js {
.btn .ajax-throbber {
margin-left: .5em;
margin-right: -.25em;
}
.form-item .input-group-addon {
.glyphicon {
color: @gray-light;
opacity: .5;
transition: 150ms color, 150ms opacity;
&.glyphicon-spin {
color: @brand-primary;
opacity: 1;
}
}
.input-group-addon {
background-color: rgb(255, 255, 255);
}
}
// Hide empty wrappers from AJAX/Field APIs.
.ajax-new-content:empty {
display: none !important;
}
}
/**
* Alert styling.
*/
.alert-sm {
padding: 5px 10px;
}
// Treat all links inside alert as .alert-link
.alert a {
font-weight: @alert-link-font-weight;
}
.alert-success {
a, a:hover, a:focus {
color: darken(@alert-success-text, 10%);
}
}
.alert-info {
a, a:hover, a:focus {
color: darken(@alert-info-text, 10%);
}
}
.alert-warning {
a, a:hover, a:focus {
color: darken(@alert-warning-text, 10%);