This question already has answers here:
Customizing Bootstrap 4 css
(2 answers)
Closed 4 years ago.
Does anyone know about an alpha/beta bootstrap 4 custom generator, same that is available for bootstrap 3 at Customize and download?
https://getbootstrap.com/docs/4.0/customize/ still unavailable
As discussed here on Stack Overflow, there will not be a customizer for Bootstrap 4. This means that you'll have to build the Sass files manually. This can be achieved with the sass npm package, for example.
I've also created a tool that handles compiling the Sass and vendor prefixing, which I've been using to compile Bootstrap. This is a simple setup to get started with:
npm i bootstrap#4 sass-plus -D
Create a file called app.scss and import Bootstrap in there:
#import "bootstrap/scss/bootstrap";
Compile it:
npx sass-plus -i app.scss -o compiled.css
You should now find all of the Bootstrap-classes in compiled.css. You can make changes to the app.scss file and recompile and the changes will be reflected in the CSS, that can be referenced normally in HTML.
By importing Bootstrap components individually and changing Bootstrap's variables you can change the look of your site and the size of the compiled CSS.
Resources:
All Bootstrap components imported individually
sass-plus docs
Great question! Bootstrap 3 had a customize page as you noted.
You could use this build tool: https://bootstrap.build/. I'm not sure if it is the replacement for the BS3 customize page or something new. It looks like a nice editor.
Or you could build a custom version of Bootstrap 4 with SASS.
This link provides more information about making a theme:
https://getbootstrap.com/docs/4.0/getting-started/theming/
It doesn't look like the Bootstrap team are going to offer a customizer like in v3.
As mentioned in other answers, bootstrap.build exists and has a very nice UI and gives access to most of the variables and options. Unfortunately it doesn't appear to being updated as quick as the Bootstrap team are releasing updates.
upgrade-bootstrap.bootply.com is another option but doesn't give any indication as to which v4 version is being used. It has only limited access to variables and options.
bootstrapcustomizer.compoutpost.com provides full access to all variables and options and is kept up-to-date with v4 releases. It's not as nice a UI as bootstrap.build but works.
(Disclosure: I created bootstrapcustomizer.compoutpost.com)
Related
I want to add vuetify to my project, but it can only be added by downloading files.
I have downloaded vuetify.min.css and vuetify.min.js
What other files do I need to download?
If you are using the Vue CLI then you can just add it like so:
vue add vuetify
The doc: https://vuetifyjs.com/en/getting-started/installation/#vue-cli-install
It also contains other installation methods if that one doesn't suit you, if you want to install it manually I think there are only these two (as seen in the code working with the CDNs), but maybe you'll want to use de Material Design Icons then you need to download that as well.
I am setting up a Snowpack project with the aim to move an existing Create-React-App application into it once things are configured the same.
I haven't found a way to import an .scss file into a .tsx file however.
The Snowpack docs only seem to discuss configuring scss as an externally built asset, suggesting putting your scss into a separate css folder { docs link }. However I would like to keep my scss files next to the tsx components they belong to, and import them into the component as I currently am.
The docs also reference a blog post discussing a setup with PostCSS, however that post suggests some issues with the approach, including that sourcemaps wouldn't work - which isn't going to fly.
I have created my project like this:
npx create-snowpack-app my-sweet-app --template #snowpack/app-template-react-typescript --use-yarn
I've then added a new scss file, src/test.scss
$best-colour: tomato;
body {
background-color: $best-colour;
}
and added an import in my src/App.tsx file:
import './test.scss';
When running yarn start I get the following error:
[error] [404] /_dist_/test.css.proxy.js
✘ /home/me/repos/my-sweet-app/public/_dist_/test.css
✘ /home/me/repos/my-sweet-app/src/test.css
Can Snowpack be configured to import scss files into tsx files equivalent to how it works in Create React App? How?
While I have not a complete answer, I faced the same problem as you. What you basically want to achieve is, to add additional tools to Snowpack's build pipeline.
If you throw in Babel with Snowpack you can add arbitrary absurd babel plugins for all your transformation needs.
Using #researchgate/babel-plugin-transform-scss-import-to-string and adding it in my babel.config.js I was able to get my Sassy stuff transpiled into strings.
However, this is not a complete solution; because now Snowpack won't pick up changes in my Sass files... :( It seem's that a lot of those new anti bundlers are just that, they are against bundling and thus combining them with additional pre-processing stuff that used to be done by our good olde bundlers is cumbersome.
I am new to Laravel.
When I install Laravel 6 a lot of the things that install by default in Laravel 5.8 are not evident i.e. bootstrap, vue, jquery.
I see this is package.json file.
I did not find anything that explains this and wondering if anyone has some guidance that might enlighten me.
Example:
I was trying to use bootstrap as shown in the video I was watching and found missing resources/sass files ap.scss and .variables.scss. ap.scss was empty and .variables.scss was absent. I did find them buried elsewhere in the installation; however, bootstrap did not work and any attempts I made to install bootstrap and other missing pieces wound up breaking the framework (probably something I did.)
In the meantime I am staying with a Version 5 distribution of Laravel.
Laravel decoupled what front end tech you use by default in 6.0
You can review the documentation here.
https://laravel.com/docs/6.x/frontend
So, the compilation of (_)file.scss files to *.css files works great. Just one thing: For each file the watcher encounters, it creates a cache file. It does this right next to the file being compiled, e.g.:
_partial.scss
style.scss
Generates:
/.sass-cache/C0mpl1cat3dh4sh/_partial.scss
/.sass-cache/C0mpl1cat3dh4sh/style.scss
style.css
Of course I could simple delete the files when they're generated. Could add them to .gitignore. But these are work-arounds.
How to disable the generation of these cache files?
In the options I could not find an option to do this when searching "cache", "file watcher" or "watch".
Extra info:
Running 2018.3.3, built 9th January 2019
Have not seen this before, though haven't mucked around with scss in a while (2 - 3 months), so not sure if it's a recent addition to PhpStorm
Launch a terminal and find out the command-line switches offered by your SASS implementation, typically with:
sass --help
You appear to be using old Ruby SASS. If I recall correctly, the switch was:
--no-cache
Add it to the Arguments input box and you should be done.
As already mentioned, Ruby SASS is no longer being developed so it can be a good moment to switch to Dart SASS, which does not have any cache to care about.
Ruby sass is deprecated already for a while, development is moved towards Dart implementation while LibSass is also actual implementation, but may step behind Dart implementation in some aspects. LibSass have plenty of integrations for various languages, please refer documentation by link above.
Both of these implementations are much faster then Ruby sass and doesn't produce any additional cache directories.
I am using Zurb's Foundation framework, and I would like to know how I can edit the default values of the SASS variables. I searched all over the internet but I was not able to find anything that could help me.
Please check this documentation on their site.
Under Available SCSS Variables section, SCSS variables are provided but I don't know where to place them after altering the values. I did not find much help by Googling because Foundation is not that old.
After creating a Foundation project, look for a "_settings.scss" partial that will contain all those variables.
Scroll down on this page: Zurb Foundation 4—Sass Documentation to where it says "Foundation Global Settings and Mixins" for the code in that file.
You should be looking into Sass that is already explained on their site and can be found here. I suggest you start reading the documentations for V3, Foundation 3, as those docs explain better how you can harness the power of Sass with Foundation. You can start reading here then do further reading here. Honestly, Zurb does a fantastic job of documenting their Foundation framework and all you need to know, 99% if not all, are already on their documentation pages.
jOk, there are global variables you can configure (_settings.scss), there are also default (!default) variables at a module level, you can find documentation of in the online docs, i.e. for buttons http://foundation.zurb.com/docs/components/buttons.html (scroll to bottom).
Because these variables are assigned with SASS's !default it is possible to override this in the global scope, but you must make the new variables available before the styles are declared. As in, the variables must appear in the cascade before the buttons do.