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.
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:
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:
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:
More information on the grunt-contrib-less and grunt-include-replace tasks are available on GitHub:
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.
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
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
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.
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
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
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
/app/scripts/main.js creates a proton root object used to house all other objects used by individual proton pages.
/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 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 uses Modernizr ( http://modernizr.com/ ) to detect supported browser features and modernizr.js is included on all pages.