Get Started

This is purpose of the FrogFramework, if you don't want to a CSS coding or designing graphics for your project and you want to developing your project directly with pre designed features.

First of all you need for start coding your project, download Frog Framework. Also you can find the all source files or released versions on GitHub.

Download FrogFramework
Version: v1.20.1

File Structure

Files into ZIP file that you downloaded.
/code/css folder: <!-- Framework --> frogframework.css frogframework.min.css <!-- Auto Import Components --> ffc-autocomplete.css ffc-autocomplete.min.css ffc-code.css ffc-code.min.css ffc-cover-gallery.css ffc-cover-gallery.min.css ffc-hash-list.css ffc-hash-list.min.css ffc-horizontal-screens.css ffc-horizontal-screens.min.css ffc-keypad.css ffc-keypad.min.css ffc-list-grid.css ffc-list-grid.min.css ffc-masonry-portlets.css ffc-masonry-portlets.min.css ffc-modal.css ffc-modal.min.css ffc-range.css ffc-range.min.css ffc-sidebar-mobile.css ffc-sidebar-mobile.min.css ffc-tooltip.css ffc-tooltip.min.css <!-- Default Icons --> frog-icons.css frog-icons.min.css /code/fonts folder: Frog-Icons.eot Frog-Icons.svg Frog-Icons.ttf Frog-Icons.woff /code/js folder: <!-- Framework --> frogframework.js frogframework.min.js <!-- Auto Import Components --> ffc-autocomplete.js ffc-autocomplete.min.js ffc-code.js ffc-code.min.js ffc-cover-gallery.js ffc-cover-gallery.min.js ffc-hash-list.js ffc-hash-list.min.js ffc-horizontal-screens.js ffc-horizontal-screens.min.js ffc-keypad.js ffc-keypad.min.js ffc-list-grid.js ffc-list-grid.min.js ffc-masonry-portlets.js ffc-masonry-portlets.min.js ffc-modal.js ffc-modal.min.js ffc-range.js ffc-range.min.js ffc-sidebar-mobile.js ffc-sidebar-mobile.min.js ffc-tooltip.js ffc-tooltip.min.js

HTML Page Markup

Here is the example of to start using Frog Framework in your HTML5 Documents. Javascript file and jQuery is always required.

<!DOCTYPE html> <html> <head> <title><!-- Your Title --></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="code/css/frogframework.min.css" /> <link rel="stylesheet" href="code/css/frog-icons.min.css" /> <!-- Optional --> <script src=""></script> <script src="code/js/frogframework.min.js"></script> </head> <body> <!-- Your Html --> </body> </html>

Customize Settings

If you want to change these settings, copy settings that you want to change to your custom JS file. The settings are optional. If you do not want to change, the default settings will apply.

Here are default settings of Frog Framework JS.

<span class="dark">/*!Customize your settings: */</span> var // sprite icons spritePath = '', spriteVersion = '', // ex: ?v=1.0 spriteImages = '', // ex: 'file.ext' or 'file1.ext,file2.ext' spriteImageSizes = '', // ex: '640x480' or '640x480,800x600' enableRetinaSprites = true, loadNonRetinaSprites = true, // use 'false' if you embed your non-retina sprites before // auto import ffc- components componentImporter = true, cssPath = 'code/css/', // change your CSS folder destination if required. jsPath = 'code/js/', // change your JS folder destination if required. componentVersion = '', // ex: ?v=1.0 // forms placeHoldersforIE9 = true, androidMultiSelects = true, // transitions transitionEffects = true, transitionsPreload = true, ieTansitionEffects = true, androidTansitionEffects = true, androidOldTansitionEffects = false, // page loader showPageLoader = true, pageLoaderClasses = 'rounded theme-red ui-dark', // scroll top button showScrollTopButton = true, scrollTopButtonClasses = 'circle', scrollTopIcon = 'icon icon-md icon-angle-up', scrollTopButtonTarget = '', // ajaxcomplete callbacks ajaxCompleteCallbacks = true; // swipe events preventSwipe = false; // if you want to disable, use: true