Search code examples
cssasp.net-mvcyui-pure-css

Add PureCSS to MVC 4.5 bundle

I'm currently learning ASP.NET 4.5 of the MVC flavour, and I've decided to remove bootstrap completely and go with PureCSS (http://www.purecss.io).

This is largely due to the fact that my web application requires almost no scripting other than on the code-behind, and some light JS for data validation and the like.

Currently I'm linking to the combined PureCSS style sheet from the Yahoo! CDN:

<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">

in my _Layout.cshtml file. This is obviously functional, however I have 2 concerns:

  1. If the CVN (for whatever reason) fails/goes down/changes, all of the styling disappears and I'll have to solve that on the fly (or implement some time of failsafe switchover to another CDN)
  2. I really like the concept of bundling and I'd like to have the local PureCSS library bundled, to prevent the aforementioned problem as well as for the sake of modularization/compartmentalization.

Is generating this bundle a simple matter of:

bundles.Add(new StyleBundle("~/Content/css").Include(
                    "~/Content/purecss_release_1_6/some.css",
                    "~/Content/purecss_release_1_6/other.css",
                    "~/Content/purecss_release_1_6/neat.css",
                    "~/Content/purecss_release_1_6/etc.css",
                    ...
                    "~/Content/site.css"));

If so, that's fine and dandy, but there are DOZENS of css files in the release. Is there a cleaner way to bundle them?

Thank you!

Solution

  • You can use IncludeDirectory to reference the whole directory containing all your CSS files.

    Example specific to your case:

    bundles.Add(new StyleBundle("~/Content/css")
    .IncludeDirectory("~/Content/purcss_release", "*.css"));

    New in .NET 4.5 is an integrated system for falling back from a failed CDN to local material. Tutorial/information: http://www.hanselman.com/blog/CDNsFailButYourScriptsDontHaveToFallbackFromCDNToLocalJQuery.aspx

    Usable information from the link above:

    The basic idea for CDN fallback is to check for a type or variable that should be present after a script load, and if it's not there, try getting that script locally. Note the important escape characters within the document.write. Here's jQuery:

    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-2.0.0.min.js"></script>
<script>
if (typeof jQuery == 'undefined') {
    document.write(unescape("%3Cscript src='/js/jquery-2.0.0.min.js' type='text/javascript'%3E%3C/script%3E"));
}
</script>