Foodica Documentation

Prerequisites
It is important you have a working knowledge of IonicFramework 2, Angular 2

Created: October 2017
By: Audacitus
Email: contact@audacitus.com

Table of contents

Setup your system for Ionic 3

For windows

For Ubuntu

For Mac

Once Node is installed, open your command prompt/terminal and run the following command: npm install -g ionic cordova

Setup Foodica

  • Download the product file foodica-ionic-3.zip
  • Extract its contents into a project folder
  • Navigate to that project folder via your Terminal/Command Prompt and run npm install
  • Once NPM has installed dependables, run ionic serve

Styling

General Styling

Every page has its own code, style, and html in its self-descriptive folder. All *.scss files are imported into the src/app/app.scss

Located at src/theme/general.scss, This file includes the styling of Ionic components for libertronic that aren’t page specific

Styling for bigger/smaller screens (Using Breakpoint-sass)

Foodica uses Breakpoint , a sass tool for creating size-dependent styles, which is handy when you need case-specific style modifications.

Example

Font  size too small for iphone6? You can increase it for that phone size :

.logo-and-tagline {
    @include breakpoint($iphone5s) {
      padding: 16px 0;
    }
    @include breakpoint($iphone6) {
      padding: 32px 0;
    }
    @include breakpoint($iphone6Plus) {
      padding: 32px 0;
    }
    .logo {
      max-width: 140px;
      max-height: 140px;
    }
  }

You can add more device sizes (sparingly) in src/theme/device-sizes.scss

For more advanced uses of breakpoint, head to their website

Managing Fonts in Foodica

Libertronic comes with google fonts bundled in: VarelaRound and Baloo Bhai. these fonts are copied from the src/assets/fonts folder at build time

To use your own fonts, follow the steps below:

  • Copy the fonts to the src/assets/fonts
  • Change the font-family name and src to reflect your new fonts
    @font-face {
        font-family: "Your Font name";
        src: url("../assets/fonts/your-font-name.ttf") format('truetype');
    }
  • Change the font through the file:
    .primary-font {
      font-family: "Your Font Name";
      &.bold-weight {
        font-family: "Your Font Name";
      }
      &.light-weight {
        // No light defined for Yrsa
      }
      &.semi-bold {
        // No semi bold fo Yrsa
      }
    }
  • Restart ionic serve