@@include('shared/menu.html')

Introduction

How to get started with Fika!

This guide will help you get started with Fika! All the important stuff is documented here, but should you have any questions, always feel free to reach out to contact@waveless.co.

New & extended components

Fika extends Bootstrap by not only building on top of its existing components, but also introducing entirely new components and plugins.

File structure

  • 📁 src
    • 📁 assets
      • 📁 css
        • 📁 sass - well structered SASS source files
          • 📁 abstracts
          • 📁 base
          • 📁 components
          • 📁 layout
          • 📁 sections
          • 📁 utilities
          • 📄 user-styles.scss - your custom styles
          • 📄 user-variables.scss - your custom variables
          • 📄 main.sass - gathers SASS source files
        • 📄 main.css - compiled style file
      • 📁 images - Image assets
      • 📁 js - JavaScript source
      • 📁 vendors - Third party plugins
    • 📁 documentation - Documentation
  • 📄 .gitignore - Hide all unnecessary files from Git
  • 📄 package.json - List of dependencies and npm information
  • 📄 gulpfile.js - All the build commands

Customizing SASS

There are 2 basic ways to customize your template...

  1. Customizing SASS. This is more versatile and sustainable way to customize Fika, but requires the sass compilation step. The 2 major benefits of this strategy are using variable overrides to easily customize template styles, plus you never have to touch Bootstrap or Fika's source, meaning future updates will be much, much, simpler. There are 2 provided files that make this strategy simple to implement:
    • src/assets/css/sass/user-variables.scss: This file can be used to override Bootstrap core and Fika variables for customizing elements that have been tied to variables.
    • src/assets/css/sass/user-styles.scss: This file can be used for writing custom SCSS (or regular CSS) that will be compiled alongside Bootstrap and Fika's core files.
  2. Compiled CSS. If you plan on using Fika"as is", or only need limited customization, feel free to simply attach the compiled main.css file in the dist/assets/css directory.

Dev Setup

  1. Make sure you have Node installed since Fika uses npm to manage dependencies. If you don't, installing is quite easy, just visit the Node Downloads page and install it.
  2. Unzip your template and open your command line, making sure your command line prompt is at the root of the unzipped template directory.
  3. npm install gulp-cli -g: If you don't have the Gulp command line interface, you need to install it.
  4. npm install: Open your command line to the root directory of your unzipped template and run to install all of Fika's dependencies.

It's that simple! Now you can benefit from using Gulp while working on this template. If you're not used to using terminal, don't worry, this is as advanced as it gets. If you want to kill the server and stop Gulp, just hit Control + C.

Compiling

Gulp is used to manage Fika development. Open your command line to the root directory of the template to use the following commands:

  • npm run gulp-default or gulp default or gulp
    This is the main command for development purposes. It will:
    1. Compile Sass from src/assets/css/sass/main.sass file into dist/assets/css/main.css.
    2. Translate src/assets/js/app.js file by Babel into JavaScrip that all modern web browsers understand (in a case you use some advanced syntax), move the translated file into dist folder.
    3. Copy all HTML pages, images, fonts, vendors from src folder into the dist folder
    4. Watch for changes inside sass, js, fonts, images folders and HTML pages to run relevant commands and init Live Reload to update browsers instantly after one of the files was changed;
    5. Start the local server with live reload. The root folder for the server is the dist folder.

    • Now, you can easily start to work on source files and see all the changes in your browser.

  • npm run gulp-build or gulp build
    This command will:
    1. Compile, add vendor prefixes and minify Sass from src/assets/css/sass/main.sass file into dist/assets/css/main.min.css.
    2. Translate src/assets/js/app.js file by Babel, minify it and move into dist folder.
    3. Automatically change pathes inside HTML pages to link minified files.
    4. Optimize images.
    5. Copy all HTML pages, images, fonts, vendors from src folder into the dist folder.

    • After the command finishes all the tasks, you will have a fully functional and ready-to-deploy website in the dist folder.