Start angular app for demo

demo/Gruntfile.js

@@ -81,6 +81,13 @@ module.exports = function(grunt) {
             flatten:true, 
             filter:'isFile', 
             expand:true 
+          },
+          {
+            src:'../devicon.json', 
+            dest:'assets/', 
+            flatten:true, 
+            filter:'isFile', 
+            expand:true 
           }
         ],
       },
@@ -154,7 +161,8 @@ module.exports = function(grunt) {
       copy: {
         files: [
           '../font/*',
-          '../scss/devicon.scss'
+          '../scss/devicon.scss',
+          '../devicon.json'
         ],
         tasks: ['copy:dev']
       },
@@ -165,6 +173,7 @@ module.exports = function(grunt) {
         files: [
           'assets/**/*.css',
           'assets/**/*.js',
+          'assets/**/*.json',
           '**/*.html'
         ]
       }

demo/assets/devicon.json

@@ -0,0 +1,149 @@
+[{
+
+  "ProgrammingLanguages": {
+    "name": "Programming Languages",
+    "icons": [
+
+      {
+        "name": "html5",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }, {
+        "name": "css3",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }, {
+        "name": "js",
+        "options": {
+          "simple": true,
+          "text": false,
+          "color": true
+        }
+      }, {
+        "name": "javascript",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }, {
+        "name": "mysql",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }
+
+    ]
+  },
+
+  "DevelopmentTools": {
+    "name": "Development tools",
+    "icons": [
+
+      {
+        "name": "sass",
+        "options": {
+          "simple": true,
+          "text": false,
+          "color": true
+        }
+      }, {
+        "name": "less",
+        "options": {
+          "simple": true,
+          "text": false,
+          "color": true
+        }
+      }, {
+        "name": "laravel",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }, {
+        "name": "bootstrap",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }, {
+        "name": "foundation",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }, {
+        "name": "angularjs",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }, {
+        "name": "jquery",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }, {
+        "name": "grunt",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }, {
+        "name": "bower",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }, {
+        "name": "git",
+        "options": {
+          "simple": true,
+          "text": true,
+          "color": true
+        }
+      }
+
+    ]
+  },
+
+  "DesigningTools": {
+    "name": "Designing tools",
+    "icons": [
+
+      {
+        "name": "photoshop",
+        "options": {
+          "simple": true,
+          "text": false,
+          "color": true
+        }
+      }, {
+        "name": "illustrator",
+        "options": {
+          "simple": true,
+          "text": false,
+          "color": true
+        }
+      }
+
+    ]
+  }
+
+}]

demo/assets/script.js

@@ -0,0 +1,8 @@
+var phonecatApp = angular.module('devicon', []);
+ 
+phonecatApp.controller('IconListCtrl', function ($scope, $http) {
+  $http.get('assets/devicon.json').success(function(data) {
+    $scope.icons = data[0];
+  });
+ 
+});

demo/assets/scss/style.scss

@@ -1,6 +1,14 @@
 @import
 	"../scss/devicon.scss";
 
+.devicons {
+  list-style: none;
+  li {
+    display: inline-block;
+    padding: 1rem 2rem;
+  }
+}
+
 i {
   font-size: 5rem;
 }

demo/assets/style.css

@@ -316,6 +316,14 @@
   color: #faa625;
 }
 
+.devicons {
+  list-style: none;
+}
+.devicons li {
+  display: inline-block;
+  padding: 1rem 2rem;
+}
+
 i {
   font-size: 5rem;
 }

demo/index.html

@@ -16,29 +16,36 @@
 
     <script src="assets/components/modernizr.js"></script>
   </head>
-  <body>
+  <body ng-app="devicon">
     <!--[if lt IE 7]>
         <p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
     <![endif]-->
 
-    <header class="header">
+    <!-- <header class="header">
       <h1>devicon</h1>
-    </header>
+    </header> -->
 
-    <main class="main">
-      <ul>
-        <li><i class="devicon-sass"></i></li>
+    <main class="main" ng-controller="IconListCtrl">
+      <ul class="devicons" ng-repeat="type in icons">
+        <h2>{{ type.name }}</h2>
+        <li ng-repeat="icon in type.icons">
+          <i class="devicon-{{ icon.name }}"></i>
+          <i class="devicon-{{ icon.name }}-color"></i>
+          <i ng-if="icon.options.text == true" class="devicon-{{ icon.name }}-text"></i>
+          <i ng-if="icon.options.text == true" class="devicon-{{ icon.name }}-text-color"></i>
+        </li>
       </ul>
     </main>
 
-    <footer class="footer">
+    <!-- <footer class="footer">
       <a href="http://konpa.fr">konpa</a>
-    </footer>
+    </footer> -->
 
     <script src="assets/components/jquery.js"></script>
     <script src="assets/components/fastclick.js"></script>
     <script src="assets/components/foundation.js"></script>
-    <script src="assets/js/script.js"></script>
+    <script src="assets/components/angular.js"></script>
+    <script src="assets/script.js"></script>
 
     <script>
   	  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){