diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..3e06722
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,9 @@
+dist
+.project
+.settings
+*~
+*.diff
+*.patch
+/*.html
+.DS_Store
+node_modules
diff --git a/.jshintrc b/.jshintrc
new file mode 100644
index 0000000..af30ed0
--- /dev/null
+++ b/.jshintrc
@@ -0,0 +1,16 @@
+{
+ "curly": true,
+ "eqnull": true,
+ "eqeqeq": true,
+ "undef": true,
+ "newcap":false,
+ "globals": {
+ "jQuery": true,
+ "console": true,
+ "module": true,
+ "document": true,
+ "window": true,
+ "FB": true,
+ "localStorage": true
+ }
+}
diff --git a/GruntFile.js b/GruntFile.js
new file mode 100644
index 0000000..5fd36e1
--- /dev/null
+++ b/GruntFile.js
@@ -0,0 +1,117 @@
+/*
+ * grunt
+ * http://gruntjs.com/
+ *
+ * Copyright (c) 2013 "Cowboy" Ben Alman
+ * Licensed under the MIT license.
+ * https://github.com/gruntjs/grunt/blob/master/LICENSE-MIT
+ */
+
+
+// The first part is the "wrapper" function, which encapsulates your Grunt configuration
+module.exports = function(grunt) {
+
+ 'use strict';
+
+ // Project configuration
+ grunt.initConfig({
+ // Next we can read in the project settings from the package.json file into the pkg property. This allows us to refer to the values of properties within our package.json file.
+ pkg: grunt.file.readJSON('package.json'),
+ // Configure the copy task to move files from the development to production folders
+ // copy: { // Task
+ // target: {
+ // files: {
+ // 'dist/': ['index.html', 'demo/**'] // 'destination': 'source'
+ // }
+ // }
+ // },
+ clean: {
+ folder: "dist"
+ },
+ uglify: { // Task
+ options: {
+ // The banner is inserted at the top of the output
+ banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
+ },
+ dist: { // Target
+ files: { // Dictionary of files
+ 'dist/js/<%= pkg.name %>.min.js': ['src/js/_.config.js', 'src/js/_.main.js', 'src/js/_.helper.js'],
+ 'dist/demo/js/fb.friends.min.js': ['src/demo/js/fb.config.js', 'src/demo/js/fb.friends.list.js'],
+ 'dist/js/libs/jquery.min.js': ['src/js/libs/jquery.js'],
+ 'dist/js/libs/require.min.js': ['src/js/libs/require.js']
+ }
+ }
+ },
+ htmlmin: { // Task
+ dist: { // Target
+ options: { // Target options
+ /*removeCommentsFromCDATA: true,
+ // https://github.com/yeoman/grunt-usemin/issues/44
+ //collapseWhitespace: true,
+ collapseBooleanAttributes: true,
+ removeAttributeQuotes: true,
+ removeRedundantAttributes: true,
+ useShortDoctype: true,
+ removeEmptyAttributes: true,
+ removeOptionalTags: true*/
+
+ removeComments: false,
+ collapseWhitespace: false
+ },
+ files: { // Dictionary of files
+ 'dist/index.html': 'src/index.html', // 'destination': 'source'
+ 'dist/demo/facebook_friends_list.html': 'src/demo/facebook_friends_list.html'
+ }
+ }
+ },
+ cssmin: { // Task
+ combine: {
+ files: { // Dictionary of files
+ 'dist/css/style.min.css': ['src/css/style.css'],
+ 'dist/demo/css/style.min.css': ['src/demo/css/style.css']
+ }
+ }
+ },
+ jshint: { // Task
+ // Define the files to lint
+ files: ['Gruntfile.js', 'src/js/*.js', 'src/demo/js/*.js'],
+ // Configure JSHint (documented at http://www.jshint.com/docs/)
+ options: {
+ // More options here if you want to override JSHint defaults
+ jshintrc: '.jshintrc'
+ }
+ },
+ // watch: { // Task
+ // files: ['<%= jshint.files %>'],
+ // tasks: ['jshint']
+ // },
+ useminPrepare: {
+ html: 'dist/index.html'
+ },
+ usemin: {
+ //html: 'dist/index.html'
+ html: ['dist/{,*/}*.html'],
+ css: ['dist/css/{,*/}*.css'],
+ options: {
+ dirs: ['dist']
+ }
+ }
+ });
+
+ // Finally, we have to load in the Grunt plugins we need. These should have all been installed through npm
+ grunt.loadNpmTasks('grunt-contrib-clean');
+ grunt.loadNpmTasks('grunt-contrib-uglify');
+ grunt.loadNpmTasks('grunt-contrib-jshint');
+ grunt.loadNpmTasks('grunt-contrib-cssmin');
+ grunt.loadNpmTasks('grunt-contrib-htmlmin');
+ grunt.loadNpmTasks('grunt-usemin');
+ //grunt.loadNpmTasks('grunt-contrib-watch');
+ //grunt.loadNpmTasks('grunt-contrib-copy');
+
+ // Let's set up some tasks
+ grunt.registerTask('test', ['jshint']);
+
+ // The default task can be run just by typing "grunt" on the command line
+ grunt.registerTask('default', ['clean', 'useminPrepare', 'jshint', 'uglify', 'cssmin', 'htmlmin', 'usemin']);
+
+};
diff --git a/README.md b/README.md
index a096d6b..4369ab3 100644
--- a/README.md
+++ b/README.md
@@ -1,4 +1,4 @@
-# [JavaScript Boilerplate](https://github.com/mdarif/JavaScript-Boilerplate)
+# [JavaScript Boilerplate](https://github.com/sapient-studio-india/JavaScript-Boilerplate)
JavaScript Boilerplate is the collection of best practices using a design pattern (Global Abatement) with the use of defined namespaces that would help you to protect our code. It is developed in a modular way with some commonly used utility methods provided that you would find useful for common operations. It is equipped with the configuration file in the form of an object literal that can be used to store global objects, config ids, URLs or textual strings. This framework has been designed to work as a ready to use template that you can build further in your projects as needed as it outlines the framework neatly and exhibits an approach to extend it.
@@ -6,21 +6,21 @@ JavaScript Boilerplate is the collection of best practices using a design patter
## Files in Repository
-1. `index.html` - An html help file illustrating helper functions.
+1. `src/index.html` - An html help file illustrating helper functions.
-2. `js/_config.js` - Config is having general details that will be commonly used across the application. Parameters like URLs, services, theme to be used within the application.
+2. `src/js/_config.js` - Config is having general details that will be commonly used across the application. Parameters like URLs, services, theme to be used within the application.
-3. `js/_helper.js` - Helper utility functions that are required across different modules or even within a single module.
+3. `src/js/_helper.js` - Helper utility functions that are required across different modules or even within a single module.
-4. `js/_main.js` - It defines the main module. We have used IIFE (Intermediately invoking function expression) namespacing and global abatement in this logic. MODULE is main namespace that has been defined and MODULE.helper is one of the components.
+4. `src/js/_main.js` - It defines the main module. We have used IIFE (Intermediately invoking function expression) namespacing and global abatement in this logic. MODULE is main namespace that has been defined and MODULE.helper is one of the components.
-5. `css/style.css` - Style sheets for the html help file.
+5. `src/css/style.css` - Style sheets for the html help file.
## Usage
1. Clone the repository using the quick start guide. To get started include the JS files in your js directory.
- The starting point is the `_main.js` file which has defined the main module and the component to be used. If you were to observe the code,
+ The starting point is the `src/js/_main.js` file which has defined the main module and the component to be used. If you were to observe the code,
(function (MODULE, $, undefined) {
@@ -50,19 +50,49 @@ JavaScript Boilerplate is the collection of best practices using a design patter
-4. Next is the `_config.js` file, which has all the global parameters that needs to be leveraged across the application. Think of this file/module as a container file to define your global variables, URLS etc. It is globally available inside the `MODULE` namespace and we can access the parameters by specifying `MODULE.config.param` to get its value in any other component. Here it has been primarily defined as an object literal as everything needs to be exposed globally.
+4. Next is the `src/js/_config.js` file, which has all the global parameters that needs to be leveraged across the application. Think of this file/module as a container file to define your global variables, URLS etc. It is globally available inside the `MODULE` namespace and we can access the parameters by specifying `MODULE.config.param` to get its value in any other component. Here it has been primarily defined as an object literal as everything needs to be exposed globally.
-5. For creating utility methods to be used across application, you can leverage the `_helper.js` file. It works on the same principle as the `_main.js`. For E.g. the way to access a helper function outside the module would be `MODULE.helper.getCookie` for the `getCookie` function.
+5. For creating utility methods to be used across application, you can leverage the `src/js/_helper.js` file. It works on the same principle as the `src/js/_main.js`. For E.g. the way to access a helper function outside the module would be `MODULE.helper.getCookie` for the `getCookie` function.
## Quick start
-Clone the git repo - `git clone git://github.com/mdarif/JavaScript-Boilerplate.git` - or [download it](https://github.com/mdarif/JavaScript-Boilerplate/zipball/master)
+Clone the git repo - `git clone git://github.com/sapient-studio-india/JavaScript-Boilerplate.git` - or [download it](https://github.com/msapient-studio-india/JavaScript-Boilerplate/zipball/master)
You can also get the JavaScript Boilerplate through npm if you have already installed node.
npm install javascript-boilerplate
+## Build Instructions
+
+### We recommend using Grunt
+
+Grunt - Download and Install [Grunt](http://gruntjs.com).
+
+OR
+
+Install Grunt
+
+ $ npm install grunt
+
+You can also Install all the dependencies using
+
+ $ npm install
+
+### Updating Grunt:
+```
+$ npm update -g grunt-cli
+```
+
+### Build the Project using
+
+ $ grunt
+
+You should see the below message for a successful build and a folder name `dist` has been created with all the expected output, parallel to `src` folder, with all the tasks completed.
+
+ Done, without errors.
+
+
## Contributing
Anyone and everyone is welcome to [contribute](#).
@@ -70,7 +100,7 @@ Anyone and everyone is welcome to [contribute](#).
## Project information
-* Source: https://github.com/mdarif/JavaScript-Boilerplate
+* Source: https://github.com/sapient-studio-india/JavaScript-Boilerplate
## License
@@ -78,6 +108,3 @@ Anyone and everyone is welcome to [contribute](#).
* MIT/GPL license
-## Author
-
-* Mohammed Arif [@arif_iq](http://twitter.com/arif_iq), [github](https://github.com/mdarif)
diff --git a/demo/css/style.css b/demo/css/style.css
deleted file mode 100644
index d50f749..0000000
--- a/demo/css/style.css
+++ /dev/null
@@ -1,660 +0,0 @@
-/* =============================================================================
- HTML5 Boilerplate CSS: h5bp.com/css
- ========================================================================== */
-
-article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
- display: block;
-}
-audio, canvas, video {
- display: inline-block;
- *display: inline;
- *zoom: 1;
-}
-audio:not([controls]) {
- display: none;
-}
-[hidden] {
- display: none;
-}
-html {
- font-size: 100%;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
-}
-html, button, input, select, textarea {
- font-family: sans-serif;
- color: #222;
-}
-body {
- margin: 0;
- font-size: 1em;
- line-height: 1.4;
-}
-
-::-moz-selection {
- background:#FF0;
- color:#000;
- text-shadow: none;
-}
-::selection {
- background: #FF0;
- color:#000;
- text-shadow: none;
-}
-a {
- color:#3B5998;
- outline:none
-}
-a:visited {
- color: #F04E00;
-}
-a:hover {
- color: #06e;
-}
-a:focus {
- outline: thin dotted;
-}
-a:hover, a:active {
- outline: 0;
-}
-abbr[title] {
- border-bottom: 1px dotted;
-}
-b, strong {
- font-weight: bold;
-}
-blockquote {
- margin: 1em 40px;
-}
-dfn {
- font-style: italic;
-}
-hr {
- display: block;
- height: 1px;
- border: 0;
- border-top: 1px solid #ccc;
- margin: 1em 0;
- padding: 0;
-}
-ins {
- background: #ff9;
- color: #000;
- text-decoration: none;
-}
-mark {
- background: #ff0;
- color: #000;
- font-style: italic;
- font-weight: bold;
-}
-pre, code, kbd, samp {
- font-family: monospace, serif;
- _font-family: 'courier new', monospace;
- font-size: 1em;
-}
-pre {
- white-space: pre;
- white-space: pre-wrap;
- word-wrap: break-word;
-}
-q {
- quotes: none;
-}
-q:before, q:after {
- content: "";
- content: none;
-}
-small {
- font-size: 85%;
-}
-sub, sup {
- font-size: 75%;
- line-height: 0;
- position: relative;
- vertical-align: baseline;
-}
-sup {
- top: -0.5em;
-}
-sub {
- bottom: -0.25em;
-}
-ul, ol {
- margin: 1em 0;
- padding: 0 0 0 40px;
-}
-dd {
- margin: 0 0 0 40px;
-}
-nav ul, nav ol {
- list-style: none;
- list-style-image: none;
- margin: 0;
- padding: 0;
-}
-img {
- border: 0;
- -ms-interpolation-mode: bicubic;
- vertical-align: middle;
-}
-svg:not(:root) {
- overflow: hidden;
-}
-figure {
- margin: 0;
-}
-form {
- margin: 0;
-}
-fieldset {
- border: 0;
- margin: 0;
- padding: 0;
-}
-label {
- cursor: pointer;
-}
-legend {
- border: 0;
- *margin-left: -7px;
- padding: 0;
- white-space: normal;
-}
-button, input, select, textarea {
- font-size: 100%;
- margin: 0;
- vertical-align: baseline;
- *vertical-align: middle;
-}
-button, input {
- line-height: normal;
-}
-button, input[type="button"], input[type="reset"], input[type="submit"] {
- cursor: pointer;
- -webkit-appearance: button;
- *overflow: visible;
-}
-button[disabled], input[disabled] {
- cursor: default;
-}
-input[type="checkbox"], input[type="radio"] {
- box-sizing: border-box;
- padding: 0;
- *width: 13px;
- *height: 13px;
-}
-input[type="search"] {
- -webkit-appearance: textfield;
- -moz-box-sizing: content-box;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
-}
-input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
- -webkit-appearance: none;
-}
-button::-moz-focus-inner, input::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-textarea {
- overflow: auto;
- vertical-align: top;
- resize: vertical;
-}
-input:valid, textarea:valid {
-}
-input:invalid, textarea:invalid {
- background-color: #f0dddd;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-td {
- vertical-align: top;
-}
-.chromeframe {
- margin: 0.2em 0;
- background: #ccc;
- color: black;
- padding: 0.2em 0;
-}
-h1, h2, h3, h4, h5, h6, ul, li, pre {
- margin:0;
- padding:0
-}
-/* ===== Primary Styles ========================================================
- Author: SapientNitro (2011) (http://www.sapient.com)
- ========================================================================== */
-
-/** Basic settings **/
-body {
- background:#FFC;
- color:#171717;
- font-size:100%;
- font-family:Verdana, Arial, Helvetica, sans-serif;
- font-weight:normal;
- line-height:1em;
- padding:40px;
-}
-h1, h2, h3, h4, h5, h6, section, article, p, .round-corner {
- width:98%;
- border-radius:7px;
- -webkit-border-radius:7px;
- -moz-border-radius:7px;
- -khtml-border-radius:7px;
- display:block;
- margin:0;
- padding:10px 1%;
- float:left;
-}
-h1 {
- font-size:2em;
-}
-h2 {
- background:#F04E00;
- color:#FFF;
- font-size:1.7em;
- margin-bottom:10px;
-}
-h3 {
- width:98%;
- background:#F2F2F2;
- color:#3B5998;
- font-size:1.4emp;
- padding:8px 1%;
- margin-bottom:10px;
- float:left;
-}
-h4 {
- font-size:1.2em;
-}
-h5 {
- font-size:1em;
-}
-h6 {
- font-size:0.8em;
-}
-a, a:visited {
- color:#3B5998;
- text-decoration:underline;
- outline:none;
-}
-a:visited {
- color:#F04E00;
-}
-a.read-more {
- clear:both;
- margin-bottom:10px;
- float:left
-}
-.hide {
- display:none;
-}
-iframe {
- border:0;
-}
-
-/* "fb_iframe_widget" class genreate from facebook */
-
-.fb_iframe_widget iframe {
- width:750px;
-}
-button, a.button, a.back-to-index {
- background:#bdbdbd;
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d0d0d0');
- background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d0d0d0));
- background:-webkit-linear-gradient(top, #ffffff, #d0d0d0);
- background:-ms-linear-gradient(top, #ffffff, #d0d0d0);
- background:-moz-linear-gradient(top, #ffffff, #d0d0d0);
- background:-o-linear-gradient(top, #ffffff, #d0d0d0);
- background:linear-gradient(top bottom, #ffffff, #d0d0d0);
- -webkit-border-radius:20px;
- -moz-border-radius:20px;
- -khtml-border-radius:20px;
- padding:5px 15px;
- text-decoration:none;
- color:#222222;
-}
-button:hover, a.button:hover, a.back-to-index:hover, button.highlight, a.button.highlight, a.back-to-index.highlight {
- background:#ffffff;
- -webkit-box-shadow:0px 0px 12px #c3c2c2;
- -moz-box-shadow:0px 0px 12px #c3c2c2;
- box-shadow:0px 0px 12px #c3c2c2;
-}
-.top-round {
- border-radius:0;
- -webkit-border-radius:0;
- -moz-border-radius:0;
- -khtml-border-radius:0;
- -moz-border-radius-topleft:7px;
- -khtml-border-top-left-radius:7px;
- -webkit-border-top-left-radius:7px;
- border-top-left-radius:7px;
- -moz-border-radius-topright:7px;
- -khtml-border-top-right-radius:7px;
- -webkit-border-top-right-radius:7px;
- border-top-right-radius:7px;
- border-radius:7px 7px 0 0;
-}
-a.back-to-index {
- position:absolute;
- color:#171717;
- font-size:11px;
- top:5px;
- right:6%;
- padding:4px 15px;
-}
-#wrapper {
- width:96%;
- max-width:1100px;
- background:#FFF;
- border-radius:7px;
- -webkit-border-radius:7px;
- -moz-border-radius:7px;
- -khtml-border-radius:7px;
- -webkit-box-shadow:0px 0px 12px #636363;
- -moz-box-shadow:0px 0px 12px #636363;
- box-shadow:0px 0px 12px #636363;
- font-size:12px;
- padding:20px 2%;
- margin:0px auto;
-}
-ul.topics {
- width:92%;
- padding:0 0 0 4%;
- float:left;
-}
-ul.topics li {
- width:100%;
- padding-bottom:5px;
- float:left;
-}
-section.content {
- width:100%;
- background:#f5f5f5;
- border:#d9d7d8 1px solid;
- padding:0;
- margin-bottom:20px;
- float:left;
-}
-section.content article {
- width:98%;
- background:#ffffff;
- border-radius:0;
- -webkit-border-radius:0;
- -moz-border-radius:0;
- -khtml-border-radius:0;
- float:left;
-}
-.options-bar {
- width:98%;
- background:#7d7d7d;
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6a6a6', endColorstr='#7d7d7d');
- background:-webkit-gradient(linear, left top, left bottom, from(#a6a6a6), to(#7d7d7d));
- background:-webkit-linear-gradient(top, #a6a6a6, #7d7d7d);
- background:-ms-linear-gradient(top, #a6a6a6, #7d7d7d);
- background:-moz-linear-gradient(top, #a6a6a6, #7d7d7d);
- background:-o-linear-gradient(top, #a6a6a6, #7d7d7d);
- background:linear-gradient(to bottom, #a6a6a6, #7d7d7d);
- border:0;
- padding:5px 1%;
- float:left;
-}
-.sub-options-bar {
- width:100%;
- float:left;
-}
-section.content footer {
- width:98%;
- padding:5px 1%;
- float:left;
-}
-.round-corner {
- -webkit-box-shadow:0px 0px 12px #636363;
- -moz-box-shadow:0px 0px 12px #636363;
- box-shadow:0px 0px 12px #636363;
- float:left;
-}
-/* Types of message boxes */
-.standard-message-box, .note-box, .alert-box, .error-box, .info-box, .success-box {
- width:98%;
- border-radius:7px;
- -webkit-border-radius:7px;
- -moz-border-radius:7px;
- -khtml-border-radius:7px;
- padding:12px 1% 10px 1%;
- margin-bottom:10px;
- float:left;
-}
-.note-box span:first-child, .alert-box span:first-child, .error-box span:first-child, .info-box span:first-child, .success-box span:first-child {
- width:22px;
- height:25px;
- background:url(../img/sprite.png) top left no-repeat;
- margin:-4px 10px 0 0;
- float:left;
-}
-.note-box span:first-child {
- background-position:-31px 0;
-}
-.alert-box span:first-child {
- background-position:-60px 0;
-}
-.error-box span:first-child {
- background-position:-88px 0;
-}
-.info-box span:first-child {
- background-position:-118px 0;
-}
-.standard-message-box {
- background:#dddddd;
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd');
- background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
- background:-webkit-linear-gradient(top, #ffffff, #dddddd);
- background:-ms-linear-gradient(top, #ffffff, #dddddd);
- background:-moz-linear-gradient(top, #ffffff, #dddddd);
- background:-o-linear-gradient(top, #ffffff, #dddddd);
- background:linear-gradient(to bottom, #ffffff, #dddddd);
- border:#d8d8d8 1px solid;
-}
-.note-box {
- background:#ffecb1;
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fef2ca');
- background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fef2ca));
- background:-webkit-linear-gradient(top, #ffffff, #fef2ca);
- background:-ms-linear-gradient(top, #ffffff, #fef2ca);
- background:-moz-linear-gradient(top, #ffffff, #fef2ca);
- background:-o-linear-gradient(top, #ffffff, #fef2ca);
- background:linear-gradient(to bottom, #ffffff, #fef2ca);
- border:#ffe55d 1px solid;
-}
-.alert-box {
- background:#feee05;
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#feee05');
- background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#feee05));
- background:-webkit-linear-gradient(top, #ffffff, #feee05);
- background:-ms-linear-gradient(top, #ffffff, #feee05);
- background:-moz-linear-gradient(top, #ffffff, #feee05);
- background:-o-linear-gradient(top, #ffffff, #feee05);
- background:linear-gradient(to bottom, #ffffff, #feee05);
- border:#ffe55d 1px solid;
-}
-.error-box {
- background:#b60001;
- color:#ffffff;
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1315', endColorstr='#b60001');
- background:-webkit-gradient(linear, left top, left bottom, from(#ff1315), to(#b60001));
- background:-webkit-linear-gradient(top, #ff1315, #b60001);
- background:-ms-linear-gradient(top, #ff1315, #b60001);
- background:-moz-linear-gradient(top, #ff1315, #b60001);
- background:-o-linear-gradient(top, #ff1315, #b60001);
- background:linear-gradient(to bottom, #ff1315, #b60001);
- border:#971515 1px solid;
-}
-.info-box {
- background:#6ae1ff;
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#6ae1ff');
- background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#6ae1ff));
- background:-webkit-linear-gradient(top, #ffffff, #6ae1ff);
- background:-ms-linear-gradient(top, #ffffff, #6ae1ff);
- background:-moz-linear-gradient(top, #ffffff, #6ae1ff);
- background:-o-linear-gradient(top, #ffffff, #6ae1ff);
- background:linear-gradient(to bottom, #ffffff, #6ae1ff);
- border:#82f0fd 1px solid;
-}
-.success-box {
- background:#8dff48;
- filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#8dff48');
- background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#8dff48));
- background:-webkit-linear-gradient(top, #ffffff, #8dff48);
- background:-ms-linear-gradient(top, #ffffff, #8dff48);
- background:-moz-linear-gradient(top, #ffffff, #8dff48);
- background:-o-linear-gradient(top, #ffffff, #8dff48);
- background:linear-gradient(to bottom, #ffffff, #8dff48);
- border:#76fe76 1px solid;
-}
-.info-box p {
- width:auto;
- padding:0;
-}
-.avatars {
- width:100%;
- padding-bottom:5px;
- float:left;
-}
-.avatars div {
- display:inline;
- padding:0 0 0 10px;
-}
-.avatars div img {
- background:#FFF;
- border:#CCC 1px solid;
- padding:5px;
-}
-#countdown-dashboard {
- width:100%;
- padding:0;
- margin-bottom:20px;
- float:left;
-}
-.round-corner {
- padding:15px 0 20px 0;
-}
-#countdown-dashboard .dash {
- width:100px;
- border-radius:0;
- -webkit-border-radius:0;
- -moz-border-radius:0;
- -khtml-border-radius:0;
- padding:0;
- margin-left:40px;
- float:left;
-}
-#countdown-dashboard .dash:first-child {
- margin-left:0;
-}
-#countdown-dashboard span.dash-title {
- width:100%;
- padding-top:10px;
- text-transform:capitalize;
- float:left;
-}
-#countdown-dashboard .digit {
- font-size:60px;
- padding:5px;
- float:left;
-}
-#countdown-dashboard .dash .digit:first-child {
- border-right:#CCC 1px solid;
-}
-article ul {
- margin:0 0 20px 30px;
- float:left
-}
-#friends-list-container div {
- width:29%;
- background:#F2F2F2;
- padding:4px 1%;
- margin:4px 1%;
- float:left;
-}
-.hide-fb-like-comment .fb-edge-comment-widget {
- display:none
-}
-pre.code {
- width:98%;
- background:#EEE;
- padding:10px 1%;
- margin-bottom:15px;
- float:left;
-}
-.fb-ltr {
- height:800px !important
-}
-
-/* "fb_edge_widget_with_comment" class genreate from facebook */
-
-.without-comment .fb_edge_widget_with_comment {
- height:24px;
- overflow:hidden
-}
-.like-logout .fb-like {
- float:left
-}
-.like-logout p {
- width:auto;
- padding: 0 0 10px 0;
- float:left;
-}
-/* =============================================================================
- Non-Semantic Helper Classes
- ========================================================================== */
-
-.ir {
- display: block;
- border: 0;
- text-indent: -999em;
- overflow: hidden;
- background-color: transparent;
- background-repeat: no-repeat;
- text-align: left;
- direction: ltr;
- *line-height: 0;
-}
-.ir br {
- display: none;
-}
-.hidden {
- display: none !important;
- visibility: hidden;
-}
-.visuallyhidden {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
-}
-.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
- clip: auto;
- margin: 0;
- overflow: visible;
- position: static
-}
-.invisible {
- visibility: hidden;
-}
-.clear-fix:before, .clear-fix:after {
- content: "";
- display: table;
-}
-.clear-fix:after {
- clear: both;
-}
-.clear-fix {
- *zoom: 1;
-}
diff --git a/demo/js/fb.friends.list.js b/demo/js/fb.friends.list.js
deleted file mode 100644
index 992c88e..0000000
--- a/demo/js/fb.friends.list.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/* Facebook implementation main scripting file *
- * Author: SapientNitro (2011) (http://www.sapient.com)
- * @version 1.0
-*/
-
-/* FBDemo (our namespace name) and undefined are passed here
- * To ensure 1. Namespace can be modified locally and isn't
- * overwritten outside of our function context
- * 2. The value of undefined is guaranteed as being truly
- * Undefined. This is to avoid issues with undefined being
- * Mutable pre-ES5.
-*/
-
-/*jshint forin:true, noarg:true, eqeqeq:true, bitwise:true, undef:true, curly:true, browser:true, devel:true, indent:4, maxerr:50, jquery:true */
-
-/*jslint devel: true, nomen: true, unparam: true, sloppy: true, indent: 4, newcap:true */
-
-/*global FB:false, jQuery, window*/
-
-(function (FBDemo, $, undefined) {
- /**
- * Logging function, for debugging mode
- */
- jQuery.log = function (message) {
- if (FBDemo.config.debug && (typeof window.console !== 'undefined' && typeof window.console.log !== 'undefined') && console.debug) {
- console.debug(message);
- } /*else {
- alert(message);
- }*/
- };
-
- FBDemo.facebook = (function () {
- function _facebook() {
- /*
- * Object of the current object
- */
- var _this = this;
- /**
- * Init call
- * Call various methods require by pages after load
- */
- this.init = function () {
- _this.FBInit();
- _this.FBLogin();
- return this;
- };
- /*
- * Click event for FB logout
- */
- this.FBLogin = function () {
- $(function () {
- $(FBDemo.config.FBLogin).click(function () {
- FB.getLoginStatus(function (response) {
- if (response.status === "unknown") {
- _this.facebookLogin();
- } else {
- FB.logout();
- }
- });
- });
- });
- };
- /*
- * Facebook login
- */
- this.facebookLogin = function () {
- FB.login(function (response) {
- if (response.status === "connected") {
- $.log("User is logged in and granted some permissions.");
- } else if ((response.status === 'not_authorized') || response.authResponse === null) {
- $.log("User has not granted permissions!");
- }
-
- _this.onFacebookInitialLoginStatus(response);
- });
- };
- /*
- * Callback for showFriendsList function
- */
- this.onFriendsListLoaded = function (response) {
- var divTarget = $(FBDemo.config.FriendsListContainer),
- data = response.data,
- html = "",
- len = data.length,
- friendIndex;
- for (friendIndex = 0; friendIndex < len; friendIndex += 1) {
- html += "" + data[friendIndex].name + "
";
- }
- divTarget.html(html);
- };
- /*
- * Show friend list
- */
- this.showFriendsList = function () {
- FB.api('/me/friends', _this.onFriendsListLoaded);
- };
- /*
- * Initialize Facebook
- */
- this.FBInit = function () {
- FB.init({
- appId : FBDemo.config.appId,
- status : true,
- cookie : true,
- xfbml : true
- });
-
- FB.Event.subscribe('auth.login', function (response) {
- _this.onFacebookInitialLoginStatus(response);
- });
-
- FB.getLoginStatus(_this.onFacebookInitialLoginStatus);
- };
- /*
- * Callback functions for 'auth.statusChange' event.
- */
- this.onFacebookInitialLoginStatus = function (response) {
- if (response.status === "connected") {
- $(FBDemo.config.FBLoginButton).hide();
- _this.showFriendsList();
- }
- };
- return this.init();
- }
-
- return new _facebook();
- }());
-
-/**
-* Check to evaluate whether 'FBDemo' exists in the global namespace - if not, assign window.FBDemo an object literal
-*/
-}(window.FBDemo = window.FBDemo || {}, jQuery));
\ No newline at end of file
diff --git a/js/_.helper.js b/js/_.helper.js
deleted file mode 100644
index f7437e6..0000000
--- a/js/_.helper.js
+++ /dev/null
@@ -1,283 +0,0 @@
-/* JavaScript Boilerplate helper file *
- * @version 1.0
- */
-
-/*jshint forin:true, noarg:true, eqeqeq:true, bitwise:true, undef:true, curly:true, browser:true, devel:true, indent:4, maxerr:50, jquery:true */
-
-/*jslint devel: true, nomen: true, unparam: true, sloppy: true, indent: 4, newcap:true */
-
-/*global FB:false, jQuery, window, document, localStorage*/
-
-(function (MODULE, $, undefined) {
- /*
- * Singletons serve as a namespace provider which isolate implementation code
- * from the global namespace so as to provide a single point of access for functions,
- * this is useful for organizing code into logical sections.
- * It is possible to put parentheses around this structure to instantiate it immediately after it's parsed.
- * This way it's always present when the script is executed and doesn't have to be instantiated separately.
- */
- MODULE.helper = (function () {
- function _helper() {
- /*
- * Object of the current object
- */
- var _this = this;
-
- /*
- * This method return the element using javaScript getElementById() method.
- * This is the private method not meant for use as a public method.
- */
- var id = function (el) {
- return document.getElementById(el);
- };
-
- /*
- * Replace multiple value in a single string.
- * Accept two parameters str, hash
- * str : String on which replace operation is to be performed
- * hash : JSON object contain string to be replaced with there replaced value
- * Return the new string at the end.
- */
- this.multiReplace = function (str, hash) {
- var key;
- for (key in hash) {
- if (Object.prototype.hasOwnProperty.call(hash, key)) {
- str = str.replace(new RegExp(key, 'g'), hash[key]);
- }
- }
- return str;
- };
-
- /*
- * Set the CSS on a particular element
- * Accept two parameters el, styles
- * el : The name of element on which CSS is to be apply.
- * styles : Various CSS property with their values. Accept data in JSON format
- * This method calls a private method setStyle
- */
- this.setCSS = function (el, styles) {
- var prop;
- for (prop in styles) {
- if (!styles.hasOwnProperty(prop)) continue;
- _this.setStyle(el, prop, styles[prop]);
- }
- };
-
- /*
- * Apply the CSS to the given element
- * Accept three parameters elements, prop, val
- * element : The element on which CSS is to be apply.
- * This method will automatically search for element using getElementById() method.
- * prop : CSS properties
- * val : Vale for CSS property
- */
- this.setStyle = function (el, prop, val) {
- id(el).style[prop] = val;
- };
-
- /*
- * Check if the given element has given class assign or not.
- * Accept two parameters el, name
- * el : Element for testing. This method will search for element using JavaScript getElementById() method.
- * name : name of class to be test
- * This method return true and false
- */
- this.hasClass = function (el, name) {
- el = id(el);
- return new RegExp('(\\s|^)' + name + '(\\s|$)').test(el.className);
- };
-
- /*
- * Add class to the given element
- * Accept two parameters el, name
- * el : element on which class to be add
- * name : name of class
- */
- this.addClass = function (el, name) {
- if (!_this.hasClass(el, name)) {
- el = id(el);
- el.className += (el.className ? ' ' : '') + name;
- }
- };
-
- /*
- * Remove class from given element
- * Accept two parameters el, name
- * el : element from which class is to be remove
- * name : name of the class to be remove
- */
- this.removeClass = function (el, name) {
- if (_this.hasClass(el, name)) {
- el = id(el);
- el.className = el.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ').replace(/^\s+|\s+$/g, '');
- }
- };
-
- /*
- * Return the URI of site
- * Return protocol, hostname and port if found
- *
- */
- this.getDomain = function () {
- var port = "",
- url = "";
-
- if (window.location.port) {
- port = ":" + window.location.port;
- }
- url = window.location.protocol + "//" + window.location.hostname + port + "/";
- return url;
- };
-
- /*
- * This method will return the query string from the URL of the website
- * Accept two parameters key, default_
- * key : The name of the key who's value need to be fetch
- * default_ : The default value which will return when nothing will found or key does not exists.
- * If not pass anything then it will return blank value.
- */
- this.getQueryString = function (key, default_) {
- if (default_ === null) {
- default_ = "";
- }
-
- key = key.replace(/[\[]/, "\\\[").replace(/[\]]/, "\\\]");
- var regex = new RegExp("[\\?&]" + key + "=([^&#]*)"),
- qs = regex.exec(window.location.href);
-
- if (qs === null) {
- return default_;
- } else {
- return qs[1];
- }
- };
-
- /*
- * This method will check for blank value in the provided string
- * This will return true if provided string contain blank value and false if not
- */
- this.isBlank = function (string) {
- var isNonblank_re = /\S/;
- return String(string).search(isNonblank_re) === -1;
- };
-
-
- /*
- * Store information in a cookie
- * Accept three param name, value, days
- */
- var setCookie = function (name, value, days) {
- if (days) {
- var date = new Date();
- date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
- var expires = "; expires=" + date.toGMTString();
- } else {
- var expires = "";
- }
- document.cookie = name + "=" + value + expires + "; path=/";
- };
-
- /*
- * Get cookie from user machine
- * Accept one parameters name
- * name : name of the cookie
- */
- var getCookie = function (name) {
- var nameEQ = name + "=",
- i,
- ca = document.cookie.split(';');
- for (i = 0; i < ca.length; i += 1) {
- var c = ca[i];
- while (c.charAt(0) === ' ') {
- c = c.substring(1, c.length);
- }
- if (c.indexOf(nameEQ) === 0) {
- return c.substring(nameEQ.length, c.length);
- }
- }
- return null;
- };
-
-
- /*
- * Erase or delete cookie from user machine
- * Accept one parameters name
- * name : name of the cookie
- */
- var removeCookie = function (name) {
- setCookie(name, "", -1);
- };
-
- /*
- * Store information to client machine
- * Accept two parameters name, value
- * name : name of the localStorage
- * value : value for the localStorage
- * Store information in HTML5 localstorage if available
- * else store information in cookie
- */
- this.setInfo = function (name, value) {
- if (typeof window.localStorage !== 'undefined') {
- localStorage.setItem(name, value);
- } else {
- setCookie(name, value);
- }
- };
-
- /*
- * Get information from client machine
- * Accept two parameters name, checkCookie
- * name : name of the localstorage
- * checkCookie : This will either be true or false.
- * If set to true then scan cookie even if user system support localStorage
- * Get information for HTML5 localstorage if available
- * else get information from cookie
- */
- this.getInfo = function (name, checkCookie) {
- var value = "";
- if (typeof window.localStorage !== 'undefined') {
- value = localStorage.getItem(name);
- } else {
- value = getCookie(name);
- }
-
- if (checkCookie === true) {
- value = getCookie(name);
- }
- return value;
- };
-
- /*
- * Remove information from client machine
- * Accept two parameters name, checkCookie
- * name : name of the localstorage for removing it permanently
- * checkCookie : This will either be true or false.
- * If set to true then scan cookie and remove if found even if user system support localStorage
- * Remove information for HTML5 localstorage if available
- * else remove information from cookie
- */
- this.removeInfo = function (name, checkCookie) {
- if (typeof window.localStorage !== 'undefined') {
- localStorage.removeItem(name);
- } else {
- removeCookie(name);
- }
- if (checkCookie === true) {
- removeCookie(name);
- }
- };
-
- this.init = function () {
- return this; /*returning this from a method is a common way to allow "chaining" of methods together*/
- };
-
- return this.init(); /*this refer to MODULE.helper.init()*/
- }
-
- return new _helper(); /*creating a new object of helper rather then a funtion*/
- }());
-
-/**
- * Check to evaluate whether 'MODULE' exists in the global namespace - if not, assign window.MODULE an object literal
- */
-}(window.MODULE = window.MODULE || {}, jQuery));
\ No newline at end of file
diff --git a/package.json b/package.json
index 81bf38d..086db98 100644
--- a/package.json
+++ b/package.json
@@ -1,20 +1,34 @@
{
- "author" : {
- "name" : "Mohammed Arif",
- "email" : "arif_iq@yahoo.co.in"
- },
- "name" : "javascript-boilerplate",
- "title" : "JavaScript-Boilerplate",
- "description" : "JavaScript Boilerplate is the collection of best practices.",
- "keywords" : ["javascript-boilerplate", "js-boilerplate", "boilerplate", "javascript"],
- "repository" : {
- "type" : "git",
- "url" : "https://github.com/mdarif/JavaScript-Boilerplate.git"
- },
- "dependencies": {
- },
- "devDependencies": {},
- "main" : "./js/_.main.js",
- "version" : "1.0.2",
- "license" : "MIT/GPL"
-}
\ No newline at end of file
+ "author": {
+ "name": "Mohammed Arif",
+ "email": "arif_iq@yahoo.co.in"
+ },
+ "name": "javascript-boilerplate",
+ "title": "JavaScript-Boilerplate",
+ "description": "JavaScript Boilerplate is the collection of best practices.",
+ "keywords": [
+ "javascript-boilerplate",
+ "js-boilerplate",
+ "boilerplate",
+ "javascript"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/mdarif/JavaScript-Boilerplate.git"
+ },
+ "dependencies": {},
+ "devDependencies": {
+ "grunt": "~0.4.1",
+ "grunt-contrib-uglify": "~0.2.0",
+ "grunt-contrib-jshint": "~0.4.3",
+ "grunt-contrib-watch": "~0.4.3",
+ "grunt-contrib-concat": "~0.3.0",
+ "grunt-contrib-copy": "~0.4.1",
+ "grunt-contrib-cssmin": "~0.6.0",
+ "grunt-contrib-htmlmin": "~0.1.3",
+ "grunt-contrib-clean": "~0.4.1",
+ "grunt-usemin": "~0.1.12"
+ },
+ "version": "1.0.2",
+ "license": "MIT/GPL"
+}
diff --git a/css/style.css b/src/css/style.css
similarity index 100%
rename from css/style.css
rename to src/css/style.css
diff --git a/src/demo/css/style.css b/src/demo/css/style.css
new file mode 100644
index 0000000..3f08214
--- /dev/null
+++ b/src/demo/css/style.css
@@ -0,0 +1,660 @@
+/* =============================================================================
+ HTML5 Boilerplate CSS: h5bp.com/css
+ ========================================================================== */
+
+article, aside, details, figcaption, figure, footer, header, hgroup, nav, section {
+ display: block;
+}
+audio, canvas, video {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+}
+audio:not([controls]) {
+ display: none;
+}
+[hidden] {
+ display: none;
+}
+html {
+ font-size: 100%;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+html, button, input, select, textarea {
+ font-family: sans-serif;
+ color: #222;
+}
+body {
+ margin: 0;
+ font-size: 1em;
+ line-height: 1.4;
+}
+
+::-moz-selection {
+ background:#FF0;
+ color:#000;
+ text-shadow: none;
+}
+::selection {
+ background: #FF0;
+ color:#000;
+ text-shadow: none;
+}
+a {
+ color:#3B5998;
+ outline:none
+}
+a:visited {
+ color: #F04E00;
+}
+a:hover {
+ color: #06e;
+}
+a:focus {
+ outline: thin dotted;
+}
+a:hover, a:active {
+ outline: 0;
+}
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+b, strong {
+ font-weight: bold;
+}
+blockquote {
+ margin: 1em 40px;
+}
+dfn {
+ font-style: italic;
+}
+hr {
+ display: block;
+ height: 1px;
+ border: 0;
+ border-top: 1px solid #ccc;
+ margin: 1em 0;
+ padding: 0;
+}
+ins {
+ background: #ff9;
+ color: #000;
+ text-decoration: none;
+}
+mark {
+ background: #ff0;
+ color: #000;
+ font-style: italic;
+ font-weight: bold;
+}
+pre, code, kbd, samp {
+ font-family: monospace, serif;
+ _font-family: 'courier new', monospace;
+ font-size: 1em;
+}
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+q {
+ quotes: none;
+}
+q:before, q:after {
+ content: "";
+ content: none;
+}
+small {
+ font-size: 85%;
+}
+sub, sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+sup {
+ top: -0.5em;
+}
+sub {
+ bottom: -0.25em;
+}
+ul, ol {
+ margin: 1em 0;
+ padding: 0 0 0 40px;
+}
+dd {
+ margin: 0 0 0 40px;
+}
+nav ul, nav ol {
+ list-style: none;
+ list-style-image: none;
+ margin: 0;
+ padding: 0;
+}
+img {
+ border: 0;
+ -ms-interpolation-mode: bicubic;
+ vertical-align: middle;
+}
+svg:not(:root) {
+ overflow: hidden;
+}
+figure {
+ margin: 0;
+}
+form {
+ margin: 0;
+}
+fieldset {
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+label {
+ cursor: pointer;
+}
+legend {
+ border: 0;
+ *margin-left: -7px;
+ padding: 0;
+ white-space: normal;
+}
+button, input, select, textarea {
+ font-size: 100%;
+ margin: 0;
+ vertical-align: baseline;
+ *vertical-align: middle;
+}
+button, input {
+ line-height: normal;
+}
+button, input[type="button"], input[type="reset"], input[type="submit"] {
+ cursor: pointer;
+ -webkit-appearance: button;
+ *overflow: visible;
+}
+button[disabled], input[disabled] {
+ cursor: default;
+}
+input[type="checkbox"], input[type="radio"] {
+ box-sizing: border-box;
+ padding: 0;
+ *width: 13px;
+ *height: 13px;
+}
+input[type="search"] {
+ -webkit-appearance: textfield;
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box;
+ box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-cancel-button {
+ -webkit-appearance: none;
+}
+button::-moz-focus-inner, input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+textarea {
+ overflow: auto;
+ vertical-align: top;
+ resize: vertical;
+}
+input:valid, textarea:valid {
+}
+input:invalid, textarea:invalid {
+ background-color: #f0dddd;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+td {
+ vertical-align: top;
+}
+.chromeframe {
+ margin: 0.2em 0;
+ background: #ccc;
+ color: black;
+ padding: 0.2em 0;
+}
+h1, h2, h3, h4, h5, h6, ul, li, pre {
+ margin:0;
+ padding:0
+}
+/* ===== Primary Styles ========================================================
+ Author: SapientNitro (2011) (http://www.sapient.com)
+ ========================================================================== */
+
+/** Basic settings **/
+body {
+ background:#FFC;
+ color:#171717;
+ font-size:100%;
+ font-family:Verdana, Arial, Helvetica, sans-serif;
+ font-weight:normal;
+ line-height:1em;
+ padding:40px;
+}
+h1, h2, h3, h4, h5, h6, section, article, p, .round-corner {
+ width:98%;
+ border-radius:7px;
+ -webkit-border-radius:7px;
+ -moz-border-radius:7px;
+ -khtml-border-radius:7px;
+ display:block;
+ margin:0;
+ padding:10px 1%;
+ float:left;
+}
+h1 {
+ font-size:2em;
+}
+h2 {
+ background:#F04E00;
+ color:#FFF;
+ font-size:1.7em;
+ margin-bottom:10px;
+}
+h3 {
+ width:98%;
+ background:#F2F2F2;
+ color:#3B5998;
+ font-size:1.4emp;
+ padding:8px 1%;
+ margin-bottom:10px;
+ float:left;
+}
+h4 {
+ font-size:1.2em;
+}
+h5 {
+ font-size:1em;
+}
+h6 {
+ font-size:0.8em;
+}
+a, a:visited {
+ color:#3B5998;
+ text-decoration:underline;
+ outline:none;
+}
+a:visited {
+ color:#F04E00;
+}
+a.read-more {
+ clear:both;
+ margin-bottom:10px;
+ float:left
+}
+.hide {
+ display:none;
+}
+iframe {
+ border:0;
+}
+
+/* "fb_iframe_widget" class genreate from facebook */
+
+.fb_iframe_widget iframe {
+ width:750px;
+}
+button, a.button, a.back-to-index {
+ background:#bdbdbd;
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d0d0d0');
+ background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#d0d0d0));
+ background:-webkit-linear-gradient(top, #ffffff, #d0d0d0);
+ background:-ms-linear-gradient(top, #ffffff, #d0d0d0);
+ background:-moz-linear-gradient(top, #ffffff, #d0d0d0);
+ background:-o-linear-gradient(top, #ffffff, #d0d0d0);
+ background:linear-gradient(top bottom, #ffffff, #d0d0d0);
+ -webkit-border-radius:20px;
+ -moz-border-radius:20px;
+ -khtml-border-radius:20px;
+ padding:5px 15px;
+ text-decoration:none;
+ color:#222222;
+}
+button:hover, a.button:hover, a.back-to-index:hover, button.highlight, a.button.highlight, a.back-to-index.highlight {
+ background:#ffffff;
+ -webkit-box-shadow:0px 0px 12px #c3c2c2;
+ -moz-box-shadow:0px 0px 12px #c3c2c2;
+ box-shadow:0px 0px 12px #c3c2c2;
+}
+.top-round {
+ border-radius:0;
+ -webkit-border-radius:0;
+ -moz-border-radius:0;
+ -khtml-border-radius:0;
+ -moz-border-radius-topleft:7px;
+ -khtml-border-top-left-radius:7px;
+ -webkit-border-top-left-radius:7px;
+ border-top-left-radius:7px;
+ -moz-border-radius-topright:7px;
+ -khtml-border-top-right-radius:7px;
+ -webkit-border-top-right-radius:7px;
+ border-top-right-radius:7px;
+ border-radius:7px 7px 0 0;
+}
+a.back-to-index {
+ position:absolute;
+ color:#171717;
+ font-size:11px;
+ top:5px;
+ right:6%;
+ padding:4px 15px;
+}
+#wrapper {
+ width:96%;
+ max-width:1100px;
+ background:#FFF;
+ border-radius:7px;
+ -webkit-border-radius:7px;
+ -moz-border-radius:7px;
+ -khtml-border-radius:7px;
+ -webkit-box-shadow:0px 0px 12px #636363;
+ -moz-box-shadow:0px 0px 12px #636363;
+ box-shadow:0px 0px 12px #636363;
+ font-size:12px;
+ padding:20px 2%;
+ margin:0px auto;
+}
+ul.topics {
+ width:92%;
+ padding:0 0 0 4%;
+ float:left;
+}
+ul.topics li {
+ width:100%;
+ padding-bottom:5px;
+ float:left;
+}
+section.content {
+ width:100%;
+ background:#f5f5f5;
+ border:#d9d7d8 1px solid;
+ padding:0;
+ margin-bottom:20px;
+ float:left;
+}
+section.content article {
+ width:98%;
+ background:#ffffff;
+ border-radius:0;
+ -webkit-border-radius:0;
+ -moz-border-radius:0;
+ -khtml-border-radius:0;
+ float:left;
+}
+.options-bar {
+ width:98%;
+ background:#7d7d7d;
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#a6a6a6', endColorstr='#7d7d7d');
+ background:-webkit-gradient(linear, left top, left bottom, from(#a6a6a6), to(#7d7d7d));
+ background:-webkit-linear-gradient(top, #a6a6a6, #7d7d7d);
+ background:-ms-linear-gradient(top, #a6a6a6, #7d7d7d);
+ background:-moz-linear-gradient(top, #a6a6a6, #7d7d7d);
+ background:-o-linear-gradient(top, #a6a6a6, #7d7d7d);
+ background:linear-gradient(to bottom, #a6a6a6, #7d7d7d);
+ border:0;
+ padding:5px 1%;
+ float:left;
+}
+.sub-options-bar {
+ width:100%;
+ float:left;
+}
+section.content footer {
+ width:98%;
+ padding:5px 1%;
+ float:left;
+}
+.round-corner {
+ -webkit-box-shadow:0px 0px 12px #636363;
+ -moz-box-shadow:0px 0px 12px #636363;
+ box-shadow:0px 0px 12px #636363;
+ float:left;
+}
+/* Types of message boxes */
+.standard-message-box, .note-box, .alert-box, .error-box, .info-box, .success-box {
+ width:98%;
+ border-radius:7px;
+ -webkit-border-radius:7px;
+ -moz-border-radius:7px;
+ -khtml-border-radius:7px;
+ padding:12px 1% 10px 1%;
+ margin-bottom:10px;
+ float:left;
+}
+.note-box span:first-child, .alert-box span:first-child, .error-box span:first-child, .info-box span:first-child, .success-box span:first-child {
+ width:22px;
+ height:25px;
+ background:url(../img/sprite.png) top left no-repeat;
+ margin:-4px 10px 0 0;
+ float:left;
+}
+.note-box span:first-child {
+ background-position:-31px 0;
+}
+.alert-box span:first-child {
+ background-position:-60px 0;
+}
+.error-box span:first-child {
+ background-position:-88px 0;
+}
+.info-box span:first-child {
+ background-position:-118px 0;
+}
+.standard-message-box {
+ background:#dddddd;
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#dddddd');
+ background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#dddddd));
+ background:-webkit-linear-gradient(top, #ffffff, #dddddd);
+ background:-ms-linear-gradient(top, #ffffff, #dddddd);
+ background:-moz-linear-gradient(top, #ffffff, #dddddd);
+ background:-o-linear-gradient(top, #ffffff, #dddddd);
+ background:linear-gradient(to bottom, #ffffff, #dddddd);
+ border:#d8d8d8 1px solid;
+}
+.note-box {
+ background:#ffecb1;
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#fef2ca');
+ background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#fef2ca));
+ background:-webkit-linear-gradient(top, #ffffff, #fef2ca);
+ background:-ms-linear-gradient(top, #ffffff, #fef2ca);
+ background:-moz-linear-gradient(top, #ffffff, #fef2ca);
+ background:-o-linear-gradient(top, #ffffff, #fef2ca);
+ background:linear-gradient(to bottom, #ffffff, #fef2ca);
+ border:#ffe55d 1px solid;
+}
+.alert-box {
+ background:#feee05;
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#feee05');
+ background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#feee05));
+ background:-webkit-linear-gradient(top, #ffffff, #feee05);
+ background:-ms-linear-gradient(top, #ffffff, #feee05);
+ background:-moz-linear-gradient(top, #ffffff, #feee05);
+ background:-o-linear-gradient(top, #ffffff, #feee05);
+ background:linear-gradient(to bottom, #ffffff, #feee05);
+ border:#ffe55d 1px solid;
+}
+.error-box {
+ background:#b60001;
+ color:#ffffff;
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1315', endColorstr='#b60001');
+ background:-webkit-gradient(linear, left top, left bottom, from(#ff1315), to(#b60001));
+ background:-webkit-linear-gradient(top, #ff1315, #b60001);
+ background:-ms-linear-gradient(top, #ff1315, #b60001);
+ background:-moz-linear-gradient(top, #ff1315, #b60001);
+ background:-o-linear-gradient(top, #ff1315, #b60001);
+ background:linear-gradient(to bottom, #ff1315, #b60001);
+ border:#971515 1px solid;
+}
+.info-box {
+ background:#6ae1ff;
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#6ae1ff');
+ background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#6ae1ff));
+ background:-webkit-linear-gradient(top, #ffffff, #6ae1ff);
+ background:-ms-linear-gradient(top, #ffffff, #6ae1ff);
+ background:-moz-linear-gradient(top, #ffffff, #6ae1ff);
+ background:-o-linear-gradient(top, #ffffff, #6ae1ff);
+ background:linear-gradient(to bottom, #ffffff, #6ae1ff);
+ border:#82f0fd 1px solid;
+}
+.success-box {
+ background:#8dff48;
+ filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#8dff48');
+ background:-webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#8dff48));
+ background:-webkit-linear-gradient(top, #ffffff, #8dff48);
+ background:-ms-linear-gradient(top, #ffffff, #8dff48);
+ background:-moz-linear-gradient(top, #ffffff, #8dff48);
+ background:-o-linear-gradient(top, #ffffff, #8dff48);
+ background:linear-gradient(to bottom, #ffffff, #8dff48);
+ border:#76fe76 1px solid;
+}
+.info-box p {
+ width:auto;
+ padding:0;
+}
+.avatars {
+ width:100%;
+ padding-bottom:5px;
+ float:left;
+}
+.avatars div {
+ display:inline;
+ padding:0 0 0 10px;
+}
+.avatars div img {
+ background:#FFF;
+ border:#CCC 1px solid;
+ padding:5px;
+}
+#countdown-dashboard {
+ width:100%;
+ padding:0;
+ margin-bottom:20px;
+ float:left;
+}
+.round-corner {
+ padding:15px 0 20px 0;
+}
+#countdown-dashboard .dash {
+ width:100px;
+ border-radius:0;
+ -webkit-border-radius:0;
+ -moz-border-radius:0;
+ -khtml-border-radius:0;
+ padding:0;
+ margin-left:40px;
+ float:left;
+}
+#countdown-dashboard .dash:first-child {
+ margin-left:0;
+}
+#countdown-dashboard span.dash-title {
+ width:100%;
+ padding-top:10px;
+ text-transform:capitalize;
+ float:left;
+}
+#countdown-dashboard .digit {
+ font-size:60px;
+ padding:5px;
+ float:left;
+}
+#countdown-dashboard .dash .digit:first-child {
+ border-right:#CCC 1px solid;
+}
+article ul {
+ margin:0 0 20px 30px;
+ float:left
+}
+#friends-list-container div {
+ width:29%;
+ background:#F2F2F2;
+ padding:4px 1%;
+ margin:4px 1%;
+ float:left;
+}
+.hide-fb-like-comment .fb-edge-comment-widget {
+ display:none
+}
+pre.code {
+ width:98%;
+ background:#EEE;
+ padding:10px 1%;
+ margin-bottom:15px;
+ float:left;
+}
+.fb-ltr {
+ height:800px !important
+}
+
+/* "fb_edge_widget_with_comment" class genreate from facebook */
+
+.without-comment .fb_edge_widget_with_comment {
+ height:20px;
+ overflow:hidden
+}
+.like-logout .fb-like {
+ float:left
+}
+.like-logout p {
+ width:auto;
+ padding: 0 0 10px 0;
+ float:left;
+}
+/* =============================================================================
+ Non-Semantic Helper Classes
+ ========================================================================== */
+
+.ir {
+ display: block;
+ border: 0;
+ text-indent: -999em;
+ overflow: hidden;
+ background-color: transparent;
+ background-repeat: no-repeat;
+ text-align: left;
+ direction: ltr;
+ *line-height: 0;
+}
+.ir br {
+ display: none;
+}
+.hidden {
+ display: none !important;
+ visibility: hidden;
+}
+.visuallyhidden {
+ border: 0;
+ clip: rect(0 0 0 0);
+ height: 1px;
+ margin: -1px;
+ overflow: hidden;
+ padding: 0;
+ position: absolute;
+ width: 1px;
+}
+.visuallyhidden.focusable:active, .visuallyhidden.focusable:focus {
+ clip: auto;
+ margin: 0;
+ overflow: visible;
+ position: static
+}
+.invisible {
+ visibility: hidden;
+}
+.clear-fix:before, .clear-fix:after {
+ content: "";
+ display: table;
+}
+.clear-fix:after {
+ clear: both;
+}
+.clear-fix {
+ *zoom: 1;
+}
diff --git a/demo/facebook_friends_list.html b/src/demo/facebook_friends_list.html
similarity index 86%
rename from demo/facebook_friends_list.html
rename to src/demo/facebook_friends_list.html
index e1015c3..b913b52 100644
--- a/demo/facebook_friends_list.html
+++ b/src/demo/facebook_friends_list.html
@@ -11,8 +11,9 @@
-
+
+
@@ -20,9 +21,9 @@
-
- Facebook API demos
-
+
+
+
Facebook Friends List
@@ -31,7 +32,7 @@ Facebook Friends List
Read more
-
+
Facebook Friends List Example
-
+
-
-
+
-
-
+
+
+
+
+
-