Introduction

The Frontfire Web Frontend Framework offers essential styles and effects combined with a consistent set of interactive widgets and layout utilities. It is suitable for web pages and web applications that need a modern and consistent look and feel and use responsive design to work on all devices and screen sizes. All interactions are fully touch-aware and work with any type of pointing device.

Jump to the demos (incl. docs)

Requirements

Frontfire is built from the ground up to support modern and widespread web browsers. This includes Mozilla Firefox, Google Chrome, Microsoft Edge and Apple Safari, but also the last version of Microsoft Internet Explorer 11. (Note: IE support may be limited because it is less tested.) This framework builds upon jQuery and was tested with version 3.2 and up.

Download

Download the current development snapshot of Frontfire and copy the files into your website.

Complete archive Source archive

For more information, please visit the GitHub repository page.

There are currently no CDN offerings available so you have to host the files yourself.

Building

Frontfire is written in modern JavaScript and SASS. The distribution files are converted to browser-compatible JavaScript and standard CSS with a set of public tools (CSS: sassc, csso; JavaScript: rollup, babel, uglifyjs) bundled in the Mini Web Compiler application for Windows.

To customise the styles with the provided SASS variables, you can either build your own version of Frontfire and use the build output files statically, or just include all SASS source files into your web project and build the CSS file right there.

When building your own version, you can also leave out certain modules that you don’t need so you can further reduce the file size significantly.

Installation

To install Frontfire to your website, just include two files into your HTML pages. Additionally, a recent version of jQuery is required for Frontfire to work.

The files are minified and can be further compressed with HTTP GZip compression.

File	Minified	Compressed
frontfire.min.css	199 kB	21 kB
frontfire.min.js	99 kB	31 kB
Total	298 kB	52 kB

It is recommended to include all stylesheets at the end of the HTML <head> and all scripts at the end of the HTML <body> element. Then include your site-specific styles and scripts after the library files to be able to customise the library’s styles and build upon the library’s scripts.

<head> ... <link rel="stylesheet" href="lib/frontfire/css/frontfire.min.css">  <link rel="stylesheet" href="css/site.min.css"> </head> <body> ... <script src="lib/jquery/js/jquery-3.3.1.min.js"></script> <script src="lib/frontfire/js/frontfire.min.js"></script>  <script src="js/site.min.js"></script> </body>

Demos

These pages showcase the features of Frontfire and explain its usage. This is currently the only documentation besides the comments in the source code.

Content

At the heart of every web page is content. It consists mostly of text. A consistent set of styles gives that content a comprehensible look and a nice feel. When using Frontfire, you are free of the basic tasks of typography design. Many of the everyday questions are already answered in a modern and versatile way. You can still customise the appearance with SASS variables if you like.

Layout

Layouts arrange content in ways that are familiar from other environments like desktop applications. Most of these layouts are interactive and adapt to any screen size.

Forms

Forms let the user input data. Frontfire provides a responsive form layout as well as several specialised widgets for advanced data interactions.

Drag & Drop

Drag & drop interactions add pointer-based behaviours to any element. You can add mouse- and touch-based features with just a few lines of code. Some of these interactions are also the basis for other widgets.

Why not …

Why have I created a new library and not used one of the established solutions? Here are a few things to compare.

Bootstrap

Bootstrap’s main point is its responsive grid feature. Nearly everything is based on it. My experience with real-world websites though is that the grid isn’t flexible enough. The grid cannot be used to shrink the navigation just when it needs to. The grid cannot be used to relayout text and images when space runs out. And images can be any arbitrary size. So I still ended up defining my own break points and all the media query logic behind it. Customising responsive layouts requires lots of complex CSS code to undo Bootstrap’s defaults. Instead of using Bootstrap and then undoing half of it, I decided to redo just the half I needed, in the way I needed it.

jQuery UI

jQuery UI’s set of widgets is very limited to start with. The other main disadvantage is that it is entirely touch-unaware. The only input method it supports is a mouse. While there is a compatibility shim library that translates touch to mouse events, it still has two disadvantages: It only supports touch, not the generic pointer events that also include the stylus, and it inherits the limitations of mouse events, i.e. it cannot support multi-touch. And the file size of jQuery UI is just way too large for what it can do.