init doodle base

.gitignore

@@ -0,0 +1,152 @@
+node_modules
+dist/*
+
+
+# Created by https://www.gitignore.io/api/node,sass,macos,windows,sublimetext
+
+### macOS ###
+*.DS_Store
+.AppleDouble
+.LSOverride
+
+# Icon must end with two \r
+Icon
+
+# Thumbnails
+._*
+
+# Files that might appear in the root of a volume
+.DocumentRevisions-V100
+.fseventsd
+.Spotlight-V100
+.TemporaryItems
+.Trashes
+.VolumeIcon.icns
+.com.apple.timemachine.donotpresent
+
+# Directories potentially created on remote AFP share
+.AppleDB
+.AppleDesktop
+Network Trash Folder
+Temporary Items
+.apdisk
+
+### Node ###
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Typescript v1 declaration files
+typings/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+### Sass ###
+.sass-cache/
+*.css.map
+
+### SublimeText ###
+# cache files for sublime text
+*.tmlanguage.cache
+*.tmPreferences.cache
+*.stTheme.cache
+
+# workspace files are user-specific
+*.sublime-workspace
+
+# project files should be checked into the repository, unless a significant
+# proportion of contributors will probably not be using SublimeText
+# *.sublime-project
+
+# sftp configuration file
+sftp-config.json
+
+# Package control specific files
+Package Control.last-run
+Package Control.ca-list
+Package Control.ca-bundle
+Package Control.system-ca-bundle
+Package Control.cache/
+Package Control.ca-certs/
+Package Control.merged-ca-bundle
+Package Control.user-ca-bundle
+oscrypto-ca-bundle.crt
+bh_unicode_properties.cache
+
+# Sublime-github package stores a github token in this file
+# https://packagecontrol.io/packages/sublime-github
+GitHub.sublime-settings
+
+### Windows ###
+# Windows thumbnail cache files
+Thumbs.db
+ehthumbs.db
+ehthumbs_vista.db
+
+# Folder config file
+Desktop.ini
+
+# Recycle Bin used on file shares
+$RECYCLE.BIN/
+
+# Windows Installer files
+*.cab
+*.msi
+*.msm
+*.msp
+
+# Windows shortcuts
+*.lnk
+
+
+# End of https://www.gitignore.io/api/node,sass,macos,windows,sublimetext

.travis.yml

@@ -0,0 +1,13 @@
+language: node_js
+node_js:
+  - "node"
+before_script:
+- npm install -g gulp-cli
+script: gulp build
+deploy:
+  provider: pages
+  skip-cleanup: true
+  github-token: $GITHUB_TOKEN
+  local-dir: dist
+  on:
+    branch: master

README.md

@@ -1 +1,33 @@
-# CSSdoodle
+# doodleCSS-what?
+
+Remember passing along notes in class? Sometimes just doodling down something and the friend next to you added to it and the one next to them etc.pp. and eventually a nice little fun piece of doodle art was created.
+CSSDoodle is just that, well... a little more tech-y maybe. ;)
+
+# How to contribute
+
+## Create a new tile
+
+This project uses [pug](https://pugjs.org/api/getting-started.html) for templating and [SASS](https://sass-lang.com/) for styling.
+
+1. fork this repository
+2. open terminal and run `npm install`
+3. run `gulp tile` will create your personal tile files. The name is a random string. The name of your tile (and hence the name of your pug and sass) is logged on the console. You can find your tile template in src/pug/tiles and your style file in src/sass/tiles. They are automatically added to index.pug and styles.sass
+4. run `gulp` to build the current state of the doodle. A new browser sync session will open in your browser via `localhost:3000`.
+5. open your favourite editor or IDE and start coding. The pug and sass files will be automatically processed while gulp (watch) is still running in your terminal; browser sync makes sure to refresh your page automatically too.
+6. open a pull request.
+
+## Guidlines
+Some guidelines for your doodle...
+
+### Content
+It's entirely up to you what you are creating. Please remember: be kind and have fun!
+You can place your tile anywhere on the canvas but please don't overlap other CSS-artists tiles (entirely). "Interacting" with other commponents is fine though.
+Please refrain from using words or depiction of sexism, racism, hate or anything along these lines - on your tile and in your code too!
+
+### Development
+- The canvas has a fixed size of 1440x900px - please don't change this.
+- Every tile is initially set to a fixed size of 100x100px - you can change this for your tile if you like. Remember: This is a community thingy, please don't use too much space.
+- You can add as much or as little elements to your tile as you like. It doesn't have to be just a single div image.
+- HTML (pug) and CSS (sass) only please! :)
+- add your IDE/editor specific configuration to .gitignore if necessary
+

gulpfile.js

@@ -0,0 +1,154 @@
+var gulp = require('gulp');
+var log = require('fancy-log');
+var beeper = require('beeper');
+var $ = require('gulp-load-plugins')();
+var browserSync = require('browser-sync').create();
+
+var autoprefixer = require('autoprefixer');
+var cssnano = require('cssnano');
+var del = require('del');
+var watch = require('gulp-watch');
+var plumber = require('gulp-plumber');
+
+var randomize = require('randomatic');
+
+var env = require('minimist')(process.argv.slice(2))._[0] || 'development';
+
+var isDevelopment = function() {
+    return (env === 'development');
+};
+var isProduction = function () {
+    return !isDevelopment();
+};
+
+var sassFilter = function(file) {
+    return !/\/_/.test(file.path) || !/^_/.test(file.relative);
+};
+
+function onError(err) {
+    beeper();
+    log.error(err);
+}
+
+// * * * * * FUNCTIONS * * * * * //
+function sass(filestream) {
+    return filestream
+        .pipe($.sassInheritance({ dir: 'src/sass/' }))
+        .pipe($.filter(sassFilter))
+        .pipe($.if(isDevelopment(), $.sourcemaps.init()))
+        .pipe($.sass())
+        .pipe($.if(isProduction(), $.postcss([
+            autoprefixer({ browsers: ['last 2 versions', 'ie >= 9'] }),
+            cssnano()
+        ]), $.postcss([
+            autoprefixer({ browsers: ['last 2 versions', 'ie >= 9'] })
+        ])))
+        .pipe($.if(isDevelopment(), $.sourcemaps.write()))
+        .pipe(gulp.dest('dist'))
+        .pipe($.if(isDevelopment(),browserSync.stream()));
+}
+
+function templates(filestream) {
+    return filestream
+        .pipe($.pug())
+        .pipe(gulp.dest('dist'))
+        .pipe($.if(isDevelopment(),browserSync.stream()));
+}
+
+function newTileSass(name) {
+    var str = 'div.'+name;
+    return $.file(name+'.sass', str, { src: true }).pipe(gulp.dest('src/sass/tiles')) &&
+        gulp
+            .src('src/sass/styles.sass')
+            .pipe($.modifyFile((content, path, file) => {
+                const add = '\n@import tiles/'+name;
+
+                return `${content}${add}`;
+            }))
+            .pipe(gulp.dest('src/sass'));
+}
+
+function newTilePug(name) {
+    var str = 'div.'+name;
+    return $.file(name+'.pug', str, { src: true }).pipe(gulp.dest('src/pug/tiles')) &&
+        gulp
+            .src('src/pug/index.pug')
+            .pipe($.modifyFile((content, path, file) => {
+                const add = '\n    include tiles/'+name;
+
+                return `${content}${add}`;
+            }))
+            .pipe(gulp.dest('src/pug'));
+}
+
+// * * * * * TASKS * * * * * //
+
+gulp.task('templates', function() {
+    return templates(gulp.src('src/pug/index.pug'));
+});
+
+gulp.task('sass', function() {
+    return sass(gulp.src('src/sass/**/*.sass'));
+});
+
+gulp.task('clean', function() {
+    log('Clean processed output.')
+    return del([
+        'index.html',
+        'styles.css',
+    ]);
+});
+
+gulp.task('build', ['templates', 'sass']);
+
+gulp.task('watch', ['templates', 'sass', 'browserSync'], function() {
+    log('Start watching...');
+
+    watch('src/pug/**/*.pug', { verbose: true }, function(vinyl) {
+        var filename = vinyl.path.replace(vinyl.cwd + '/', '');
+        templates(gulp.src('src/pug/index.pug')
+                .pipe(plumber({ errorHandler: onError })),'')
+            .on('end', function() {
+                log('...re-pugged '+filename);
+                browserSync.reload;
+            });
+    });
+
+    watch('src/sass/**/*.sass', { verbose: true }, function(vinyl) {
+        var filename = vinyl.path.replace(vinyl.cwd + '/', '');
+        sass(gulp.src([filename], { base: 'src/sass/' })
+                .pipe(plumber({ errorHandler: onError })))
+            .on('end', function() {
+                log('...re-sassed '+filename);
+                browserSync.reload;
+            });
+    });
+});
+
+gulp.task('browserSync', function() {
+  browserSync.init({
+    server: {
+      baseDir: 'dist'
+    },
+  })
+});
+
+gulp.task('tile', function() {
+    var name = randomize('Aa0', 10);
+    newTilePug(name);
+    newTileSass(name);
+    log('Congratulations! You just created a new tile for doodling: '+name);
+});
+
+gulp.task('screens', function () {
+  gulp.src('index.html')
+  .pipe($.localScreenshots({
+    width: ['1600']
+   }))
+  .pipe(gulp.dest('.'));
+});
+
+gulp.task('default', ['clean'], function() {
+    log('Start build for ' + env);
+    gulp.start('watch');
+});