Proton is a fully responsive mobile first Admin Template based on Bootstrap 3. It features a highly flexible multi-column content structure built using the best Html5 and CSS3 have to offer, while also staying compatible down to Internet Explorer 8.
Proton has a few easy ways to get started, each one appealing to a different skill level and use case. The fastest way is to use the the precompiled and minified version of our CSS, JavaScript, fonts and icons. From there, you can use the compiled html template to get started on building you own custom Admin panel.
If you ever need to modify any of the components, you can use the non-minified version. You only need to find and copy the component's selector and styles from our original CSS file, and paste them in your custom stylesheet.
For instance, to customize the main nav background, just copy the nav.main-menu style specification.
No need for prepending additional classes, or appending !important here. Keep it simple.
Rinse and repeat until you're happy with your customizations.
Proton if fully based on Bootstrap 3 and if you're not already familiar with Bootstrap, you can find all the necessary documentation here:
http://getbootstrap.com/getting-started/
While this is not something we would recommend to folks new to Bootstrap and LESS, you can also use the development version of Proton, giving you access to all the tools to perform even the most complex customizations with ease.
All the original LESS files used for development are included for you to modify.
Also available along with the predefined themes you can see in the demo is the theme-creator.less file. It contains a set of mixins to allow you to create your own custom color theme in just a minutes. To see how easy it is, you can simply open one of the theme files already in use. For example, the theme-pastel-marine.less file.
If you're new to LESS and want to give it a try, you can find all the information you need here:
http://lesscss.org/
If you are working on a large project, requiring frequent changes to Html, JS and LESS files, Proton also comes packed with a set of Grunt development tools to make your life easier.
If you are not familiar with Grunt you will still be able to make all the customizations you may need using the non-minified version, or the development version of Proton. The Grunt version simply gives more advanced developers a chance to greatly reduce their development time by utilizing simple automatic LESS compiler triggered on any change to the LESS files. And of course the live reload which gives you the benefit of not having to reload the browser(s) every time you make a change. This is especially useful when developing responsive website because it saves a lot of time otherwise spent on reloading manually in every browser and across all devices used for testing.
Proton was developed using Yeoman generator-webapp 0.4.2 which comes with Grunt 0.4.1. In addition to a wide range of tools that come out of the box with with generator-webapp, Proton also has the compile LESS files to CSS and include files and replace variables Grunt tasks in it's Gruntfile.js configuration file.
To use them, you'll only need to install these two additional packages using npm, easy:
npm install grunt-contrib-less --save-dev
npm install grunt-include-replace --save-dev
So your dependency list is basically this:
├── [email protected] (comes with generator-webapp 0.4.2)
├── [email protected]
└── [email protected]
If you want to know more about Yeoman and Grunt, we recommend these two links:
http://yeoman.io/
http://gruntjs.com/
More information on the grunt-contrib-less and grunt-include-replace tasks are available on GitHub:
https://github.com/gruntjs/grunt-contrib-less
https://github.com/alanshaw/grunt-include-replace
Please note that there are two template Grunt config files: Gruntfile-min.js and Gruntfile-dev.js. The first one is used to generate a minimized version of Proton, and the second (also used as the default Grunt config file) generates a dev version of Proton and can be used to start a Grunt dev server.
Proton is a mobile first Admin Theme, and as such the base layout is aimed at providing a native app experience. The body element is fixed, non-scrollable. Only the elements with .scrollable class are scrollable, with no use of JavaScript scrolling plug-ins. This provides a app-like native elastic scrolling with best results on iOS and Android devices.
Every inner page has a title bar with JavaScript generated title. This is of course fully customizable. JavaScript function responsible for this is the same one used to generate the tree menu and the breadcrumbs menu. More info on this is available later in the document.
The scrollable .wrapper section houses the main page content and is used on all pages. All inner pages feature a Main Navigation Menu, User Navigation Menu, Sidebar Menu and Breadcrumb Strip.
Login page obviously only displays the login form, while the Dashboard page doesn't need the Sidebar Menu and thus has more space available for the main content.
Less layout file is: /app/less/components/layout.less
Main Navigation Menu is a two level menu that slides in and out on mouseover, or on touch if viewed on touch devices. It is fully responsive and transforms to mobile version for XS screen sizes (by default this is defined at 480px).
Html component file for the Main Navigation Menu is: /app/common/main-nav.html
Less file for the Main Navigation Menu is: /app/less/components/main-nav.less
JavaScript file for the Main Navigation Menu is: /app/scripts/proton/main-nav.js
User Navigation Menu is a custimizable menu positioned at the upper right part of the screen. It is fully responsive and transforms to mobile version for XS screen sizes (by default this is defined at 480px).
By default, Proton User Navigation Menu comes with three menu items: Color Scheme Switcher, Messages and Notifications. Messages and Notifications can also have an animated counter alterting the user on the number of unread items.
Html component file for the User Navigation Menu is: /app/common/user-nav.html
Less file for the User Navigation Menu is: /app/less/components/user-nav.less
JavaScript file for the User Navigation Menu is: /app/scripts/proton/user-nav.js
Sidebar Menu is a custimizable menu positioned right next to the Main Navigation Menu. It is fully responsive and transforms to mobile version for XS screen sizes (by default this is defined at 480px).
Sidebar Menu displays a logo, module name (with the optional "Add New" button to the right) and an universal search field. There is also a jsTree tree menu below the search field. Tree serves as an infinite-level menu that can be used to link deep inside the module structure. Tree menu is skinned to render in a touch-friendly size for tablet and mobile devices.
Entire tree scrolls independently and as such, it is not limited by the vertical size of the Sidebar Menu. By default, the contents of the tree is generated dynamically using JavaScript by searching for on-page h4 title elements with class .section-title
Main menu can be retracted and the jQuery Cookie plugin is used to remember it's state.
Html component file for the Sidebar Menu is: app/common/sidebar.html
Less file for the Sidebar Menu is: /app/less/components/sidebar.less
JavaScript file for the Sidebar Menu is: /app/scripts/proton/sidebar.js
Breadcrumb Strip uses xbreadcrumbs jQuery Plugin. Breadcrumbs are styled differently for desktop and mobile screen sizes.
Breadcrumb Strip uses xbreadcrumbs jQuery Plugin. It is positioned right next to the Sidebar Menu and is fully responsive. It transforms to mobile version for XS screen sizes (by default this is defined at 480px).
Desktop sized Breadcrumb Strip also features drop-down menus allowing you to navigate within the current page or to another page.
The same function that generates the sidebar tree (located in the /app/scripts/proton/sidebar.js file), also generates the drop-down for on-page navigation by searching for h4 title elements with class .section-title.
Html component file for the Sidebar Menu is: /app/common/breadcrumbs.html
Less file for jthe Sidebar Menu is: /app/less/proton/breadcrumbs.less
Dashboard Page features a Dashboard Menu, Sortable Quicklaunch Bar and Sortable Widget Area. All of which are customizable and responsive.
Quicklaunch items can be reordered via jQuery UI sortable plug-in. Modal dialog to add new items can be launched by clicking the plus icon or using the Dashboard Menu (cog icon).
Widget Area can house as many widgets as you might need. The widgets are 300px × 250px two-sided boxes. Widgets can be flipped to the other (set up) side by hovering the widget and clicking the cog icon appearing in the right upper corner. In addition to being fully responsive, the Widget Area is also sortable. Widgets can be reordered via jQuery UI sortable plug-in.
Html file for the Dashboard Page is: app/index.html
Less file for the Dashboard Page is: /app/less/components/dashboard.less
JavaScript file for the Dashboard Page is: /app/scripts/proton/dashboard.js
Proton uses a custom webfont Titillium Web, declared in /app/styles/font-titillium.css
Proton uses Font Awesome 3.2.1 ( http://fontawesome.io/ ) to power all on-site icons. These are declared in /app/styles/font-awesome.css
Proton features a highly modular JavaScript system. Every page only uses the JavaScript it needs and nothing more. The two common JavaScript files are:
/app/scripts/main.js
/app/scripts/proton/common.js
/app/scripts/main.js creates a proton root object used to house all other objects used by individual proton pages.
By default the verboseBuild variable in /app/scripts/main.js is set to true. This lets you monitor the building of all Proton scripts through the browser JavaScript console. You can try monitoring it's output out on any of the inner pages or the Dashboard.
/app/scripts/main.js also contains detection scripts for IE and iOS detection needed to iron out some device / browser specific CSS differences.
/app/proton/common.js controls some basic aspects of Proton appearance such as animated page rendering for browsers supporting this feature, scroll corrections for iOS devices and window resize detection along with everything that needs to happen after resize is detected. It also enables Bootstrap 3 tooltips which are disabled by default.
Proton is fully compatible with all Bootstrap 3.1.0 JavaScript functions and bootstrap.min.js is included on all pages.
Proton uses jQuery 2.0.3 ( http://jquery.com/ ) hosted by Google CDN to ensure a stable, reliable and high-speed application. Older browsers like IE 8 fall back to jQuery 1.10.2
Proton is fully compatible with all Bootstrap 3.1.0 JavaScript functions ( http://getbootstrap.com/javascript/ ) and bootstrap.min.js is included on all pages.
Proton uses Modernizr ( http://modernizr.com/ ) to detect supported browser features and modernizr.js is included on all pages.
Proton uses cookies to remember application state, for purposes of displaying on-page help alerts, remembering selected color schemes and the state of the Sidebar menu. For this, jquery.cookie.js ( https://github.com/carhartl/jquery-cookie ) is included on all pages.
Below is the full list of Javascript plugins used to power Proton inner pages. Individual plugins are located at the bottom of the page using the plugin (along with the comment containing plugin name and website). Any plugin css is included either in page head or as a separate less file.
You can find the Proton UI Changelog here.
