A bit about environment: we do UI build automation with Grunt, we do use Twitter Bower for managing third-party dependencies, as we don't want to keep third-party code in our repository, we use Compass for CSS extension.
Currently making a compressed version of vendor assets into single CSS file and encountered a problem, that Compass doesn't transform somehow images to inline ones while build. We want all images to be inlined into resulting CSS file with Data URL (as long as we support browsers newer than IE9 =).
Master SCSS file including Bootstrap SASS looks like
// styles/main.scss
$iconSpritePath: '../components/bootstrap-sass/img/glyphicons-halflings.png';
$iconWhiteSpritePath: '../components/bootstrap-sass/img/glyphicons-halflings-white.png';
//..
#import "../components/bootstrap-sass/lib/bootstrap";
Compass command looks like
compass compile --css-dir target/compass/styles \
--sass-dir app/styles --images-dir app/images --output-style expanded
Resulting output is like
// target/compass/styles/main.css
/* line 18, ../../../app/components/bootstrap-sass/lib/_sprites.scss */
[class^="icon-"],
[class*=" icon-"] {
display: inline-block;
...
/* WANT THIS IMAGE INLINED */
background-image: url("../components/bootstrap-sass/img/glyphicons-halflings.png");
...
}
So, main desire is to get all url() expressions to hold base64 encoded images inline. As an alternative, we can switch to LESS, if it provides this ability more easily. Actually, a good thing, because we'd eliminate dependency on Ruby/Compass and we'd be able to install everything with NPM
try this
inline-image($image, $mime-type)
http://compass-style.org/reference/compass/helpers/inline-data/#inline-image
http://blog.derekperez.com/post/755676493/smarter-sprites-inline-image-function-with-sass
Multiple Background Images using Sass / Compass
Just changed the variable for base path in bootstrap SASS main file. it helped.
Related
I want to install fonts using npm, for example, Open Sans or Roboto.
If I search for Open Sans on npm and filter for packages with over 1000 downloads per month I find a whole list. I am not sure which source to choose here, some are not well maintained and none of them are from the original source of the font, in this case, google.
npm-font-open-sans
typeface-open-sans
open-sans-all
open-sans-fontface
opensans-npm-webfont
I noticed that fonts are often used through a direct link to fonts.googleapis. I would prefer to have a local copy of the font to be able to develop offline. Is there a common way to install fonts through npm? Or is there another automated font download tool that I'm not aware of?
I use typefaces yarn add typeface-roboto
and then just do a require("typeface-roboto") / import "./typeface-roboto" or whatever font you choose.
I hope this is the answer you're looking for?
Use fontsource, typefaces is deprecated now.
yarn add #fontsource/open-sans // npm install #fontsource/open-sans
Then within your app entry file or site component, import it in. For example in Gatsby, you could choose to import it into a layout template (layout.js), page component (index.js), or gatsby-browser.js.
import "#fontsource/open-sans" // Defaults to weight 400 with all styles included.
Fontsource allows you to select weights and even individual styles, allowing you to cut down on payload sizes to the last byte! Utilizing the CSS unicode-range selector, all language subsets are accounted for.
import "#fontsource/open-sans/500.css"; // All styles included.
import "#fontsource/open-sans/900-normal.css"; // Select either normal or italic.
Alternatively, the same solutions could be imported via SCSS!
#import "~#fontsource/open-sans/index.css";
#import "~#fontsource/open-sans/300-italic.css";
Fontsource
The typefaces project is now deprecated and its successor is fontsource.
Usage
There's no much difference at the point of using it.
Install:
yarn add #fontsource/open-sans // npm install #fontsource/open-sans
Import:
import "#fontsource/open-sans"
Reference:
body {
font-family: "Open Sans";
}
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$)/)));
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
I am trying to use LESS variables in Twitter Bootstrap but cant seem to get them to render in my application.css file
So when i setup bootstrap i installed
rails generate bootstrap:install --less
Which gave me my
bootstrap_and_overrides.css.less
So my understanding is that in this file i can set my LESS variables like so
#white:#FFFFFF;
and then in my css file i can just call them like so
color: #white;
In my bootstrap.less file i call these
#import "twitter/bootstrap/bootstrap";
#import "twitter/bootstrap/responsive";
#import "twitter/bootstrap/variables.less";
and in my application.css file i call the bootstrap file
*= require bootstrap_and_overrides
Gemfile
gem 'less-rails'
This doesnt work and my variables are not being applied
Can anyone see anything that i am doing wrong?
any help appreciated
Thanks
... I can set my LESS variables like so
#white:#FFFFFF;
and then in my css file i can just call them like so color: #white;
Hi, I'm not so familiar with using LESS inside Rails, so apologies if I'm off here.
I can only use less variables inside a file which will be compiled. So for example I can set
#white:#FFFFFF in a variables.less file
perhaps in a custom.less file I have
.light{
color:#white;
}
After I've compiled everything I can use the class .light in my CSS
So to address your quote above, you can set your less variables like
#white:#ffffff
and then you can use that variable in another less file which will be compiled, but not directly in a CSS file.
Using Middleman 2.0.14, I use the Compass features to generate some sprites in my CSS file with:
#import "companies/*.png";
#include all-companies-sprites;
This takes all the files from source/images/companies/*.png and generates a single sprite file source/images/companies-s45e421528f.png. So far, so good.
When I do a middleman build, it dutifully copies over the generated image file, but also includes the companies/*.png files.
Its not a big deal to have a deployment script remove these extra files, but I wonder if there is an option I'm missing somewhere? (Or maybe the 'almost ready to release MM 3.x' has a solution?) Perhaps I should put the companies/*.png files somewhere else in the source tree?
I suggest cleaning them up with a script (or an after_build hook). This is the default behavior of Compass, to generate images in development mode, and it would require some monkey patching to alter (for now, the Compass beta have direct access to these options).
In 3.0, you could try:
configure :build do
ignore "source/images/companies/*.png"
end
But I'm not sure Compass wouldn't choke on that.
Using ignore slowed down the build significantly for me so I preferred putting the sprite assets outside of source/.
This way, sprites are generated under source/sprites/, build/sprites and the sources are excluded without ignoreing it.
Here is how to set this up:
# config.rb
compass_config do |config|
# tell Compass to load sprites from `project_root/sprites`
config.sprite_load_path =
config.sprite_load_path
.to_a
.push(File.join root, 'sprites')
end
# style.css.scss
#import "..sprites/companies/*.png";
#include all-companies-sprites;