Getting started

Below you will find a quick getting started guide. The left side menu contains the documentation for each page, widget, element or component presented in the demo.

What is Bratilius?

Bratilius is a HTML/CSS/JS framework that helps you quickly build modern, beautiful and accessible user interfaces for interactive web applications. It is powered by jQuery, Twitter Bootstrap and a bunch of other curated widgets & plugins. Bratilius includes a lot of UI interactions, effects, elements, components and themes. These featured make it a very powerful companion when it comes to solving all kinds of use cases. Read through the documentation to get an idea of how many widgets and elements are available.

Who is it for?

Bratilius can be used by designers and developers alike. Designers will find the theming and assets separation very useful and easy to modify. Because, in general, developers do not have an eye for design, the AUI framework helps them by removing the design-related issues and lets them concentrate on the app programming part.

Technologies used

Bratilius uses modern CSS3 solutions, jQuery, jQueryUI, Bootstrap, RaphaelJS, Handebars templates and other jQuery plugins.

Installing and Getting Started

First you need to download and uzip the Bratilius package archive.

The package contains the following:

• assets - contains all the source code CSS, JS, fonts and images uncompressed, development versions.
• assets-minified - contains all the css, js files, minified, ready for production.
• src - contains all the handlebars templating files used in the generation of the demonstation & documentation files.
• documentation - contains the documentation files
• production - contains example HTML files with all widgets & elements in action
• changelog.txt - changelog between version
• Gruntfile.js - contains Grunt tasks that can be used to generate the production-ready, minified assets and compile template
• Readme.md - General informations about the template

Assets

The assets directory (/assets/) contains the development (uncompressed) files that are used in the site. For production ready enviroments we suggest using the files from the /assets-minified/ directory because they take a lot less space.

The assets directory structure:

• applications - contains the CSS files for different applications embedded in Bratilius, for example, the Mailbox page.
• elements - contains all CSS files used for creating different types of elements, for example, ribbons.css, buttons.css, etc. They are used for both the admin backend template and for the frontend presentation website.
• snippets - contains all CSS files for different snippets used through out the template, like todo lists, notification boxes, chat, etc.
• frontend-elements - contains the CSS files specific for the frontend presentation template, for example, pricing-tables.css, portfolio-navigation.css, etc.
• helpers - contains all CSS files used for resets, or recurring tasks, for example, grid.css, page-transitions.css, typography.css, spacing.css, etc.
• icons - contains all directories with files specific to an icon category. For example, the FontAwesome icon fonts and CSS file are located in /icons/fontawesome/.
• dummy-images - contains images that are used for demonstation purposes only in our presentation.
• images - contains all images that are used by other elements, for example, /images/spinner/loader-light.gif - which is used by the loading overlay element.
• js-core - contains all Javascript core plugins, like jquery-core.js, raphael.js, etc.
• widgets - contains all widgets used in the Bratilius template. Each widget has its own directory containing the javascript core, css core and javascript demo initialization.
• themes - contains the files needed for the color and style customisations.

Themes

The Bratilius themes can be found in the /assets/themes/ directory. If you open the /themes/ directory right now, you will see the /bratilius/ sub-directory which contains all the CSS files used for applying style and color for the template layout, widgets and elements.

layout.css

This file contains the structural classes used for the main template layout. If you were to change the width of the sidebar element, this is the file that you need to edit.

layout-color.css

This file contains the styling classes used for the main template layout. For example, this is the file where the sidebar background color and sidebar links colors are defined.

framework-color.css

This file contains the styling classes used for widgets and elements. Each widget and element has its own CSS file that handles their structure, like how much spacing should a button have, how tall should it be or similar stuff. To add color & style to that structure you need to edit the framework-color.css file. It contains multiple CSS classes with the same styling based on their role.

/js/layout.js

This file contains the jQuery scripts used to build the layout template, for example, it contains a function that sets the sidebar height to 100% of the viewport height. This is included in the themes sub-directory because the layout parameters may vary from a theme to another.

Minified assets

You can find the CSS, JS, image files minified in the /assets-minified/ directory.

Core files

The files below should be removed from templates only in special cases that require to.

Javascript core:

• /assets/js-core/*.js
• /assets/themes/bratilius/*.js

CSS core:

• /assets/helpers/*.css
• /assets/elements/*.css
• /assets/themes/bratilius/*.css

Automations

To generate the demonstration and documentation files we use Grunt - the javascript task runner. To find out more about it read the Grunt.js documentation.

We also use grunt to automate the minification and concatenation of the assets.

Install dependencies:

1. Install NodeJS - brew install nodejs npm
2. Install GruntJS - sudo npm install -g grunt
3. Install NPM packages - sudo npm install

Grunt tasks aliases:

You can find all the available grunt tasks in Gruntfile.js

• "all" - builds the complete solution for documentation & production. It also create the /assets-minified/ production-ready directory.
• "server" - creates a server on http://localhost:8585 that points to the build files. This way you don't have to install WAMP,XAMPP or MAMP on your local environment.
• Install NPM packages - sudo npm install

Help & Support

If you encounter bugs or problems with Bratilius feel free to email us at support@agileui.com or to write in the comments area on the marketplace. Send your suggestions and feature requests at office@agileui.com

Custom services

You can hire us to create custom application user interfaces based on Bratilius or to integrate Bratilius in your existing projects. Drop us a line at contact@agileui.com describing your requirements and we'll send you a quotation. View our portfolio at http://horiasimon.com