I am reasonably new to Grunt - I have less setup via grunt/node and would like to include the basic unstyled responsive backbone of Bootstrap - rather than the entire css/ js - is this possible - can anyone explain how as i've read various documentation and i'm mighty confused!
I have found this NPM library - https://www.npmjs.com/package/grunt-bootstrap which sound slike it could provide what i'm after but I have no idea what files would provide me with the basic responsive skeleton without all the styling - or what version of Boostrap the files relate to - can anyone advise please?
You can download the Bootstrap's source code. Then run npm install, after that you can rebuild bootstrap by running the Grunt tasks.
You can disable the jquery Plugins in the Gruntfile.js by commenting them out. The same for your CSS code in the less/bootstrap.less file.
The less/bootstrap.less file already contains useful comments such as // Reset and dependencies and // Core CSS so it will be easier to find out what to use and what not.
To compile a very basic version that only contains the grid system you could use a less/bootstrap.less which contains:
// Core variables and mixins
#import "variables.less";
#import "mixins.less";
// Reset and dependencies
#import "normalize.less";
#import "print.less";
// Core CSS
#import "grid.less";
After changing the less/bootstrap.less as above you can run grunt dist-css. The preceding command compiles dist/css/bootstrap.min.css which can be used for your project.
Related
I have been using Bootstrap 3.4.1 for many years, and am working on moving it to Bootstrap 5.3.
Back in Version 3.4 it was possible to customise your download, which would result in a smaller download when users visit your website (sorry for non-technical speak).
However I am struggling to work out how to do similar in version 5.3.
I am using VSCode and have installed Node.js on my laptop, and have worked through the Bootstrap 5 Crash Course Tutorial #19 - Customizing Bootstrap tutorial.
That was useful in as much as it helped provide steps to override some default styles and to add some of your own custom styles - e.g. by adding your own scss file:
// custom variables
$primary: #c29938;
$light: pink;
// import the functions & variables
#import '../../node_modules/bootstrap/scss/_functions';
#import '../../node_modules/bootstrap/scss/_variables';
$custom-theme-colors: (
"altlight": #f2ebfa,
"altdark": #522192
);
$theme-colors: map-merge($custom-theme-colors, $theme-colors);
// import bootstrap
#import '../../node_modules/bootstrap/scss/bootstrap';
However, I am struggling to find any guidance about how I would be able to compile my own bootstrap file that excluded bootstrap components I don't want to use, such as:
accordion
carousel
modal
dropdown
etc. etc.
Is it possible to do this using the Vscode / NPM setup I have installed, and using SCSS files, or do I need to learn about other routes using LESS and Gulp and all sorts of other things?
Any advice much appreciated.
Thanks
While webpack seems to support a wide variety of detailed configuration options, I only want to accomplish the simple task of taking a single css source file located at project/frontend/static/css/style.css and outputting a minified version of that css file to project/frontend/static/css/style.min.css. I can't seem to find anything in the documentation of webpack that discusses this, as I am not importing my CSS from JS, just linking it in the HTML head the old fashioned way, so all I want to output is a plain CSS file, just minified.
With webpack you may like to use mini-css-extract-plugin
npm install --save-dev mini-css-extract-plugin
This plugin extracts CSS into separate files. It creates a CSS file per JS file which contains CSS. It supports On-Demand-Loading of CSS and SourceMaps.
It builds on top of a new webpack v4 feature (module types) and requires webpack 4 to work.
Please look at the documentation for more info
https://webpack.js.org/plugins/mini-css-extract-plugin/
I'm using Sage, a WordPress framework, and it lets you choose during creation some css frameworks, but I want to use Materialize CSS instead.
It uses Webpack to build and combine the .scss files into one. I did an npm install materialize-css so it's in my node_modules. In my project structure, I made an scss file that's used to import the module basically.
I also have bulma in this build, included via the original creation, so I can try to see how the structure is setup. It uses the following import statement:
#import "~bulma";
This works. I'm so confused about how this works. I think the ~ (tilde) tells Webpack something, but I don't know what. What I figured is that Webpacks checks the package.json file or something and finds it in the node_modules.
I've tried #import "~materialize-css"; with no luck.
Can someone explain what the heck Webpack is doing? Haha, because I can't find any documentation on this.
Here are the node_module folder structures, maybe this has something to do with it:
Perhaps the root of Bulma is bulma.sass yet for Materialize-CSS, there's no file, it's in sass/materialize.scss.
If needed, here's the github for the Sage framework, the webpack.config.js is in the build folder: https://github.com/roots/sage/tree/master/resources/assets
You have to specific the file you want to import also like this
#import "~bootstrap/scss/bootstrap";
#import "~font-awesome/scss/font-awesome";
#import "~toastr/toastr";
I'm using Bower to manage Bootstrap and would like to make some changes (colours, font size etc) to the default Bootstrap look and feel. Here's my workflow:
Edit bower_components/bootstrap/less/variables.less
Recompile bootstrap using grunt build
The problem is that I want to be able to upgrade bootstrap when a new version comes out and presumably I'll lose my changes to variables.less.
Is there a way I can keep my changes outside of bower_components and also avoid having bower_components in source control since it's 122MB?
you can create a variables-custom.less and import it into theme.less like this:
//
// Load core variables and mixins
// --------------------------------------------------
#import "variables.less";
//import custom-variables after variables so the values will override.
#import "custom-variables.less"; //only has variables that have changed.
#import "mixins.less";
IMO this is a little bit better than the first solution because you wont have to load two (almost) identical CSS files on the client.
I'm sorry I cant help you with what to to about Bower and your source control as I do not use Bower
Here's the solution which worked for me:
Use bower to install all UI packages e.g. bower install bootstrap chosen
Create a separate folder less which contains all the LESS modifications. This article was very helpful here.
Here's my less/styles.less file:
#import "../bower_components/bootstrap/less/bootstrap.less";
#import "../bower_components/bootstrap-chosen/bootstrap-chosen.less";
//My custom variables - overrides the bootstrap variables file
#import "variables-custom.less";
Use grunt to monitor changes within the less folder and compile them into .css
Here's my Gruntfile.js (thanks to this answer):
module.exports = function(grunt) {
grunt.initConfig({
less: {
development: {
options: {
paths: ["./less"],
yuicompress: true
},
files: {
"./static/css/styles.css": "./less/styles.less"
}
}
},
watch: {
files: "./less/*",
tasks: ["less"]
}
});
grunt.loadNpmTasks('grunt-contrib-less');
grunt.loadNpmTasks('grunt-contrib-watch');
};
This is indeed the best customization method. You create a theme.less and pull in original Bootstrap files (which can get upgraded in the future) and in the same file you call your own custom overrides. Either you #import them from a custom file which is not in the Bower directory or you just write your custom rules in your theme.less itself. You'll find this technique explained in this tutorial as well.
With Grunt, custom setups can get tricky. But with Brunch it's a piece of cake (yes!) and all pretty much goes automatically. Your grandma could do it.
As for avoiding the inclusion of bower_components in source control: with Git it's easy. You just check-in your bower.json but make sure to add /bower_components to your .gitignore file.
You should just create your own style sheet, use both with your custom one listed secondly. That way you can make changes but not change bootstrap at all.
Also, when you update, you keep your style sheet the same.
This allows you to change bits and pieces of Bootstrap but not actually changing the file, you're overriding it.
To be clear, your second CSS file would be SIGNIFICANTLY smaller... Only putting things your needed to change in it.
How do other Wordpress theme developers incorporate Sass into their theme development while taking advantage of its compressed output style? Sass compressed removes ALL comments, so I currently have an empty style.css with my theme declaration and an #import calling the minified css from compass, but this hardly seems like the best solution.
Has anybody found a way around this? What would be the best solution if not?
http://codex.wordpress.org/Theme_Development#Theme_Stylesheet
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#id40
SUPER SHORT VERSION: Use /*! loud comments */ and compile the SCSS just before packaging and distributing.
Two part answer, "old part" first:
I used Sass/SCSS when developing my "Orin" theme: https://github.com/founddrama/orin
Part One:
In my src/scss directory, I keep all of my _include.scss files and the style.scss file that has all of the #import statements.
During development, I just run the usual sass --watch (although it's an extra step to remember to save the style.scss file).
Once your SCSS source is looking good and committed to version control, you can simply build the style.scss into style.css and check that into version control for the Theme that gets distributed.
In my case, "Orin" is just for me, so I perform the build when I update it on the blog server, but the SCSS compilation can just as easily be done prior to packaging/distribution. The build script I'm using is here (in that Github repo); the gist of it being:
touch to create the style.css output file;
apply the license text;
compile the SCSS and append it to style.css.
Part Two:
More recent versions of Sass include support for /*! loud comments */; meaning that I need to get off my lazy butt and update to:
Include the license text and theme description right there in style.scss using the loud comments;
update the build/deploy script to simply compile the SCSS.
Well, i would suggest you to use Compass .
The comment should look like this:
/*! A loud SASS comment */