optimized structure and dependencies

Author: cseifert

.gitignore

@@ -1,6 +1,5 @@
 node_modules
 bower_components
-source/iconfont/*
 source/scss/.sass-cache
 source/js/vendor/*
 dist

README.md

@@ -6,16 +6,18 @@ At first, clone this repository to the location of your choice. Then install req
 ```sh
 sudo apt-get install nodejs npm librsvg2-bin phantomjs build-essential ruby1.9.1-dev fontforge
 sudo ln -s /usr/bin/nodejs /usr/bin/node
+npm install gulp bower -g
 wget http://people.mozilla.com/~jkew/woff/woff-code-latest.zip
 unzip woff-code-latest.zip -d sfnt2woff && cd sfnt2woff && make && sudo mv sfnt2woff /usr/local/bin/
 gem install fontcustom
 gem install scss_lint
+gem install scss_lint_reporter_checkstyle
 ```
 
 Then, install all Bower and NPM dependencies by moving to the cloned folder and run the install routines:
 ```sh
-bower install
 sudo npm install
+bower install
 ```
 
 Now you can make a build by the following command (See gulp.js for included tasks):

gulpfile.js

@@ -16,7 +16,6 @@ var gulp = require('gulp'),
 	jquery = require('gulp-jquery'),
 	localScreenshots = require('gulp-local-screenshots'),
 	twig = require('gulp-twig'),
-	csso = require('gulp-csso'),
 	spritesmith = require('gulp.spritesmith'),
 	merge = require('merge-stream'),
 	autoprefixer = require('gulp-autoprefixer'),
@@ -52,7 +51,6 @@ gulp.task('compile-sass', function() {
 		.pipe(sourcemaps.init())
 		.pipe(sass())
 		.pipe(autoprefixer('last 2 version', 'safari 5', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
-		.pipe(csso())
 		.pipe(gulp.dest('../dist/css'))
 		.pipe(minifyCss())
 		.pipe(rename({suffix:'.min'}))
@@ -76,7 +74,7 @@ gulp.task('compile-jquery', function() {
 });
 
 gulp.task('compile-js', function(){
-	gulp.src('source/js/*.js')
+	gulp.src(['source/js/**/*.js', '!source/js/vendor/*.js'])
 		.pipe(jshint('.jshintrc'))
 		.pipe(jshint.reporter(stylish))
 		.pipe(jscs())
@@ -100,9 +98,9 @@ gulp.task('compile-js', function(){
 });
 
 gulp.task('beautify-js', function() {
-	gulp.src('source/js/*.js')
-		.pipe(jscs({fix:true}))
+	gulp.src(['source/js/**/*.js', '!source/js/vendor/*.js'])
 		.pipe(jsBeautify({collapseWhitespace: true}))
+		.pipe(jscs({fix:true}))
 		.pipe(gulp.dest('source/js'));
 });
 
@@ -162,7 +160,7 @@ gulp.task('screens', function () {
 });
 
 gulp.task('default', function(callback){
-	runSequence('clean', 'select-icons', 'compile-iconfont', 'compile-sprites', 'optimize-images', 'compile-sass', 'compile-jquery', 'compile-js', 'html', 'screens', callback)
+	runSequence('clean', 'compile-iconfont', 'compile-sprites', 'optimize-images', 'compile-sass', 'compile-jquery', 'compile-js', 'html', 'screens', callback)
 });
 
 gulp.task('watch', function(){

package.json

@@ -37,7 +37,6 @@
     "gulp-jshint": "~1.11.2",
     "gulp-autoprefixer": "~3.0.2",
     "gulp-html5-lint": "~1.0.1",
-    "gulp-csso": "~1.0.0",
     "es6-promise": "~3.0.2",
     "gulp-sassbeautify": "~0.1.0",
     "gulp-js-prettify": "~0.1.0",

source/iconfont/_myfont.scss

@@ -0,0 +1,55 @@
+//
+// Icon Font: myfont
+//
+
+@font-face {
+  font-family: "myfont";
+  src: url("../iconfont/myfont.eot");
+  src: url("../iconfont/myfont.eot?#iefix") format("embedded-opentype"),
+       url("../iconfont/myfont.woff") format("woff"),
+       url("../iconfont/myfont.ttf") format("truetype"),
+       url("../iconfont/myfont.svg#myfont") format("svg");
+  font-weight: normal;
+  font-style: normal;
+}
+
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  @font-face {
+    font-family: "myfont";
+    src: url("../iconfont/myfont.svg#myfont") format("svg");
+  }
+}
+
+[data-icon]:before { content: attr(data-icon); }
+
+[data-icon]:before,
+.icon-500px:before,
+.icon-adjust:before,
+.icon-adn:before,
+.icon-align-center:before,
+.icon-align-justify:before {
+  display: inline-block;
+  font-family: "myfont";
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  line-height: 1;
+  text-decoration: inherit;
+  text-rendering: optimizeLegibility;
+  text-transform: none;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  font-smoothing: antialiased;
+}
+
+.icon-500px:before { content: "\f100"; }
+.icon-adjust:before { content: "\f101"; }
+.icon-adn:before { content: "\f105"; }
+.icon-align-center:before { content: "\f106"; }
+.icon-align-justify:before { content: "\f107"; }
+
+$font-myfont-500px: "\f100";
+$font-myfont-adjust: "\f101";
+$font-myfont-adn: "\f105";
+$font-myfont-align-center: "\f106";
+$font-myfont-align-justify: "\f107";

source/iconfont/icons/500px.svg

@@ -1,5 +1,5 @@
 <!doctype html>
-<html class="no-js" lang="">
+<html class="no-js" lang="en">
     <head>
         <meta charset="utf-8">
         <meta http-equiv="X-UA-Compatible" content="IE=edge">
@@ -10,7 +10,7 @@
         <link rel="stylesheet" href="css/frontend.min.css">
     </head>
     <body>
-		<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
+		<nav class="navbar navbar-inverse navbar-fixed-top">
 		  <div class="container">
 			<div class="navbar-header">
 			  <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">