Short version: I would like to use a font set to REPLACE Glyphicons without also including Glyphicons CSS, and without modifying the source bootstrap.less file.
Long version:
Using Bootstrap's own Grunt file and source files as a base, by default a build process will include Glyphicons in the compiled CSS file.
Since I do not plan to use Glyphicons at all, the "lowest hanging fruit" for me is to go ahead and compile this way, but also include the font I will be using (for example, Font Awesome).
However, the more "elegant" way will be to only include the replacement font.
I can modify bootstrap.less, which includes this line:
#import "glyphicons.less";
such that the Font Awesome less file is used instead. However, the problem with this is that I am using Bootstrap as an "untouchable library" not as a modifiable source file. I want to be able to drop in new versions of Bootstrap at a moment's notice without the need to remember to change this modified line.
Does Grunt have the concept of "replace string A with string B in memory before the compile runs"? Or is there another way to accomplish my goal? Or should I just not worry about it and include both sets of compiled CSS?
I think you can use grunt-string-replace
https://github.com/erickrdch/grunt-string-replace
Related
I'm using Visual Studio Code to code a Vue.js component and need to reformat the code of that component.
I did not find any built-in formatters, and the first choice for a plugin was vue-buetify which informs after installation that
There are many bugs in the extension, please do not use it, the better choice is vetur
I then tried Vetur by installing it but there is no place where I see an option to beautify the code currently in the editor. The Shift + Alt + F command has no effect.
How can I actually beautify (reformat) the code for a Vue component?
I've been fiddling with formatting quite a bit since my previously working project stopped formatting one day. Here's what I think the current state of the art is:
Use extensions vetur and prettier (specifically, esbenp.prettier-vscode Prettier - Code formatter). (You get these preinstalled by Vue.js Extension Pack esbenp.prettier-vscodeand others.)
Vetur is the (current) mandatory default tooling for vue. Accept no substitutes.
Prettier doesn't support .vue files per se, so that filetype is disabled by default: https://github.com/prettier/prettier-vscode/issues/338.
But Vetur understand its limitations and instead delegates formatting of individual sections of the .vue file to a potentially different formatter. By default, though, it delegates everything other than HTML sections to Prettier. https://vuejs.github.io/vetur/formatting.html. It disables formatting for HTML sections.
Vetur developers are down on js-beautify-html, although it is still apparently functional: https://vuejs.github.io/vetur/formatting.html. And they don't make an alternative recommendation at this time.
Prettier support for HTML, which would be the obvious choice if only it existed, is a long, sad story. Currently (May 2018), prettier formats HTML as JSX. Many subtleties are mentioned, but one issue that I have grasped is that JSX converts begin/empty/end tags to empty tags, e.g to . Apparently React and (I believe) Vue, do not like this, hence vetur disables Prettier for HTML.
So I'm going forward with enabling js-beautify-html in vetur settings, hoping for the best and keeping my eyes peeled. But I'm such a superficial coder that I may never trip over its known issues.
In 2022, the situation regarding formatting Vue files regaled in another answer has vastly improved.
Vetur is still the de facto solution for managing .vue files in VS Code, but in the time since this question was asked, Prettier added full support for them (and HTML proper). This means you can format them using Prettier without Vetur if you so desire.
Note that Vetur does not support VS Code's "Format Selection" functionality, even though Prettier does (for a small set of languages):
Vetur only has a "whole document formatter" and cannot format arbitrary ranges. As a result, only the Format Document command is available.
The Format Selection command does not work.
If you do decide to use Vetur, you shouldn't need any other extensions to get formatting to work, as the extension comes bundled with all of its available formatters. As long as you have the extension installed and enabled, formatting with the "Format Document" command or Shift + Alt + F should work out of the box.
Vetur's settings allow the user to configure which of its available formatters is used for each language it supports (Prettier is the default for all but Sass and Stylus). The formatters can also be toggled off per language, or entirely, if you prefer to use some other formatting solution instead.
If you have installed the Vetur extension on VS Code,
Go to the VS Code extension area.
Find Vetur and select the gear icon to enter settings of Vetur.
Scroll down until you find
Vetur › Format › Default Formatter: JS
Default formatter for <script> region
Select pretter-eslint from dropdown menu
(if you don't see that option you can install Prettier extension).
Now you can see it formats your code automatically whenever you save.
Switching from "bootstrap": "~4.0.0-beta.2" to "bootstrap": "^4.0.0" added new variables in the _variables.scss. Boostrap classnames only change when there is a major version upgrade (AFAIK), but does the same apply to _variables.scss too?
It would change how we share the _variables.scss accross our application.
Does variable names change between releases?
The variable names shouldn't change as Bootstrap 4 is now in "real" release (out of beta).
The variables are there for a good reason: Your CSS shouldn't break when you upgrade. (not counting major versions of course).
Of course new variables can be added, as those shouldn't break your CSS.
If you are in any way unsure before upgrading, you can always check the changelogs. Those should tell about any breaking changes.
Using variables in SCSS
When you have set up your build tools, and created your SCSS file (let's say custom.scss), you can import Bootstrap and override any variable you want (you'll find them in _variables.scss in the Bootstrap source code):
//Your variable overrides
//Let us change the primary color which is set in the primary variable
$primary: #ce40c5;
//In this case we are importing everything
//Here we are using NodeJS with NPM, so your files should be here
#import "node_modules/bootstrap/scss/bootstrap";
Some things to note:
If you aren't using NodeJS, then just make sure that the import path directs to the bootstrap.scss file (don't put .scss in the import)
If you have checked the source code of Bootstrap 4, you may have seen !default after every variable. Don't include that in your override. It just tells Sass that the variable can be replaced
There's a bunch of good information about this in the docs, so feel free to check there if you are missing anything (or ask).
I use webpack for JS and now I want to use it for styles. I have a lot of styles in different folders and i want to compile them all without requiring each of them mannaully. The question is how to gather all the .less files in the folders and compile them via less-loader?
This isn't how webpack is meant to work, really. If you really want to do this, grunt/gulp is going to be a better choice.
Webpack's require mechanism ensures you build only the CSS you need for any given entry point, and gives you dependency management as well. If you do want to use webpack, but don't want to use the style-loader to insert them into the DOM etc., you can use the Extract Text plugin to build your compiled CSS into a separate file.
I found some workaround using require.context.
First you need to create a js file in the root of the styles folder if you don't have one.
Use this code if you use css or less and always extract them
require.context('./', true, /(\.less$)|(\.css$)/);
First argument is relative path to folder in which webpack should search for the files, second tells that it should search in subfolders and the last one is regexp of the extension of the files that webpack should require. Then you need to requre this file or use it as entry point. This works if you use extract-text-webpack-plugin but doesn't work otherwise.
Using styles without extracting them to style separate file
The example above doesn't work if you don't extract them because webpack generate modules with styles but doesn't execute them. This is complete example that works in both cases:
(function (requireContext) {
return requireContext.keys().map(requireContext);
} (require.context('../', true, /(\.less$)|(\.css$)/)));
I'm diggin' the Glyphicons in Bootstrap 3, but it looks like they're not all there! I'd really like to use the building icon, but Googling hasn't turned up much of anything.
Does anyone know how to add the missing Glyphicons to Bootstrap 3?
You can build your own custom font using the free service: http://fontello.com/
Simply drag your glyphicons-halflings-regular.svg file in, choose the icons you want to use and download a custom font containing only that which you need.
Fontello comes preloaded with the following libraries:
Fontelico
Font Awesome
Entypo
Typicons
Iconic
Modern Pictograms
Meteocons
MFG Labs
Maki
Zocial
Brandico
Elusive
Linecons
Web Symbols
You can also buy the full version of Glyphicons for $59 at http://glyphicons.com/
I wanted to use the Glyphicons Pro I'd bought but expanding the current halflings stuff inside bootstrap was messy. So I created a separate css file for each icon set (full, filetypes & social) and copied the way bootstrap initialises them so I could use similar syntax.
i.e.
<span class="glyphpro glyphpro-download"></span>
<span class="glyphfiles glyphfiles-xml"></span>
<span class="glyphsocial glyphsocial-github"></span>
This way you can load only the ones you want and when you want and you can use the vanilla bootstrap config. Find my files here: Gist#GitHub
I have purchased the full Gylphicons set from http://glyphicons.com/ and wanted to use all the icons available. If you are using less you may have to do something different I dont know.
What I have done and worked for me after trying various things posted from this thread and others on the stackexchange network is the following:
(1) Backed up my original bootstrap.css file (I have modified mine, plus good idea)
(2) Copied all the glyphicons-regular font files from /web/html_css/fonts directory to the fonts directory where my bootstrap font files are located
(3) Starting on line 263ish of bootstrap.css make the change to reflect like below: (yours might be slightly different)
#font-face {
font-family: 'Glyphicons Halflings';
src: url('../fonts/glyphicons-regular.eot');
src: url('../fonts/glyphicons-regular.eot?#iefix')
format('embedded-opentype'), url('../fonts/glyphicons-regular.woff')
format('woff'), url('../fonts/glyphicons-regular.ttf')
format('truetype'), url('../fonts/glyphicons-regular.svg#glyphiconsregular') format('svg');
}
They url's should be pointed at the new font files.
(4) If you want all of the glyphs like I did then open up the file in the /web/html_css/css/ directory labeled glyphicons.css and copy all the css for the glyhicons except the part with #font-face{} and the .glyphicon{}
and paste into empty text document.
(5) You will need to do a search and replace (I did anyway) for .glyphicons, mind the (s) at the end and replace with .glyphicon no (s) on the end
(6) Next open up the bootstrap.css file and comment out or remove all the other .glyphicon-whatever styles and paste in your new styles.
(7) You may need to remove the line from the very bottom of the file which point to the bootstrap.css.map file. I didn't have to but you may need to.
(8) Happy Glyphing!
NOTE You should be setup to use all the glyhpicons now. Just keep in mind that some of the names of the glyphicons are different then in the original bootstrap file.
I created a repository for the modified css file: https://github.com/snowballrandom/bootstrap
It would be simpler to just create a custom .png and use css normally.
When I use my custom build of dojo, dojo.currency.format doesn't use the correct currency symbol.
This is the statement I use:
dojo.currency.format(1234.567, {currency: "USD"});
This is the result when I use the standard dojo release:
"$1,234.57"
This is the result when I use my custom build of dojo:
"¤1,234.57"
How can I get my custom dojo build to produce the correct results?
I encountered this issue when first trying to use the dojo build. It has to do with the character encoding of the files. Check out the character encoding of an unzipped release (non source). Compare that to the character encoding of files in unbuilt source, and the encoding of files are a custom build. To see if this is an issue, (in chrome) you can force the browser to render the contents in a given encoding. You can try this to see if it is actually the issue you are having.
The easy solution to this (for me at least) was to set the charset on the dojo script tags
<script type="text/javascript" src="/path/to/dojo" charset="UTF-8"></script>
Dojo has a couple of pages on encoding that are worth taking a look at.
If you are using shrinksafe in the build, you may also need to specify the encoding there:
java -jar -Dfile.encoding=UTF8 shrinksafe.jar
Does your build have access to dojo/cldr/nls directory for the localization files of your locale? Check in Firebug whether it attempts, but fails to load currency.js from mentioned directory.