When I add jquery ui to the bundle I end up with:
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"
Internet explorer has a limit of 31 style sheets it will load, of which jquery has taken 12. Add in yui reset, base and fonts I'm at 15 style sheets already, with none of the sites styles or plugin style sheets loaded in.
Obviously, everything works fine when it is bundled as there is only one stylesheet generated. My first instinct was to use the ones that use #Import but that causes bundling to fall over or not minify.
What is the best workaround for this, other than fewer style sheets?
My current solution is a #if DEBUG construct but is there a better way?
#if DEBUG
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.all.css"));
#else
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css",
"~/Content/themes/base/jquery.ui.selectable.css",
"~/Content/themes/base/jquery.ui.accordion.css",
"~/Content/themes/base/jquery.ui.autocomplete.css",
"~/Content/themes/base/jquery.ui.button.css",
"~/Content/themes/base/jquery.ui.dialog.css",
"~/Content/themes/base/jquery.ui.slider.css",
"~/Content/themes/base/jquery.ui.tabs.css",
"~/Content/themes/base/jquery.ui.datepicker.css",
"~/Content/themes/base/jquery.ui.progressbar.css",
"~/Content/themes/base/jquery.ui.theme.css"));
#endif
If you really need all the themes simply include the jquery.ui.all.css in DEBUG and RELEASE modes.
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/themes/base/jquery.ui.all.css"));
This way in DEBUG mode you get a single CSS file and in RELEASE mode you get a single, compressed CSS file served with cache headers.
Related
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 add custom font icons to my sencha architect project, and remove unnecessary theme classes but it seems that Sencha Architect does not use the app.scss at all (located in the resources/sass folder of my project). The changes that I made are neither applied in architect nor when I start the app.
app.scss
$include-pictos-font:
false; $include-default-icons: false;
#import 'sencha-touch/default';
#import'sencha-touch/default/src/Class';
#include icon-font('CustomFont', inline-font-files(
'customFont/customFont.woff', woff, 'customFont/customFont.ttf',
truetype, 'customFont/customFont.svg', svg ));
#include icon("map" , "e600", "CustomFont"); #include
icon("check_filled", "e602", "CustomFont");
Just to mention, I did compile the scss file to css and it compiles just fine.
Could someone elaborate, please?
I am using:
Sencha Architect 3.0.2.1375
Cmd: 4.0.2.67
Framework: Sencha Touch
2.3.x
UPDATE:
It turns out that Architect does not use the app.scss file for theming reasons (see Phill's post). When I tried to insert the icon-font another problem did arise. The font-files could not be found. The reason is mentioned in the following post: http://www.sencha.com/forum/showthread.php?280895-How-to-correct-the-Font-theming-in-Architect3
The following code resolved the issue and I can happily use my new icon-font now:
$font-files:
url('../resources/sass/stylesheets/fonts/bla/bla.woff') format("woff"),
url('../resources/sass/stylesheets/fonts/bla/bla.ttf') format("truetype"),
url('../resources/sass/stylesheets/fonts/bla/bla.svg') format("svg");
#include icon-font('IcoMoon', $font-files);
#include icon("map" , "\e600", "IcoMoon");
#include icon("check_filled", "\e602", "IcoMoon");
To be explicit. I added a file to the theme in Architect (a scss resource) and added the aforementioned code.
Architect ignores this file as we give you full theme support. If you want to add custom scss click on the theme under resources. In the config panel you'll see a scss config; click the (+) icon to add a scss resource.
Now select it by either clicking the (->) button next to it or selecting it in the inspector under your theme. Switch to code view and paste in your scss.
In MVC4 you can render CSS stles by using
Styles.Render(path here)
Similarly scripts can be rendered by
Scripts.Render(path here)
But how do render XSL/XSLT stylesheets? Will Styles.Render do the trick?
The reason you do #Styles.Render or #Scripts.Render is because it references a bundle created somewhere in Global.asax, usually in the BundleConfig (look in your App_Start folder). They are created using the code
bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
"~/Content/themes/base/jquery.ui.core.css",
"~/Content/themes/base/jquery.ui.resizable.css"...
so then you can use them in your views as #Styles.Render("~/Content/themes/base/css"). The framework actually creates a virtual file with the path "~/Content/themes/base/css" to enable this bundling technology.
I dont think the stylebundle can be used with xsl/xslt stylesheets, although I dont know for sure. Here are some relevant question to boot.
How to apply an XSLT Stylesheet in C#
or any of these really
https://stackoverflow.com/questions/tagged/xslt+asp.net-mvc
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.
I'm having difficulties getting the ScriptBundle to work properly (if this is supposed to work at all). What I'm trying to do is add another bundle (jQuery) as a dependency to my bundle, like so:
bundles.Add(new ScriptBundle("~/js/myscripts")
.Include("~/js/jquery",
"~/Content/scripts/myscript.js"));
~/js/jquery is the "name" (virtual path) of the jQuery bundle, registered as so (before my dependent bundle):
bundles.Add(new ScriptBundle("~/js/jquery")
.Include("~/Content/scripts/jquery-{version}.js"));
When I do #Scripts.Render("~/js/myscripts") in my view, only myscript.js is rendered to the HTML. If I change the virtual path to jQuery from the one in the name of the bundle to the physical, existing one, it works:
bundles.Add(new ScriptBundle("~/js/myscripts")
.Include("~/Content/scripts/jquery-{version}.js",
"~/Content/scripts/myscript.js"));
Also, doing #Scripts.Render("~/js/jquery") in the view, works. It's just referencing the non-existing virtual path (name) of another ScriptBundle that doesn't work. Is this supposed to work at all? If not, I would like to know where I can post a bug report saying that this scenario should throw an exception if it's not supported. If it is supported, where does it say and why doesn't it work?
Going by what your dependency all you have to put in your layout (view) is
#Scripts.Render("~/js/jquery")
#Scripts.Render("~/js/myscripts")
Update after your comment:
You cannot nest bundles, that is you can't Include a bundle within a bundle, that virtual path is most likely not available while the parent bundle is being created.
Typically I have a separate jquery bundle (including some other infrequently changing js) anyway and then one other js bundle for everything else. works well for browser caching.
On a side note, have you looked at requireJS, which is not really needed if you are bundling everything but it does make your js files better documented as it makes the dependencies explicit
It's not supported, but you could come up with your own solution to this, right? Something like:
var jquery = new[] { "~/Content/scripts/jquery-{version}.js" };
var myScripts = jquery.Concat(new[] { "~/Content/scripts/myscript.js" }).ToArray();
var myOtherScripts = myScripts.Concat(new[] { "~/Content/scripts/otherscript.js").ToArray();
bundles.Add(new ScriptBundle("~/js/jquery").Include(jquery));
bundles.Add(new ScriptBundle("~/js/myscripts").Include(myScripts));
bundles.Add(new ScriptBundle("~/js/other").Include(myOtherScripts));
Seems like this is an unsupported feature, so I've reported an issue for it.