RESPONSIVE CSS FRAMEWORK

Components

Jumpeye framework comes with a huge set of UI elements and styles to serve a stylish responsive website design. It also includes two jQuery-based responsive components: a photo gallery and an image and content slider.

UI elements

The framework includes buttons, panels, tabs, tooltips, horizontal and vertical N-level menus, alerts, tables, forms and all of them are highly skinnable using the ready-made customized styles. Each type of UI element has a set of CSS files. One of them is the common file for that element and each of the remaining CSS files correspond to one skin style. The CSS files also have a minimized version for better loading results.

The CSS files can be easily customized, if you want to modify any of the UI elements. Some of the UI elements styles are using assets files, so if you change the location of the CSS files you have to update the url of the assets files as well (in case the selected style uses external files).
Some of the elements (menus, tooltips and forms) are based on JavaScript. To use these elements, the JS files with the elements' names must be included in the HTML file.
When the UI elements are used with the grid, their size will change automatically together with the size of the browser window. When the grid switches to mobile view, the width of the UI elements becomes 100% and some of them will have a special layout for mobile devices (ex. drop down menus). View more

Photo gallery

The component due to its theme is called JFDarkGallery and can be find in js/components/imageGallery/JFDarkGallery.js. The gallery provides many features: it can play slideshows, the images can be organized in folders, the content of the folders can be displayed in thumbnail list, the gallery can be shared on the two most popular social networks (Facebook and Twitter), it has an adaptive design to work properly on any device and many others.

The source for the component can be configured using an external XML file. If you want to organize your photos in different folders, you have to create them in the source XML file simply place the image items in different folder nodes. View more

Image and content slider

The slider component is called JFBlurrySlider and it is placed in js/components/contentSlider/JFBlurrySlider.js. The component supports image and HTML content in order to create website headers, tours and presentations, image sliders, banner rotators or any other type of slider.

The slider component can be configured inside the HTML file specifying each slide as div tags. If you want to create content sliders, it is recommended to use the grid to build the content, because so the content will be responsive and it will have a perfect layout on any device. View more
Take a tour and view all the included UI elements and components to get an idea of how useful Jumpeye framework can be for your projects. Enjoy it!