Additional documentation/examples

[intelligence]

Hey again!

Just started using the generator for a projector and realize I'd be very happy for some additional documentation / examples. There's some functions called setImage and loadImage. How do you use those and why?

Also a bit interested on how you work with fonts as I can see there are some gulp stuff for it, but no folder to put font files.

Thanks!

[pyramidium]

Hi again,

The loadImage function handles the preloading of images and the setImage function handles the width, height and background image settings for the element.

You can create a fonts folder in the src/ directory and add fonts to that. The gulp task is configured to copy all files in the fonts folder. They can be linked using @font-face in a scss file like so:

@font-face {
  font-family: 'MyWebFont';
  src: url('MyWebFont.eot'); /* IE9 Compat Modes */
  src: url('MyWebFont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('MyWebFont.woff2') format('woff2'), /* Super Modern Browsers */
       url('MyWebFont.woff') format('woff'), /* Pretty Modern Browsers */
       url('MyWebFont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('MyWebFont.svg#MyWebFont') format('svg'); /* Legacy iOS */
}

This was not added to the 300x250 example as we tend to use images over fonts to cut down the overall file weight but we left the gulp task in there just in case there is a need for web fonts.

Hope this helps.