Proteus - Responsive Admin Web App
Web Templates
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. Here are some of the highlights of the theme:
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 that
of 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:
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
Changelog
Version 1.0- Initial Release