v1.0 - contains positioning, opacity fade, persistence, sizing

.gitignore

@@ -0,0 +1,4 @@
+npm-debug.log
+bower_components/
+gh-pages/
+node_modules/

README.md

@@ -1,2 +1,23 @@
-simple-hint
+Simple Hint
 ===========
+
+## Features
+* positions (required)
+	- top: `.hint-top`
+	- bottom: `.hint-bottom`
+	- left: `.hint-left`
+	- right: `.hint-right`
+* opacity fade
+	- `.hint-fade`
+* persist
+	- `.hint-persist`
+* sizing
+	- small: `.hint-small`
+	- medium: `.hint-medium`
+	- big: `.hint-big`
+
+
+
+
+### Known issues
+* `.hint-fade` with `.hint-left` and `.hint-right` causes slight jump in text rendering

app.js

@@ -0,0 +1,60 @@
+var express = require('express');
+var path = require('path');
+var favicon = require('serve-favicon');
+var logger = require('morgan');
+var cookieParser = require('cookie-parser');
+var bodyParser = require('body-parser');
+
+var routes = require('./routes/index');
+var users = require('./routes/users');
+
+var app = express();
+
+// view engine setup
+app.set('views', path.join(__dirname, 'views'));
+app.set('view engine', 'jade');
+
+// uncomment after placing your favicon in /public
+//app.use(favicon(__dirname + '/public/favicon.ico'));
+app.use(logger('dev'));
+app.use(bodyParser.json());
+app.use(bodyParser.urlencoded({ extended: false }));
+app.use(cookieParser());
+app.use(express.static(path.join(__dirname, 'public')));
+
+app.use('/', routes);
+app.use('/users', users);
+
+// catch 404 and forward to error handler
+app.use(function(req, res, next) {
+    var err = new Error('Not Found');
+    err.status = 404;
+    next(err);
+});
+
+// error handlers
+
+// development error handler
+// will print stacktrace
+if (app.get('env') === 'development') {
+    app.use(function(err, req, res, next) {
+        res.status(err.status || 500);
+        res.render('error', {
+            message: err.message,
+            error: err
+        });
+    });
+}
+
+// production error handler
+// no stacktraces leaked to user
+app.use(function(err, req, res, next) {
+    res.status(err.status || 500);
+    res.render('error', {
+        message: err.message,
+        error: {}
+    });
+});
+
+
+module.exports = app;

bin/www

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+var debug = require('debug')('simple-hint');
+var app = require('../app');
+
+app.set('port', process.env.PORT || 3000);
+
+var server = app.listen(app.get('port'), function() {
+	debug('Express server listening on port ' + server.address().port);
+	console.log( 'successfully running on port ' + server.address().port );
+});

dist/simple-hint.css

@@ -0,0 +1,140 @@
+/*! Simple Hint v1.0 | Copyright (c) 2014 Catalin Covic | https://github.com/catc */
+[simple-hint]:after, [simple-hint]:before {
+  display: inline-block;
+  pointer-events: none;
+  position: absolute;
+  opacity: 0; }
+[simple-hint]:hover:after, [simple-hint]:hover:before {
+  opacity: 1; }
+[simple-hint]:before {
+  content: "";
+  border: 5px solid transparent;
+  z-index: 9998; }
+[simple-hint]:after {
+  content: attr(simple-hint);
+  text-align: center;
+  padding: 3px 7px;
+  font-size: 1.1rem;
+  line-height: 1.9em;
+  border-radius: 2px;
+  z-index: 9999;
+  color: white;
+  word-wrap: break-word;
+  white-space: pre;
+  background: #292929; }
+
+.hint-bottom:before, .hint-top:before {
+  right: 50%;
+  margin-right: -5px; }
+.hint-bottom:after, .hint-top:after {
+  left: 50%;
+  -webkit-transform: translateX(-50%);
+  -moz-transform: translateX(-50%);
+  -ms-transform: translateX(-50%);
+  transform: translateX(-50%); }
+
+.hint-bottom:before {
+  border-bottom-color: #292929;
+  top: 100%; }
+.hint-bottom:after {
+  margin-top: 9px;
+  top: 100%; }
+
+.hint-top:before {
+  border-top-color: #292929;
+  bottom: 100%; }
+.hint-top:after {
+  bottom: 100%;
+  margin-bottom: 9px; }
+
+.hint-left:before, .hint-right:before {
+  top: 50%;
+  margin-top: -5px; }
+.hint-left:after, .hint-right:after {
+  top: 50%; }
+
+.hint-left:before {
+  border-left-color: #292929;
+  left: 0;
+  margin-left: -10px; }
+.hint-left:after {
+  margin-left: -10px;
+  left: 0;
+  transform: translate(-100%, -50%); }
+
+.hint-right:before {
+  border-right-color: #292929;
+  right: 0;
+  margin-right: -10px; }
+.hint-right:after {
+  left: 100%;
+  transform: translateY(-50%);
+  margin-left: 10px; }
+
+.hint-fade:before, .hint-fade:after {
+  -webkit-transition: opacity 0.3s ease;
+  -moz-transition: opacity 0.3s ease;
+  transition: opacity 0.3s ease; }
+
+.hint-persist:before, .hint-persist:after {
+  opacity: 1; }
+
+@-webkit-keyframes top {
+  from {
+    bottom: 125%; } }
+
+@-moz-keyframes top {
+  from {
+    bottom: 125%; } }
+
+@keyframes top {
+  from {
+    bottom: 125%; } }
+
+@-webkit-keyframes bottom {
+  from {
+    top: 125%; } }
+
+@-moz-keyframes bottom {
+  from {
+    top: 125%; } }
+
+@keyframes bottom {
+  from {
+    top: 125%; } }
+
+@-webkit-keyframes right {
+  from {
+    left: 125%; } }
+
+@-moz-keyframes right {
+  from {
+    left: 125%; } }
+
+@keyframes right {
+  from {
+    left: 125%; } }
+
+.hint-anim:after, .hint-anim:before {
+  transition: 0.3s; }
+.hint-anim.hint-top:hover:before, .hint-anim.hint-top:hover:after {
+  -webkit-animation: top 0.3s linear;
+  -moz-animation: top 0.3s linear;
+  animation: top 0.3s linear; }
+.hint-anim.hint-bottom:hover:before, .hint-anim.hint-bottom:hover:after {
+  -webkit-animation: bottom 0.3s linear;
+  -moz-animation: bottom 0.3s linear;
+  animation: bottom 0.3s linear; }
+.hint-anim.hint-right:hover:before, .hint-anim.hint-right:hover:after {
+  -webkit-animation: right 0.3s linear;
+  -moz-animation: right 0.3s linear;
+  animation: right 0.3s linear; }
+
+.hint-small:after {
+  width: 200px; }
+
+.hint-med:after {
+  width: 300px; }
+
+.hint-big:after {
+  width: 450px; }

gulpfile.js

@@ -0,0 +1,78 @@
+// gulp modules
+var gulp = require('gulp'),
+	sass = require('gulp-sass'),
+	rename = require('gulp-rename'),
+	minifycss = require('gulp-minify-css'),
+	livereload = require('gulp-livereload');
+
+
+// public folder paths
+var css    = __dirname + '/public/stylesheets',
+	js     = __dirname + '/public/javascripts',
+	fonts  = __dirname + '/public/fonts',
+	images = __dirname + '/public/images';
+
+
+
+// -------------- development --------------
+var dev = {
+	scssInit  : css + '/scss/*.scss', 		// initial scss processing
+	cssDest   : css, 						// css destination
+	scssWatch : css + '/**/*.scss', 		// scss watch
+	cssReload : css + '/*.css', 			// live-reload watch
+};
+
+
+// compile scss
+gulp.task('scss', function(){
+	gulp.src( dev.scssInit )
+		.pipe( sass({errLogToConsole: true}) )
+		.pipe( gulp.dest( dev.cssDest) )
+		.pipe( livereload() );
+});
+
+// watch scss
+gulp.task('watch', function(){
+	gulp.watch( dev.scssWatch, ['scss'] );
+});
+
+
+// start express
+gulp.task('express', function(){
+	require('./bin/www');
+});
+
+
+gulp.task('dev', ['scss', 'express', 'watch'] );
+
+
+
+// -------------- dist --------------
+var dist = {
+	dest : __dirname + '/dist/',
+
+	scssInit : css + '/scss/simple-hint.scss',
+	cssInit : css + '/simple-hint.css'
+};
+
+// scss compile
+gulp.task('dist-scss', function(){
+	gulp.src( dist.scssInit )
+		.pipe( sass() )
+		.pipe( gulp.dest( css ) );
+});
+
+// simple-hint css
+gulp.task('dist-css', function(){
+	gulp.src( dist.cssInit )
+		.pipe( gulp.dest( dist.dest ) )
+		.pipe( rename({ suffix: '.min'}) )
+		.pipe( minifycss() )
+		.pipe( gulp.dest( dist.dest ) );
+
+});
+
+
+gulp.task('dist', ['dist-scss', 'dist-css'], function(){
+	console.log( 'successfully set up dist' );
+});

package.json

@@ -0,0 +1,24 @@
+{
+  "name": "simple-hint",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "start": "node ./bin/www"
+  },
+  "dependencies": {
+    "express": "~4.9.0",
+    "body-parser": "~1.8.1",
+    "cookie-parser": "~1.3.3",
+    "morgan": "~1.3.0",
+    "serve-favicon": "~2.1.3",
+    "debug": "~2.0.0",
+    "jade": "~1.6.0"
+  },
+  "devDependencies": {
+    "gulp": "^3.8.8",
+    "gulp-livereload": "^2.1.1",
+    "gulp-minify-css": "^0.3.10",
+    "gulp-rename": "^1.2.0",
+    "gulp-sass": "^1.1.0"
+  }
+}

public/stylesheets/scss/_base.scss

@@ -0,0 +1,18 @@
+
+// normalize : https://github.com/necolas/normalize.css/
+@import "base/normalize";
+
+// variables + custom mixins
+@import "base/variables";
+
+// set globals (body, headings, p, span, ul, li, etc.)
+@import "base/global";
+
+// extra styling (button + input resets, sticky footer, mozilla specific settings)
+@import "base/extra";
+
+// sets up grid
+@import "base/grid";
+
+
+