Getting Started

Step 1: Understanding Scope

The project is currently starting a very narrow scope on it's intended audience. It's focused to get a working product live and stable as soon as possible for this niche. The below are the supported technologies:

• .NET Framework 4.0
• ASP.NET MVC 4

The bundling currently supports:

• Less
• JavaScript
• CSS

Step 2: NuGet It

You will need the following NuGet packages installed:

    Install-Package Frappe.Mvc4

This will automatically add Frappe.MSBuild, Frappe.Sprites, Frappe as well.

Step 3: Define a Bundle

Rules of the road:

• All bundles must be created under the App_Bundles folder at the root of your web project.
• All bundles must have the extension of .css.bundle or .js.bundle.
• All includes within a bundle must be relative physical paths to the referenced files.
• All includes within a bundle must existing within your web project.

Steps:

1. Create a bundle by creating an file called Site.css.bundle within the App_Bundles folder
2. Add the xml contents

    <?xml version="1.0" encoding="utf-8" ?>
    <Bundle>
      <Include File="..\Content\Site.css" />
    </Bundle>

1. Add the bundle to your .cshtml
2. For CSS bundle:

    @Html.CssBundle("~/App_Bundles/Site.css.bundle")

1. For JavaScript bundle:

    @Html.JavaScriptBundle("~/App_Bundles/Site.js.bundle")

1. Note: The Frappe.Mvc namespace must be in your using for your view (e.g. example.)
2. Compile and run your app. You should now see the link element emitted to your page pointing at the Site.css file.
3. Turn on bundling by editing your Web.config file. See example below.

<configuration>
  <configSections>
    <sectionGroup name="applicationSettings" type="System.Configuration.ApplicationSettingsGroup, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
      <section name="Frappe.Settings" type="System.Configuration.ClientSettingsSection, System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089" requirePermission="false" />
    </sectionGroup>
  </configSections>
  <applicationSettings>
    <Frappe.Settings>
      <setting name="BundleOutput" serializeAs="String">
        <value>True</value>
      </setting>
      <setting name="CdnHostName" serializeAs="String">
        <value>www.mycdnnamegoeshere.com</value>
      </setting>
      <setting name="AbsolutePath" serializeAs="String">
        <value>False</value>
      </setting>
      <setting name="ProtocolRelativeUrl" serializeAs="String">
        <value>True</value>
      </setting>
      <setting name="ForceSecureUrl" serializeAs="String">
        <value>False</value>
      </setting>
      <setting name="CdnPathPrefix" serializeAs="String">
        <value />
      </setting>
      <setting name="CdnQueryVersion" serializeAs="String">
        <value>True</value>
      </setting>
    </Frappe.Settings>
  </applicationSettings>
</configuration>

1. Now compile and run your app. You should now see the link element emitted to your page pointing at the compiled bundle (e.g. /App_Bundle/Site.min.css.)

Step 4: Define a Sprite

Rules of Sprites

1. Each subfolder including the root of App_Sprites will generate a unqiue sprite based on the images within the folder.
2. Each sprite generation settings can be optionally customized by creating a Settings.xml file in the directory. The defaults are used when none present.

Steps:

1. Create a sprite folder underneath the ~/App_Sprites directory within your project.
2. Place within the folder the images you would like combined into a single sprite image.
3. Optionally, add a Settings.xml file and customized the generated sprite image. This is not needed and defaults will be used when no Settings.xml file exists.

<?xml version="1.0" encoding="utf-8" ?>
<ImageOptimizationSettings>
  <!-- The output image file format -->
  <FileFormat>png</FileFormat>
  <!-- Controls whether base64 inlining should be used for high-compatibility browsers -->
  <Base64Encoding>true</Base64Encoding>
  <!-- The quality level of the format, if the format supports quality settings (such as jpg) -->
  <Quality>100</Quality>
  <!-- The maximum size of a sprite before it will be split into multiple images -->
  <MaxSize>450</MaxSize>
  <!-- The background color of the output sprite -->
  <BackgroundColor>00000000</BackgroundColor>
  <!-- Controls whether the application will tile images along the X or Y axis -->
  <TileInYAxis>false</TileInYAxis>
</ImageOptimizationSettings>

1. Add to the <head> of your page the below snippet to include the generated sprite css stylesheet.

    @Frappe.Mvc.Sprite.ImportStylesheet("~/App_Sprites/Example2WithSettings")

1. Add each individual image to your page where you would like it to show.

    <!-- Image #1 -->
    @Frappe.Mvc.Sprite.Image("~/App_Sprites/Example2WithSettings/cat1.gif")
    <!-- Image #2 -->
    @Frappe.Mvc.Sprite.Image("~/App_Sprites/Example2WithSettings/cat2.jpg")

1. Compile your website and view the sprites