Proteus is a clean, modern, responsive, multipurpose admin theme, suited for any kind of web app.
Our goal with Proteus was to Help our Customers speed up their development workflow and cut down development time by delivering at the same time a product which is using the latest frontend technologies and concepts and is set up for easy update and customization.
- Built with HTML5, Bootstrap, Jade, CSS3, SASS, Jeet
- Custom Icon Fonts
- REM based font sizing with pixel fallback in older browsers
- Low CSS specificity
- Powered by two famous animation Packages: Velocity.js and Animate.css
- Built with DRY (don’t-repeat-yourself) Methodology in mind and with SMACSS Architecture
Proteus has 2 main core components: Ason Framework and Ason Widget.
Thanks to this componenets it is optimized not just for desktop but also for mobile and tablet devices. It was made by developers for developers AND also for non-developers. 
Thanks to its commented and structured code you will be able to easily find and modify everything you need.
Basically the more you know about frontend technologies with which it was build the more you can leverage its true power.
For more information please check out the Main Features below or the Documentation.
Every piece of the theme was carefully coded and tested, but in case you find some bugs or you have any questions which you can’t find in the documentation don’t hesitate to contact us on our profile page. We will be more than happy to help you.
So you might be asking yourself what is this Ason Framework.
Ason Framework is a collection of best practices and latest technologies fused together.
The combination of all this goodies is what makes Proteus unique and a great starter kit for your next Project.
The first and one of the most important building blocks of the Ason Framework is HTML5.
During the creation of the page layouts we made sure to use the new semantic HTML5 tags like header, footer, nav, aside, etc… to lay out our pages in a meaningful, logical and an easy to understand way.
Jade is a Template Engine which helps to create valid HTML code fast and easy.
One thing what we can say is that once you have learned Jade you will never go back to the old, static HTML code generation process.
To generate and maintain our static HTML files we are using in all our projects this great tool and we can say with confidence thatof course depending on the size of the project we were able to cut down on development time hours, sometimes even days and not to mention the maintenance time and update process.
This was the reason why we decided to use Jade and we think it’s worth trying out!
The second fundamental building block of the Ason Framework is CSS3.
The whole Proteus project is powered by only 3 CSS files: basic.css, general.css and theme.css. (There is also an addons folder in which we have extracted some of the major components, which aren’t used on every page).
Lets see what is the functionality of this 3 files:
- Basic.css: this file includes Bootstrap, Font Awesome and the themes custom Google Font, Source Sans Pro.
- General.css: this is the file where all your components, widgets, modules lie but without any color styling. It’s responsible for the skeleton of your project and its purpose is to give your site structure.
- Theme.css: this is the file which brings your site to life by adding color and you are also able to overwrite some of the rules defined in the general.css file. Basically you can make endless unique themes for your site by creating new theme.css files without having to worry about the basic layout of your site.
To generate our CSS files we are using SASS.
The SASS files are organized following the SMACSS guidelines. This gives us total freedom and control on how we want our files to be organized and this way we only include the files (modules, components, widgets) we need in our project, no more no less. This makes it possible to increase/decrease our CSS files size depending how big/small and feature rich our project has to be and at the same time we are able to maintain modularity.
SMACSS is the perfect style guide that glues together the whole Ason Framework.
Although originally it was meant for CSS and SASS we also extended it to Jade. This way we have a unified file structure throughout the whole project making it easy to find and organize our files and also to integrate new components.
Proteus SASS file structure was setup in a way in which it’s easy to change the look and feel of the site and at the same time maintain the basic site layout. All the colors of the theme are controller from one centralized color.scss SASS file and can be changed in matter of seconds.
This file is using the latest color management guidelines (functional variables, descriptive variables, color palette and tones) to give you an easy way to update and manage your sites color.
You might be asking yourself why are we always talking about Themes and not Skins. Well the reason behind is that usually a skin file only changes the colors of the site, but a theme file can also change other CSS properties like font-size, margin, padding, etc… and not just color related properties like color, background-color, border-color etc..
To see a theme in action check out the second theme of Proteus, medium purple.
It is also very easy to create a new theme, all you have to do is duplicate the original “theme” folder and SASS file, reference them correctly and start modifying the desired CSS properties.
Animations play a major role in Proteus. We integrated 2 famous animation libraries: Velocity.js and Animate.css which greatly enhance the user experience of the theme. They were also integrated into the Ason Widget powering many of the widget animations and effects.
Ason Widget is a jQuery plugin created to power our awesome Ason Framework. It has many different components for different purposes. For example sidebar, header, footer, menu, etc… and it helps to setup common site functionality faster and easier.
Two very important building blocks of the Ason Widget are the Menu and Sidebar components. This two are in synergy with each other and with their help you are able to setup complex page behavior and you define with only two jQuery calls how they behave on every screen size.
As always you are in control of everything.
Some of the most important and commonly used pages are already coded and ready to use, like the Login, Register, Search, Calendar, Profile, Error, etc.. page.
More pages will be added soon!
We have a special section called Apps in which we feature common applications used on the web with almost all functionality built into it. The only thing left is to connect it with a backend.
More apps will be added soon!
Basically the whole Proteus project is made of Widgets. So every time you want to create an HTML component you create a widget, so you will be able to maintain the modularity and flexibility of the site.
As you can see above widgets can be placed everywhere on your page and you distinguish their behavior with sub-classes.
The theme comes with many prebuilt widgets for many different purposes and we also included a SASS template to easily create your own widgets.
Last but not least we have created a documentation for the theme and what wouldn’t be a better example for a life project created with Proteus than its documentation. Check out how easy it is to set up and manage the files. (SASS and JADE included).
Please also don’t forget that this project is planned to be updated and improved frequently, so if you find some bugs or you have any questions which you can’t find in the documentation or you have some great ideas how we could improve the theme don’t hesitate to contact us on our profile page. We will be more than happy to help you !
Full feature list
- Responsive and Multi Column Layout
- Bootstrap 3.3.4 Framework
- jQuery v1.11.2
- Ason Framework
- Ason Widget jQuery plugin
- 2 Flexible Grid Systems – Ason and Bootstrap
- Built with HTML5, CSS3
- Jade Template Engine was used to compile the HTML files
- Full SASS support and is based on the famous SMACSS Architecture
- Jeet grid system integrated
- Organized Media Queries in SASS with Breakpoint
- Limitles Color and Theme customization
- REM based font sizing
- Enhanced Animations with Velocity.js and Animate.css
- Extensive documentation
- 2 Page Layout
- Fullwidth
- Boxed
- 2 Sidebar Types
- Sidebar
- Slidebar
- Sidebar can be Pixel or Percentage based
- 2 Additional Sidebar States
- Collapsed
- Compact
- 2 Additional Slidebars States
- Push
- Static
- 4 Different Header and Footer States
- Default
- Fixed
- Sticky
- Slide
- Forms
- Layout
- Basic form
- Inline form
- Horizontal forms
- Column Sizing with Bootstrap Grids System
- Column Sizing with Ason Grid System
- Column Sizing with Ason Grid System without Gutter
- Elements
- Basic Elements
- Textareas
- Control States
- Control Sizing
- Input Groups and Addons
- Button Addons
- Masked Inputs
- Spinners
- Styled Checkboxes and Radios
- Styled Checkboxes and Radios v2
- Selects
- Switches
- Form validation
- Without JavaScript
- With JavaScript
- Form Wizard
- File uploader & WYSIWYG editor
- Bootstrap File Upload
- jQuery File Upload
- Summernote WYSIWYG Editor
- Layout
- Tables
- Basic Tables
- Data Table
- Foo Table
- Charts
- Flot
- C3
- Morris
- Rickshaw
- Other types
- UI Elements
- Grids
- Boxes and Panels
- Draggables
- Documentation
- Typography
- Buttons
- Icons
- Accordions
- Breadcrumbs
- Pagination
- Progressbars
- Page Progressbars
- Spinners
- Sliders
- Tabs
- Tags
- Pricing Tables
- Tooltips and Popovers
- Modals
- Notifications
- Calendar
- Date and Timepicker
- Colorpickers
- Maps
- Widgets
- Basic
- Advanced
- Ason
- Pages
- Register
- Login
- Forgot Password
- Change Password
- Lock Screen
- Search
- Profile
- Invoice
- Faqs
- Blank
- Error
- 403
- 404
- 405
- 500
- 503
- Apps
- Mail App
Changelog
Version 1.1.0 – 28 June 2015
- Added: Bootstrap Datepicker jQuery Plugin- Added: More Datatable examples- Added: jqClock examples to "Date and Time Pickers" section- Updated : Bootstrap to v3.3.5- Updated : DataTable to v1.10.7- Updated : Todo list on the dashboard 2, you can now add new tasks- Updated : Documentation- Changed : The Page Settings have been divided into General and Theme Settings
Version 1.0.0 – 12 June 2015
- Initial Release