@lassehaslev/banner-kickstarter

Warning! Dont use yet - (Not production ready)

Helper package for quickly create banners

Whats included

• JS bundler
• Sass complier with file inliner
  • Inline images
  • Inline fonts with subsetting
• Automatic minification of script and style files
• Work live in your browser
  • Test banners on external devices on same network (mobile, tablet and desktop)
  • Refreshes page on save (Updates all browser that visits the site, including external devices)

Install

# Get the template file
npm install @lassehaslev/banner-kickstarter --save-dev

# Setup template
./node_modules/.bin/banner-serve init

# Run npm install again to include dependencies of template
npm install

Usage

# Start server
npm run dev # alias for ./node_modules/.bin/banner-serve
# See external url in your terminal for testing on your devices
# Just write the url in your device browser

#! Note !#
# You may have to refresh your browser once first time you run dev

# Minify banners for production
npm run build # alias for ./node_modules/.bin/banner-serve production

Javscript files

we use webpack to bundle you packages. You dont have to use it, but you can. The js files are also es6 compatible and will be compiled to vanilla js on production.

Remember to include sass file in .js if you want to compile sass.

The javascript file is compiled to dist/build.css.

// include style
require( './Style/main.scss' );

Sass files

We use sass to compile css files to use in your banners. We have created some sass sugar for inlining your content. Remember to include sass file in .js file to compile sass.

The style file is compiled to dist/style.css.

@font-face {
    font-family: 'MyFont';
    src: inline-font( 'path/to/your/font.ttf' ); // Include full font
    // src: inline-font( 'path/to/your/font.ttf', '[0-9]' ); // Add regex to subset font
}
body {
    background-image: inline-image( 'path/to/your/image.png' );
}