Atlas Admin Template

Atlas Admin

Atlas is a modern, fully-ajax & fully-responsive admin template built with Material Design concept.

It is built with Bootstrap 3.3.6, jQuery, HTML5 & CSS3 (using Less preprecessor). It boasts a large collection of reusable UI components.

It comes with a modern tooling system to make development and customization easier. Atlas's gulp based tasks take care of compiling templates to HTML, converting Less files to CSS, minifying JS files and live-reloading all your changes to the browser.

Atlas can be easily integrated with all types of backends, project management tools and/or custom CMSs. Example integration with Express.js and Ruby on Rails are included with this template.

Overview of Features

  • Responsive layout (works on Mobiles, Tablets & Desktops)
  • Fully AJAX (using PJAX, no page reloads needed)
  • Very well organized file structure with maintainable CSS & JS code.
  • 100% hand coded with valid HTML5 code.
  • Built with new Bootstrap 3.3.6
  • 100s of Reusable UI Components like boxes (cards), widgets, custom modals, chat boxes etc.
  • Integration with many modern jQuery plugins (Select2, Slider, iCheck etc.)
  • 4 different layout versions - Default (Full width), Boxed Layout, Fixed Layout and Top-Nav Layout
  • Material design inspired style using bold colors and aesthetic presentation
  • Over 25+ Pages featuring charts, email inbox, timelines, login/signup pages, user profiles, invoice, tabular data, calendars, chat interfaces.
  • Includes integration of Atlas Admin with Ruby on Rails and Node JS (Express.js) framework.
  • Hundreds of icons from Font Awesome, Ionicons & Glyphicons
  • Implements 4 different charting libraries
  • Easy development using development server with Live Reload & BrowserSync.
  • Smooth & Subtle CSS3 Animations
  • Custom Google Maps skin
  • 5 Different Color Schemes
  • Multiple sidebar background images to choose from
  • Nunjucks based templating system
  • Less preprecessor for stying
  • Gulp based tooling for minifying/bundling all assets

Modern Tooling & Easy Development

Atlas template also comes with a modern tooling system built with Gulp.js. The Gulpfile features tasks for compiling Less files, minimizing/compressing images and fonts, converting nunjucks templates to HTML, compressing CSS files using CSSNano and JS files using Uglify.js. It also features a development server with live-reload and browserSync enabled to make development and customization easier.

Using this tooling system, you do not have to make changes to each individual HTML files, instead you can make use of layouts and partial files.

Another added benefit is that this tooling system makes use of UseRef to merge & concatenate JS & CSS files such that the number of HTTP requests can be reduced.

Finally, once you are done making changes, you can run npm run build or gulp build to create a compressed and minified build that is ready to be deployed to production.

Along with this template, there are 2 backend integrations that can help you kickstart your application - one with Node JS (Express.js) backend and another with Ruby on Rails 4.2.


Please note that this template must be viewed from a web server. Opening the HTML files directly will not work. For development purposes, this template comes pre-configured with a gulp task to start a development server. To start this server - open your terminal, change to the atlas-admin directory and run the following commands -

npm install
npm start

This will open your browser window & serve the template.

Alternately, you can also choose to start the Ruby on Rails server by using the Ruby on Rails version included along with this template. In order to do that, change to the atlas-rails directory from the terminal and run the following commands.

bundle install
rake db:create
rails server

Included Pages

  • Dashboard Page
  • Layouts
  • Fixed Style
  • Boxed Style
  • Layout with Top Navigation
  • Default (Full width)
  • Widgets & Tools
  • Charts
  • ChartJS 2.0
  • Morris
  • Flot Charts
  • Sparkline & Knobs
  • UI Elements
  • Basic UI
  • Icons
  • Buttons
  • Sliders & Toggles
  • Timeline
  • Modals
  • Forms
  • General Form Elements
  • Advanced Form UI
  • Rich Text Editors (WYSIWYG)
  • Tables
  • Bootstrap Tables
  • Data Tables
  • Calendar
  • Email & Chats
  • Inbox
  • Compose
  • Custom Pages
  • Invoice
  • Profile & Timeline
  • Login
  • Signup
  • Errors (400, 500)
  • Blank Page

File Structure & Organization

Less

app/less/
├── admin
│   ├── components
│   │   ├── alerts.less
│   │   ├── boxes.less
│   │   ├── buttons.less
│   │   ├── callout.less
│   │   ├── carousel.less
│   │   ├── chat-box.less
│   │   ├── customization-modal.less
│   │   ├── dropdown.less
│   │   ├── footer.less
│   │   ├── forms.less
│   │   ├── header.less
│   │   ├── info-box.less
│   │   ├── labels.less
│   │   ├── mixins.less
│   │   ├── modal.less
│   │   ├── navs.less
│   │   ├── page-loader.less
│   │   ├── products.less
│   │   ├── profile.less
│   │   ├── progress-bars.less
│   │   ├── sidebar-images.less
│   │   ├── sidebar.less
│   │   ├── slider.less
│   │   ├── small-box.less
│   │   ├── social-widgets.less
│   │   ├── table.less
│   │   ├── timeline.less
│   │   └── users-list.less
│   ├── misc
│   │   ├── miscellaneous.less
│   │   └── print.less
│   ├── modules
│   │   ├── bootstrap-override.less
│   │   ├── core.less
│   │   ├── material-colors.less
│   │   ├── mixins.less
│   │   └── variables.less
│   ├── pages
│   │   ├── auth.less
│   │   ├── dashboard.less
│   │   ├── error-pages.less
│   │   ├── icons.less
│   │   ├── invoice.less
│   │   ├── mailbox.less
│   │   ├── profile.less
│   │   └── ui-basic.less
│   ├── skins
│   │   ├── skin-deep-blue.less
│   │   └── skin-pale-green.less
│   └── vendor
│       ├── bootstrap-social.less
│       ├── fullcalendar.less
│       └── select2.less
└── styles.less

JavaScript

app/js/
├── custom
│   ├── box.js
│   ├── offcanvas.js
│   ├── pjax-setup.js
│   └── tree-menu.js
├── main.js
└── pages
    ├── calendar.js
    ├── chartjs.js
    ├── dashboard.js
    ├── email-compose.js
    ├── email-inbox.js
    ├── flot.js
    ├── form-editor.js
    ├── forms-custom.js
    ├── inline-chart.js
    ├── login.js
    ├── morris.js
    ├── slider.js
    └── tables-data.js

HTML Templates

app/templates/
├── layout-blank.nunjucks
├── layout-boxed.nunjucks
├── layout-fixed.nunjucks
├── layout-top-nav.nunjucks
├── layout.nunjucks
├── pages
│   ├── 404.nunjucks
│   ├── 500.nunjucks
│   ├── blank.nunjucks
│   ├── boxed.nunjucks
│   ├── buttons.nunjucks
│   ├── calendar.nunjucks
│   ├── chartjs.nunjucks
│   ├── email-compose.nunjucks
│   ├── email-inbox.nunjucks
│   ├── fixed.nunjucks
│   ├── flot.nunjucks
│   ├── forms-custom.nunjucks
│   ├── forms-editor.nunjucks
│   ├── forms-simple.nunjucks
│   ├── icons.nunjucks
│   ├── index.nunjucks
│   ├── inline-charts.nunjucks
│   ├── invoice.nunjucks
│   ├── login.nunjucks
│   ├── modals.nunjucks
│   ├── morris.nunjucks
│   ├── profile.nunjucks
│   ├── signup.nunjucks
│   ├── slider.nunjucks
│   ├── tables-data.nunjucks
│   ├── tables-simple.nunjucks
│   ├── timeline.nunjucks
│   ├── top-nav.nunjucks
│   ├── ui-basic.nunjucks
│   └── widgets.nunjucks
└── partials
    ├── footer.nunjucks
    ├── header-meta.nunjucks
    ├── header-top-nav.nunjucks
    ├── header.nunjucks
    └── sidebar.nunjucks

Node JS integration

Run the following commands from the terminal to start up a demo Express.js application

npm install
npm start

Open your browser and navigate to http://localhost:8000/


Ruby on Rails integration

This template comes with a Rails 4.2 integration. To run the Rails app, open the atlas-rails folder in the terminal and run the following commands -

bundle install
rake db:create
rails server

Open your browser and navigate to http://localhost:3000/


Credits

Support, Bug Reports & Customization Requests

Please send all your support requests, suggestions, comments and bug requests to bharani@authenticpixels.com. I will get back to you within 24 working hours.

Version 1.0

  • Change scroll animation to trigger only when scrolling down.
  • Fixed erroneous links
  • Added web server instructions to README

More by bharani

  •  
  •  

Sign in or sign up to make a purchase

$15
76Purchases

Licenses: Details »

Single application $15
Version:1.0
Type:
  • HTML Template
Bootstrap: Compatible with 3.3.x
Layouts:
  • Responsive
  • Fluid
  • Fixed-width
Browsers:
  • IE 9, 10, 11
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
Uses Less:Yes
Uses Sass:No
Categories:
Tags: admin template, ajax, lightweight admin, material admin, material design, responsive dashboard, ruby on rails, webapp
Item#:WB040HK88
Released:1 year ago
Sold exclusively on WrapBootstrap
bharani

bharani

Signed up 3 years ago

Need a front-end theme?

About Bootstrap

Bootstrap is designed to help people of all skill levels – designer or developer, huge nerd or early beginner. Use it as a complete kit or use it to start something more complex.

Unlike other front-end toolkits, Bootstrap was designed first and foremost as a styleguide to document not only its features, but best practices and living, coded examples.

Built to support new HTML5 elements and syntax with progressively enhanced components.

Browser support

Bootstrap is tested and supported in major modern browsers like Chrome, Firefox, and Internet Explorer.

Tested and supported in Chrome, Safari, Firefox, Internet Explorer, and Opera.
  • Latest Chrome
  • Latest Firefox
  • Latest Safari
  • Latest Edge
  • Internet Explorer 9/10/11
  • Latest Opera

Features & includes

Bootstrap provides an unparalleled array of features and reusable components that let you hit the ground running: