include "include/header_documentation.html"

Fides Admin Documentation Below you will find a quick getting started guide. The left side menu contains source codes for all the included widgets, elements, components, etc.

What is Fides Admin

The AUI Framework 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 and includes a lot of UI interactions, effects, widgets, elements, components and themes. These make AUI 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?

AUI is for both designers and developers. Designers can use the three layer theming system to create new styles. 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.

Installing and Getting Started

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

The package contains the following:

Production-ready vs. Development Assets

The AUI framework package contains both the development & production-ready files. Development files are represented by the uncompressed, standalone CSS and JS files. These should be used during development or debugging. In production-ready applications we recommend using the compressed and concatenated versions for CSS and JS files because it saves bandwidth and improves performance.

In the document root you will notice three directories that start with underscore: _assets, _build and _content. These directories contain the development files that are used to generate the production-ready assets, demonstration & documentation files. To generate these files we use Grunt. You can find the tasks configurations in _build/Gruntfile.js.

The root /_assets/ folder contains the development files(css, js, images, fonts) which are uncompressed and standalone. The production assets can be found in the document root under /production/assets/.

In the production assets directory each css and js file is minified under their respective /minified/ folder.

Each css & js group (elements, widgets, components, etc) is also minified and concatenated together and can be found in /production/assets/.

For example, the js core files are concatenated in /production/assets/js/aui-core.js. The minified version for this file is in /production/assets/js/aui-core.min.js

Another example is the tabs widget css development file which can be found in the document root under /assets/css/widgets/tabs.css. The production version can be found in /production/assets/css/widgets/minified/tabs.min.css

The tabs.min.css is also included in /production/assets/css/aui-widgets.min.css which contains all the widget css development files minified and concatenated.

There is also a master minified css file that contains all the development css files from /_assets/css/ that can be found in /production/assets/app-production.min.css

Using Fides Admin

To use Fides Admin you need to include in your pages the following CSS and JS files.

All assets included

This example shows a standard HEAD section for a production-ready page that has all the JS & CSS files compressed, concatenated and included.

    

    

    

    
    

    

    

    

Selective included assets

An example HEAD section for a page that uses only certain widgets & CSS files.


    

    

    

    
    
    
    
    

    

    
    

    

    

    

    

    
    
    
    

Required core files

These files are required and should not be removed. Development core js files are in /_assets/js/core/. The production-ready minified files are in /production/js/core/. The file that contains all the core js minified and concatenated can be found in /production/assets/js/aui-core.min.js.

Core js files:

Generating files locally

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

Theming

Because of the modular JS and CSS arhitecture you can use Fides Admin to style both new and existing applications. The theming system is split into two layers which work seamlessly together: the layout style, the elements style and the core style helpers. Each theming CSS file has a minified version in /production/assets/themes/minified/THEME_NAME/

You can use layout and elements styling files from different color schemes and even from different themes. For example, you can use the layout style (layout.css) from /assets/themes/agileui/color-schemes/default/layout.css together with the elements style from /assets/themes/ANOTHER_THEME_NAME/color-schemes/green/elements.css.

Layout style

Contains all the styling need for the page layout (top menu, header, sidebar, main content area, footer). The layout style can be found in /_assets/themes/THEME_NAME/color-schemes/COLOR_SCHEME_NAME/layout.css.

Elements style

Contains all the styling need for the elements and widgets (buttons, tabs, menus, boxes, etc). The elements style can be found in /_assets/themes/THEME_NAME/color-schemes/COLOR_SCHEME_NAME/elements.css.

Core style helpers

Beside the layout & elements styling that comes from the selected theme you can also style some elements using the CSS core helper classes. These files can be found in /production/assets/css/minified/helpers/colors.min.css. Click here to read more about Helper classes.

Responsive layouts

This file makes Fides Admin responsive for both mobile and tablet devices. The responsive layout styling can be found in /_assets/themes/THEME_NAME/responsive.css.

Sources and Credits

All the jQuery widgets, plugins and fonts, icons, CSS assets that are used by Fides Admin have free distribution and modification licenses (GPL, MIT, Apache 2.0). We also want to thank their respective owners for all the hard work they put into making the web an easier place.

include "include/footer.html"