Ace Admin Docs
🔍
‹ ›

Demo Files

HTML/Handlebars

For Ace's demo pages I've used Handlebars templating library which makes it easy to separate layouts and large pages into smaller sections.
They are located inside views folder .

The compiled HTML files are inside html folder.

Layouts

views/layouts folder contains layouts and their relevant partials (sections):

For information about layouts and how to use please refer to the relevant section

The main file (starting point) of each layout is the #index.hbs inside the layout's folder

  • dashboard folder is the layout used in default Dashboard page

  • starter is the layout for Starter page. It's similar to main dashboard layout but with minimal content to make it easy to figure out the structure and use it

  • dashboard-2 is used for Dashboard 2 page and has different layout. In this layout sidebar starts from top of page and navbar is inside content area

  • dashboard-3 is used for Dashboard 3 page and is similar to Dashboard 2 it has different initial sidebar and navbar themes and content

  • dashboard-4 is used for Dashboard 4 page and is similar to main Dashboard layout except it has different initial sidebar and navbar themes and content

  • horizontal is the layout for Horizontal Menu page

  • two-menus-1 is the layout for Two Menus page

  • landing-1 is the layout for Landing Page 1 page

  • landing-2 is the layout for Landing Page 2 page which is similar to Lading Page 1 except for different navbar content

  • coming-soon is the layout for Coming Soon page

  • login is used for the Login page

  • _commons folder contains some partials that are common between above layouts such as settings box, html head, etc ...

Pages

views/pages folder contains demo pages along with their partials which are different sections of a page.

The main file (starting point) of each page is the #index.hbs inside the page's folder

For example for Profile page:

  • views/pages/page-profile/#index.hbs is the main file
  • views/pages/page-profile/@page-script.js contains the script for this page, for example to initiate circular charts, etc
  • views/pages/page-profile/@page-style.css contains the CSS used only in this page. They are not included in the main ace.css because they are not needed throughout Ace and are only used in this page
  • views/pages/page-profile/@vendor-scripts.hbs contains the list of third party files and plugins used in this page
  • views/pages/page-profile/profile-left.hbs contains the left column of profile page (The user info)
  • views/pages/page-profile/activity.hbs contains the content of the second tab (Activity tab)
  • etc

Data files

views/data folder contains data used in Ace's demo such as list of pages, navbar notifications, dashboard's stats, etc.

They are in json or csv format.

For example:

  • views/data/layouts/sidebar.json contains the page list (i.e. sidebar elements)
  • views/data/layouts/navbar-notif.json contains navbar notification items
  • views/data/pages/dashboard/conversations.json contains the conversation items displayed in dashboard

In Ace's demo pages, data is retrieved using a custom handlebars helper
{{#each (get "DATA_NAME")}}

Please note that you don't need these data files or the custom Handlebars helper in your app

hbs 
{{#each (get "conversations")}}
  <img src="{{avatar}}" />
  <div>{{message}}</div>
{{/each}}

{{#each (get "layout/navbar-notif")}}
   <div>{{title}}</div>
{{/each}}

CSS Files

See Demo Pages' CSS Files

Javascript Files

See Demo Pages' JS Files

Fonts & Assets

assets folder contains the following:

  • image which contains some images and avatars for demo
  • fonts which contains Open Sans font files used by default in Ace's demo. However you can should fonts directly from Google fonts.
    • Local fonts are used for faster loading of pages during local development. See Fonts & Icons
Javascript Colors
↑