In order to make increase ease of development and cross-browser compatibility, Olapic front-end is built using some really great libraries and frameworks. Our latest widget structure comes equipped with Bootstrap, Font-Awesome, and jQuery.
Bootstrap
Our newest widgets have moved from the Foundation framework to the more robust Bootstrap framework. This is one of the most popular CSS frameworks in use today and it gives our widgets a number of key advantages:
Cross browser compatibility
Stackable utility classes for common CSS declarations ie. pull-right, pull-left
Built in fluid grids make responsive design a breeze
Font-Awesome
Our widget codebase includes a sub-set of the Font-Awesome font library, which can be used with a simple declaration inside an element's class.
For example: <i class="olapic-icon-facebook"></i>
Here is a list of the current icons that are supported natively by our framework.
The icons are vector objects and can be resized with a simple font-size declaration in your CSS.
jQuery
We also incorporate the jQuery javascript library into all of our widgets. As with Bootstrap, jQuery gives us a number of key advantages when developing widgets:
Simple CSS class and id targeting
Cross-browser compatibility (modern browsers)
An extensive library of built in functions and effects
No conflict mode so as not to interfere with any other libraries or scripts running on your page
We have jQuery implemented in noconflict mode. Simply replace the $ object you've been using, with oQuery object. You can use our namespaced version of jQuery object in any of our callback templates in the template sets.
For Example: oQuery('.olapic-widget-wrapper').hide();
Cross Browser JS - aka CSS Browser Selector
We have also incorporated a javascript plugin that allows for cross-browser specific CSS classes. Simply add the class .ie9, .ie10, .mozilla, .webkit, .chrome, .safari to any declaration and it will target that browser specifically.