- Homepages
- Hero sections
-
Features
-
Portfolios
Portfolio 2 columns Portfolio 3 columns Portfolio 4 columns Portfolio masonry -
Headers
Fixed header Remove top menu Header animations Transparent header Resizable header -
Pages
Features boxes Contact usFramework
Tile boxes -
Navigation Slideshow
Gadgets & Illustrations
No one rejects, dislikes, or avoids pleasure itself, because it is pleasure, but because those who do not know.
-
- Components
- Pages
Monarch Admin/Frontend framework documentation
Overview
Thank you for your purchase. Hopefully this will be the last user interface framework you will ever need.
What is Monarch?
Monarch 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. Monarch 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.
Who is it for?
Monarch 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 implements modern CSS3 solutions, jQuery, jQueryUI, Bootstrap, RaphaelJS, Handebars, Grunt & NodeJS for automations and templating, templates and other jQuery plugins.
Help & Support
If you encounter bugs or problems with Monarch 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 Monarch or to integrate Monarch 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://agileui.com
Template Structure
Admin template
You can find the admin template demo .html files inside the /production/admin-template/ directory, from the .zip archive you downloaded on ThemeForest.
The admin template consists of three major sections: header, sidebar and main content where each pages holds its unique content. The sidebar and header have almost the same content on all pages and are generally used for navigating between pages and showing important informations or actions.
Head beginning
This is the page head tag which contains the Javascript, CSS, Fonts and metadata needed for the pages to render correctly.
Monarch UI - Bootstrap Frontend & Admin Template
Head includes
These are the CSS files that are included in the page head section. We've included all of them for demonstation purposes. You should only include the ones that you really use in your web application to help keep the page loading times to minimum.
Page header
The page header contains the top area buttons, logo, dropdowns and popovers elements.
Page sidebar
The page sidebar contains the main navigation menu.
Main content area
This is the section where all the pages' content goes into.
Content here...
Required Javascript
The JS files below are included at the bottom of all pages because of their site-wide usage.
Front-end template
The front-end files can be found inside the .zip archive you downloaded from ThemeForest use the /production/frontend-template/ directory.
There are four major sections that define the front-end template files: top bar, header, main content and footer.
Head beginning
This is the page head tag which contains the Javascript, CSS, Fonts and metadata needed for the pages to render correctly.
Create stunning presentation websites | Monarch
Head includes
These are the CSS files that are included in the page head section. We've included all of them for demonstration purposes. You should only include the ones that you really use in your web application to help keep the page loading times to minimum.
The front-end includes, in addition to the components from the admin template, some special .css files that have specific front-end (presentation websites) uses.
Top bar content
You can easily remove this section from your pages if you don't need it. It can hold things like social buttons, search bar, login/register/logout buttons.
Main header section
Contains the logo and the main navigation menu. Also, it contains a search button that can be easily moved in other sections.
Footer
Using the helper classes you can add different styles to the footers sections with only one click.
About us
sollicitudin eu erat. Pellentesque ornare mi vitae sem consequat ac bibendum neque adipiscing.
Footer background
Solids
Primary
Green
Red
Blue
Warning
Purple
Black
Gradients
Gradient 1
Gradient 2
Gradient 3
Gradient 4
Gradient 5
Gradient 6
Gradient 7
Gradient 8
Recent posts
-
-
And when nothing prevents our being able
by Hector Tomales on 16.04.2015
-
When our power of choice is untrammelled
by Hector Tomales on 16.04.2015
Components
Photo Gallery
Contact us
Required Javascript
These are Javascripts used on almost all pages and that is why they are included at the bottom of each page.
Layouts options
Modifiers
Modifiers are CSS classes that should be applied to the pages' body element.
Admin modifiers
For the admin template the following CSS modifiers can be used:
boxed-layout- transforms the fluid full width layout into a boxed fixed width with screen resolution breakpointsfixed-header- Sticks the admin template header section to the top of the screen on page scrollfixed-sidebar- Sticks the admin template sidebar menu section to the left of the screen on page scrollclosed-sidebar- Closes the sidebar menu allowing for more main content space.
Frontend modifiers
For the frontend template the following CSS modifiers can be used:
boxed-layout- transforms the fluid full width layout into a boxed fixed width with screen resolution breakpointsmain-header-fixed- Sticks the frontend template header section to the top of the screen on page scroll
Structure
Inside the .zip package you downloaded from Themeforest you will find the following directories and files:
- 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 demonstration & documentation files.
- production - contains example HTML files with all widgets & elements in action for the admin template
- production/admin-template - contains example HTML files with all widgets & elements in action
- production/frontend-template - contains example HTML files with all widgets & elements for the frontend template
- production/documentation - contains the documentation files
- 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
Theming options
Styling classes
The styling classes can be applied to all admin & front-end headers sections, front-end top bar section, front-end footer section and admin sidebar section.
Check out our demos' theming options to see the styling classes in action.
To see a complete list of available styling classes you need to open the /assets/helpers/backgrounds.css and /assets/helpers/colors.css
Basic styling classes
.bg-white
.bg-azure
.bg-blue-alt
.bg-purple
.bg-yellow
.bg-gray
.bg-gray-alt
.bg-black
.bg-blue
.bg-green
.bg-red
.bg-orange
Advanced styling classes
Advanced styling classes include things like CSS3 gradients, image gradients, generic imaging for faded backgrounds, etc. These an be found exclusevly in /assets/helpers/backgrounds.css
Style themes
The /assets/themes/ directory contains the following files & directories:
-
Admin template:
/assets/themes/admin/
- color-schemes - contains default.css which holds all the color styling for the admin template layout.
- layout.css - contains all the structural CSS code for the admin template layout. For example, if you were to change the sidebar width, this is the file you would be editing.
- layout.js - contains Javascript snippets that are related to that specific admin template layout.
-
Frontend template:
/assets/themes/frontend/
- color-schemes - contains default.css which holds all the color styling for the frontend template layout.
- layout.css - contains all the structural CSS code for the frontend template layout. For example, if you were to change the header navigation menu height, this is the file that you would be editing.
- layout.js - contains Javascript snippets that are related to that specific frontend template layout.
-
Components:
/assets/themes/components/
- default.css - common styles that are used by various elements, components and widgets. For better modularity, the structural layout is stored, for example, for widgets, in each widget directory.
- border-radius.css - common border radiuses for elements, components and widgets.
Core files
Javascript & CSS
The files below should be removed from templates only in special cases that require so. They are used site-wide in both admin and front-end templates.
Javascript core:- /assets/js-core/*.js
- /assets/themes/**/*.js
- /assets/helpers/*.css
- /assets/elements/*.css
- /assets/themes/**/*.css
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/.
- image-resources - 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.
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:- Install NodeJS - brew install nodejs npm
- Install GruntJS - sudo npm install -g grunt
- Install NPM packages - sudo npm install
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.
AngularJS
To generate AngularJS version of Monach template. Change the following configuration in Gruntfile.js to true
Line # 34 : angular : false
Tip: You can run grunt create-angular-template to just generate template files for AngularJS version
Changelog
Current version: 1.3.1
Refer to changelog.txt for more details.
Updates
To make sure you can easily update your instance with our future releases make sure you don't write custom code in any CSS or JS files and you create new separate files for your modifications.