Bundle and Minify CSS Stylesheet Files

Overview

To improve the load time of web pages on your website, you can use the application to minimise the style sheet (CSS) files at run time.

This uses Razor technology.

Step-by-step guide

To Bundle and Minify stylesheet Files:

1. Login as an Administrator.
2. Navigate to Content → Template Editor.
3. Click to open the Code Editor.
4. Include web optimisation and Bundler into the razor template.
5. Create a new "cv Style Bundle"
6. Include your styles into the bundle.
7. Create and load your bundle.

@using System.Web.Optimization;
@using Bundler;
@{
  var cvStyles = new cvStyleBundle("~/TemplateBundles/CVStyles");
}
... Other HTML here
@{
	cvStyles.Include("~/documents/css/print/pmain.css");
	cvStyles.Include("~/documents/css/print/pbutton.css");
	cvStyles.Include("~/documents/css/print/preset.css");
// or you can use
	cvStyles.Include( new string [] {
		"~/documents/css/handheld/hbuttons.css",
		"~/documents/css/handheld/hreset.css",
		"~/documents/css/handheld/hmain.css"
	});
}
... Other HTML here
@{
  BundleTable.Bundles.Add(cvStyles);
  @Raw(@Model.TemplateUtil.StyleRender("~/TemplateBundles/CVStyles"))
  // If you want to attach additional tags you can use
  @Raw(@Model.TemplateUtil.StyleRender("~/TemplateBundles/CVStyles","Media:Print;Id:test;SomeTag:SomeValue"))
}

Related help

• Page:
  Style Sheet Editor
• Page:
  Style Guide Class Colours
• Page:
  Bundle and minify JavaScript files
• Page:
  Bundle and Minify CSS Stylesheet Files
• Page:
  Debugging minified JavaScript files