FoBo <...data-lift="Front-End Toolkit Module"/>
This pages introduces you to FoBo, a comprehensive front-end toolkit module for Lift, that, quickly and easily, will integrate some of the industry leading web-centric open source front-end toolkits (like Twitter Bootstrap, AngularJS / Angular Material Design and more) into your Lift application, giving you the flexibility and choice of setting up and use the toolkits of your liking without cluttering your applications source base.
FoBo provides smooth toolkit upgrades and easy fallback/downgrade by simultaneously supporting several versions of the included toolkits and by minimizing the point of change using uniform template declarations that also provides debug-able js and css files in development and minimized files otherwise. A toolkit upgrade/downgrade can be as easy as changing the toolkit initiation code line in Lift boot.
Added to this is a growing number of FoBo API functions that give you even more ease of usage, power and control.
Other from reading the FoBo - Bootstrap Setup and Usage specific page or the more general Setup and usage section below, and the FoBo API, the most up to date way to explore and learn how to use the FoBo module is to fork and/or study the Lift v2.6 Template Applications with Bootstrap v3. They are Lift starter template project's that includes FoBo for its Bootstrap support. You can also study fobo example code on Github.
For more information about the FoBo module, take a look at the FoBo API and the readme on Github.
Responsive Design with FoBo
FoBo comes with setup options for responsive front end toolkits including Angular Material Design and Twitter Bootstrap. Angular Material Design and Twitter Bootstrap are both great responsive and media scalable toolkits.
What is Lift?
If you ended up on this page and don’t know what Lift is, I will sum it up for you by quoting:
Lift is the most powerful, most secure web framework available today.
liftweb.net
and if you ask me, I will add Lift simply Rocks!. As David Pollak, Lift’s founder, will show you in the video, there are Seven Things that distinguish Lift from other web frameworks and here is a podcast by David Across Time and Address Space: Lift 3.0 over at SkillsMatter, Functional Programming eXchange 2013.
- Lift applications are:
- Secure -- Lift apps are resistant to common vulnerabilities including many of the OWASP Top 10
- Developer centeric -- Lift apps are fast to build, concise and easy to maintain
- Scalable -- Lift apps are high performance and scale in the real world to handle insane traffic levels
- Interactive like a desktop app -- Lift’s Comet support is unparalled and Lift’s ajax support is super-easy and very secure
- Modular -- Lift apps can benifit from, easy to integrate, pre built modules
- Designer friendly -- Lift apps can be developed in a totally designer friendly way
The Twitter Bootstrap toolkit
The Twitter Bootstrap toolkit is a great toolkit with lots of components and candy. It’s simple and flexible and has popular user interface components and interactions. FoBo inculdes both the v2.x and v3.x series of Bootstrap
FoBo - Bootstrap Setup and Usage
Font Awesome
Font Awesome is a iconic font designed for use with Twitter Bootstrap but it can be used as-is with other toolkits like Angular Material. You can see it used in this demo as a replacement of Bootstrap’s icon glyphs.
You will find more information on how to set up and use this bootstrap extension in the Bootstrap Customization section on this demo’s Bootstrap dedicated page.
AngularJS
AngularJS lets you extend HTML vocabulary for your application. Used with Lift the resulting environment is extraordinarily expressive, readable, and quick to develop. It is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other JS libraries.
- FoBo has support for AngularJS and several Angular components including:
- AngularJS - AngularJS framework.
- Angular Material - Implementation of Material Design in Angular.
- UI Bootstrap - Bootstrap components written in pure AngularJS.
- ng-grid - Angular Data Grid written in AngularJS and jQuery by the AngularUI Team.
- ui-grid - Angular Data Grid written in native AngularJS implementation, no jQuery
Angular Material
The Angular Material project is an implementation of Material Design in Angular.js. The Angular Material project provides a set of reusable, well-tested, and accessible UI components based on the Material Design system.
Althugh Angular Material is "just a" Angular module it merrits it's own section as it gives you front-end components that will integrate seamlessly with your Lift/FoBo application.
JQuery
JQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
For user convenience FoBo wraps the Lift juery module and embeds it into the FoBo namespace.
Google Code Prettify
Google Code Prettify A Javascript module and CSS file that allows syntax highlighting of source code snippets in an html page.
You will find Prettify used in some places in this demo.
HighlightJS
highlight.js A more reasent (than Google Code Prettify) and popular javasript / css module for syntax highlighting. Higlight JS includes 70+ styles and highlighting for a lot of languages (including Scala). Notably it dose, by choice, not support line numbers.
You will find highlight js used in some places in this demo.
Pace
Pace Automatic page load progress bar, you get a beautiful progress indicator for your page load and ajax navigation. You can see it in action when loading these pages using one of it's simplest css stylings.
Mobile device
Responsive Web - If you have not done it already open this demo in your favorite smart device. Get the url quick and easy by pointing your barcode reader to the barcode image.
Scroll
Scroll the page to see the navbar scrollspy function provided by bootstrap.
Drag
Drag the window to see bootstraps (and foundations) fluid and reactive grid with mobile scalabilty in action.