larswittenberg

// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// ----

$map--colors: (
  blue        : #0066cc,
  blue--light : #15b3fc,
  grey        : #575757,
  grey--dark  : #4a4a4a,

larswittenberg

/*******************************************************************************
* Placehoder Styling
*******************************************************************************/
@mixin placeholder {
  &::-webkit-input-placeholder { @content; }
  &:-moz-placeholder           { @content; } // Firefox 18-
  &::-moz-placeholder          { @content; } // Firefox 19+
  &:-ms-input-placeholder      { @content; }
}

larswittenberg

/*******************************************************************************
* DEPENDENCIES
*******************************************************************************/

var gulp = require('gulp');
var sass = require('gulp-sass');
var minifycss = require('gulp-minify-css');
var rename = require('gulp-rename');
var jshint = require('gulp-jshint');
var concat = require('gulp-concat');

larswittenberg

/*******************************************************************************
* DEPENDENCIES
*******************************************************************************/

var gulp = require('gulp');
var sass = require('gulp-sass');
var notify = require('gulp-notify');
var browserSync = require('browser-sync');

larswittenberg

1. Node.js installieren / direkter Download Link
2. Gulp.js global installieren: Terminal: (sudo) npm install -g gulp
3. Die Node Module vom Git ausschließen: in der Datei .gitignore folgendes ergänzen node_modules/*
4. Ins Projekt Verzeichnis wechseln
5. Erstmalig: npm init ausführen, evtl Infos eingeben und Bestätigen
6. Gulp.js für das Projekt installieren: (sudo) npm install --save-dev gulp
7. Benötigte Plugins installieren: (sudo) npm install gulp-sass gulp-notify browser-sync --save-dev
8. Datei gulpfile.js im Projekt Ordner anlegen und konfigurieren (siehe anderes Gist)

larswittenberg

// Quelle: http://grochtdreis.de/weblog/2014/01/27/browserabfrage-zu-jquery-zurueckholen/
// bringt $browser zum modernen jQuery zurück
// brings back $.browser to modern jQuery

jQuery.browser={};
(function(){
	jQuery.browser.msie=false;
	jQuery.browser.version=0;
	if(navigator.userAgent.match(/MSIE ([0-9]+)\./)){
		jQuery.browser.msie=true;jQuery.browser.version=RegExp.$1;

larswittenberg

// http://stackoverflow.com/questions/5228459/selector-count-in-css
// The following snippet can be run in the Firebug console in Firefox to count
// the total number of CSS selectors (not just CSS rules) and check whether 
// it reaches the limit of 4095 selectors per stylesheet:

var
  styleSheets = document.styleSheets,
  totalStyleSheets = styleSheets.length;

for (var j = 0; j < totalStyleSheets; j++){

larswittenberg

/*
** Perfect Full Page Background Image
** http://css-tricks.com/perfect-full-page-background-image/
**
** UPDTAE: background-attachment: fixed; führt bei iOS zu Problemen
** http://codepen.io/larswittenberg/pen/zlEsL
*/

.background-image {
  position: fixed;

larswittenberg

/*
http://davidwalsh.name/firefox-buttons
*/

input::-moz-focus-inner { 
  border: 0; 
	padding: 0; 
	margin-top:-2px; 
	margin-bottom: -2px; 
}

larswittenberg

// Source: http://iamskwerl.com/tech/2012/11/flash-detection-with-one-line-of-javascript/

var hasFlash = navigator.mimeTypes && navigator.mimeTypes.length ? Array.prototype.slice.call(navigator.mimeTypes).some(function(a) { return "application/x-shockwave-flash" == a.type; }) : /MSIE/.test(navigator.userAgent) ? eval("try { new ActiveXObject('ShockwaveFlash.ShockwaveFlash') && !0 } catch(e) { !1 };") : !1;