Skip to content
FoBo - A Comprehensive Front-End Toolkit Module for Lift
JavaScript CSS Scala Other
Find file
Latest commit 00c02eb @karma4u101 Updating readme.

FoBo - A Comprehensive Front-End Toolkit Module for Lift

Build Status Stories in Ready Stories in Progress Gitter

FoBo is a Lift module that includes industry leading open source front end toolkits for developing mobile scalable responsive web applications that will jazz up your Lift applications with the toolkit(s) of your choice.

A live demo and introduction to using this module, including API documentation and links to running examples of starter templates and more, can be seen at the FoBo Template Demo.

With this Lift module you will get a hassle free inclusion and smooth upgrades of toolkits, you decide what toolkits and versions to enable. The FoBo module is making development, maintenance, upgrade and fall-back quick and easy (typically a one liner change in lift boot), by simultaneously supporting several versions of the included toolkits and, without code or reference changes, providing debug-able js and css files in development and minimized files otherwise.

Using this module you will also get a clean separation of the toolkit files and your application specific resources as the module dose not clutter your applications web-app resources directory.


The FoBo module also has a evolving API that includes snippet:s and helper object:s (see API documents for usage) that will take care of some common toolkit and component initiation and usage, like lift site-map to bootstrap menu builders, resource injection, script generation and more.

FoBo - Lift starter template

Bootstrap A Lift v2.6 starter template with FoBo setup using Bootstrap v3.x and FoBo's BootstrapMegaMetaProtoUser (for mapper ProtoUser views) is available from here Lift v2.6 Template Applications

Bootstrap A Lift v3.0 starter template with FoBo setup using Bootstrap v3.x and FoBo's BootstrapMegaMetaProtoUser (for mapper ProtoUser views) is available from here Lift v3.0 Template Applications

Material Design A Lift v3.0 starter template with FoBo setup using Angular Material and FoBo's MaterialMegaMetaProtoUser (for mapper ProtoUser views) is available from here FoBo-Demo

If you have ideas and suggestions let us know!


Improvements, contributions and suggestions are welcome! Pick a issue marked as ready by the waffle badge above or open a new issue and start working on a PR. Please see the Contribution Document. You can also leave a issue report or drop a question/suggestion to the Lift's mailing list

As FoBo is using this Git branching model the main branch is just updated for releases so your pull requests will be against the Development branch


For a comprehensive list of updates see Changelog

Module names

The following is a list of names that can be used in Lift Boot either pulled in by the FoBo meta module or as stand alone (sub) modules. For more information se respective sub modules readme.

  • BootstrapXYZ
  • FontAwesomeXYZ
  • JQueryXYZ
  • JQueryMigrateXYZ
  • PrettifyXYZ
  • PaceXYZ
  • KineticJSXYZ
  • AngularJSXYZ with components (AJSUIBootstrapXYZ, AJSUIGridXYZ, AJSNGGridXYZ, AJMaterialXYZ)

Where X is major, Y minor and Z incremental version numbers as seen in the Toolkits list above (for example BootstrapXYZ will be Bootstrap230 for Twitter Bootstrap v2.3.0) For more information on how to set this up see below.

Quick Start with Lift Template Applications

The only prerequisites for using this Lift module is that you have Git and Java installed and configured on the target computer but a suitable Lift template project will also come in handy. A Scala v2.11 Lift v2.6.x starter template with FoBo setup using Bootstrap v3.x and FoBo's BootstrapMegaMetaProtoUser (for mapper ProtoUser views) is available from here Lift v2.6 Template Applications.

You don't need to use it but this project's also includes a Eclipse (and a IDEA) plug-in for browsing the code, see the Scala IDE section below.

Integration into your project

Dependency settings

For module versions >= 0.9.3 put the following in your project build.sbt files lift libraryDependencies section

"net.liftmodules" %% "moduleName_x1.y1 % "x2.y2[.z2][-SNAPSHOT/rcx/mx]"

or if you are using Maven


Where x1.y1 is Lift major and minor version numbers and a.b.c is Scala version number and x2.y2.[z2] is the module's major x2, minor y2 and eventual incremental numbers z2 followed by a eventual SNAPSHOT release candidate (rcX) or milestone (mX) version part.

For example:

"net.liftmodules" %% "fobo_2.6 % "1.5.0-SNAPSHOT"

The example will include a module built for lift 2.6.x. If you are using maven observe that the artifact id also needs the Scala version.

now do a sbt clean update .....

Lift FoBo boot hooks

Put the following into your lift Boot

import net.liftmodules.FoBo

//If using defaults FoBo init params can be omitted
FoBo.InitParam.JQuery=FoBo.[JQueryXYZ module option name]
FoBo.InitParam.ToolKit=FoBo.[ToolkitXYZ module option name]
FoBo.InitParam.ToolKit=FoBo.[ev. additional/extra toolkit module name]

Lift FoBo Template hooks

Put something like the following in your Lift templat(s) head section (see below for available names)

<link rel="stylesheet" type='text/css' href='/classpath/fobo/[css file name]'>
<link rel="stylesheet" type='text/css' href='/classpath/fobo/[another css file name]'> 
<link rel="stylesheet" type='text/css' href='/classpath/fobo/[a third css file name]'>
<link rel="stylesheet" type='text/css' href='[path/to/you/app/specific/css/file/in/the/webapp/dir]'>
<script type="text/javascript" src="/classpath/fobo/[script file name]"></script>
<script type="text/javascript" src="/classpath/fobo/[another script file name]"></script>
<script type="text/javascript" src="/classpath/fobo/[a third script file name]"></script>

For more information see readme in respective sub module. You can now also use use FoBo's resource injection snippet to inject all your fobo css and js resources

<link data-lift="FoBo.Resources.injectCSS?resources=file name,another file name,a third file name,..."></link>  
<link rel="stylesheet" type='text/css' href='[path/to/you/app/specific/css/file/in/the/webapp/dir]'>
<script data-lift="FoBo.Resources.injectJS?resources=file name,another file name,a third file name,..."></script>

For more information see FoBo API: Resources

Available CSS and JavaScript files

See the "Lift FoBo Template hooks" section in readme file for respective FoBo module listed above.

Scala IDE for Eclipse

Sbteclipse provides SBT command to create Eclipse project files

1) Usage

project$ ./sbt
    > compile
> eclipse 

2) In eclipse do:

File ==> Import...
Select General ==> Existing Project into Workspace 
Use "Brows" to look up the project root ....

Note: The compile step prior to the eclipse command in (1) is needed for eclipse to recognize the generated BuildInfo.scala file that is part of FoBo's build system.

Sub-Modules -- Toolkit:s and available versions

FoBo is built up of several sub module that also is available for use separately

FoBo artifacts is available for: Lift 2.4, 2.5, 2.6 and 3.0-SNAPSHOT

The FoBo meta module includes the following sub-modules and supports the following toolkit versions

Note: Some of the listed toolkit versions may have been deprecated (and possible removed after having been deprecated in 2 releases).

Old submodules

Modules available as maven artifacts but that have been split out of the FoBo meta module. The modules can still be used as stand alone modules.

For feature listings on all releases see


This FoBo Lift module were written by Peter Petersson. The Lift Module conventions were developed by the Lift community.

After many years of Java EE development I started look at Scala/Lift in May 2011. If you find some none "best practice" stuff in there and if you find something you think could be done in a more Scala/Lift fashion please let me know. Improvements, contributions and suggestions are welcome!

Something went wrong with that request. Please try again.