Structure

Structure

The structure of Frontstart is easy to understand. Build components in a develop folder and the results will be compiled to a www folder.

Components

By default the name of the develop folder is frontstart-develop and is located in the root. Everything in this folder will be synced and compiled to the www folder frontstart-www.

In the develop folder you also find the component folder with the name frontstart. You can add here your components. Want to try some contributed compontents by Frontstart? You can find them here.

Sass and JavaScript files

All Sass and Javascript files in a component folder will be compiled to frontstart.css and frontstart.js. If you name a Sass file _index.scss and a JavaScript file index.js they will have priority during concatenation. Also a component folder will have priority on other components folders if it has the name “index”. As second priority Frontstart is looking for a folder which begins with the name “theme”.

Ignore

Prefix two dashes in a folder or filename to ignore a complete component or file. This can be useful when debugging or other temporary decisions. For example: frontstart-develop/frontstart/--theme-frontstart will ignore the Theme Frontstart component. This option will also work for dependencies.

Dependencies

You can add all your dependencies like jQuery, Angular and Bootstrap in the dependencies folder. By default the dependencies folder is located in frontstart-dependencies. All CSS and JavaScript files are compiled to dependencies.css and dependencies.js in the output folder. Prefix two dashes in a folder or filename to ignore a complete folder or file.

Environment

You can use several environments in your project. During development you can choose from “develop”, “integration”, “staging” and “production”. This option is usefull when you want to use different service URLs (API) during development. You can add environment code at frontstart-environment

Functions and variables

Frontstart has several JS functions and variables you can use in your project.

Function or variableDescription
a(contentToAlert)Short alert function. Content will ignored in production build
l(contentToLog)Short console log function. Content will ignored in production build
d(contentToLog)Short console log function. Content will ignored in production build
Fs.environmentString: Display current environment
Fs.projectObject: Project information
Fs.device.isOutdatedBoolean: Browser is outdated (<IE10)
Fs.device.isTouchBoolean: Device support touch
Fs.device.getDpi()Returns string: Current screen DPI (ldpi or hdpi)
Fs.device.getSize()Returns string: Current device size (small, medium or large)
Fs.device.getType()Returns string: Current device type (desktop or mobile)
Contributors

Created by Ben Besuijen.

Special thanks to Alion BV for their trust in Frontstart.