Assets and Minify

The Ctesius app comes bundled with certain JS and CSS plugins, you can configure which are included or include your own in the config.yml file in your theme. These will then be bundled into the blob.js and blob.css files and included in the site. (you can see a list of available assets here).

In your theme’s config.yml file, you will need a construct such as this:

asset_packs:
 javascript:
  - vendor/bootstrap/transition.js
  - vendor/bootstrap/collapse.js
  - vendor/bootstrap/tab.js
  - main.js
 stylesheet:
  - styles.lcss
  - profile.lcss
  - photoswipe.lcss
  - custom.lcss
vendor_assets:
 javascripts:
  - ctesius
  - asset_pack
 stylesheets:
  - asset_pack

Asset packs are the stylesheets and JavaScript files which you wish to include in your theme. The Vendor assets are the core asset packs you wish to include, asset_pack should be included here as these are the assets defined prior. The Ctesius vendor asset pack includes the bare minimum you need to build a theme on Homeflow, with no excess.

If you would like or need the “classic” bundle of JavaScripts, you can add classic_extra to you YML:

vendor_assets:
 javascripts:
  - ctesius
  - classic_extra
  - asset_pack
 stylesheets:
  - ctesius
  - asset_pack

For a full reference of the Ctesius asset packs and the files they include click here.

To output your minified JS and CSS in your theme, add the following two lines:

<head>
 <link href="/vendor_assets/blob.css" rel="stylesheet" type="text/css" />
</head>
    <script src='/vendor_assets/blob.js' type='text/javascript'></script>
 </body>
</html>

Fonts

Fonts can be used in the standard way.

@font-face {
  font-family: fontello;
  src: url('/liquid_assets/fonts/fontello');
  src: url('/liquid_assets/fonts/fontello.eot?#iefix') format('embedded-opentype'),
       url('/liquid_assets/fonts/fontello.woff') format('woff'),
       url('/liquid_assets/fonts/fontello.ttf') format('truetype'),
       url('/liquid_assets/fonts/fontello.svg#webfont') format('svg');
}

Place the fonts folder in the assets folder in the theme. You can then refer to the folder as shown above with:

/liquid_assets/fonts/fontname