Skip to content

Commit 2abac00

Browse files
catccatc
committed
v1.0 - contains positioning, opacity fade, persistence, sizing
1 parent f7fb8a2 commit 2abac00

23 files changed

+2511
-1
lines changed

‎.gitignore

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
npm-debug.log
2+
bower_components/
3+
gh-pages/
4+
node_modules/

‎README.md

+22-1
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,23 @@
1-
simple-hint
1+
Simple Hint
22
===========
3+
4+
## Features
5+
* positions (required)
6+
- top: `.hint-top`
7+
- bottom: `.hint-bottom`
8+
- left: `.hint-left`
9+
- right: `.hint-right`
10+
* opacity fade
11+
- `.hint-fade`
12+
* persist
13+
- `.hint-persist`
14+
* sizing
15+
- small: `.hint-small`
16+
- medium: `.hint-medium`
17+
- big: `.hint-big`
18+
19+
20+
21+
22+
### Known issues
23+
* `.hint-fade` with `.hint-left` and `.hint-right` causes slight jump in text rendering

‎app.js

+60
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
var express = require('express');
2+
var path = require('path');
3+
var favicon = require('serve-favicon');
4+
var logger = require('morgan');
5+
var cookieParser = require('cookie-parser');
6+
var bodyParser = require('body-parser');
7+
8+
var routes = require('./routes/index');
9+
var users = require('./routes/users');
10+
11+
var app = express();
12+
13+
// view engine setup
14+
app.set('views', path.join(__dirname, 'views'));
15+
app.set('view engine', 'jade');
16+
17+
// uncomment after placing your favicon in /public
18+
//app.use(favicon(__dirname + '/public/favicon.ico'));
19+
app.use(logger('dev'));
20+
app.use(bodyParser.json());
21+
app.use(bodyParser.urlencoded({ extended: false }));
22+
app.use(cookieParser());
23+
app.use(express.static(path.join(__dirname, 'public')));
24+
25+
app.use('/', routes);
26+
app.use('/users', users);
27+
28+
// catch 404 and forward to error handler
29+
app.use(function(req, res, next) {
30+
var err = new Error('Not Found');
31+
err.status = 404;
32+
next(err);
33+
});
34+
35+
// error handlers
36+
37+
// development error handler
38+
// will print stacktrace
39+
if (app.get('env') === 'development') {
40+
app.use(function(err, req, res, next) {
41+
res.status(err.status || 500);
42+
res.render('error', {
43+
message: err.message,
44+
error: err
45+
});
46+
});
47+
}
48+
49+
// production error handler
50+
// no stacktraces leaked to user
51+
app.use(function(err, req, res, next) {
52+
res.status(err.status || 500);
53+
res.render('error', {
54+
message: err.message,
55+
error: {}
56+
});
57+
});
58+
59+
60+
module.exports = app;

‎bin/www

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
#!/usr/bin/env node
2+
var debug = require('debug')('simple-hint');
3+
var app = require('../app');
4+
5+
app.set('port', process.env.PORT || 3000);
6+
7+
var server = app.listen(app.get('port'), function() {
8+
debug('Express server listening on port ' + server.address().port);
9+
console.log( 'successfully running on port ' + server.address().port );
10+
});

‎dist/simple-hint.css

+140
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,140 @@
1+
/*! Simple Hint v1.0 | Copyright (c) 2014 Catalin Covic | https://github.com/catc */
2+
[simple-hint]:after, [simple-hint]:before {
3+
display: inline-block;
4+
pointer-events: none;
5+
position: absolute;
6+
opacity: 0; }
7+
[simple-hint]:hover:after, [simple-hint]:hover:before {
8+
opacity: 1; }
9+
[simple-hint]:before {
10+
content: "";
11+
border: 5px solid transparent;
12+
z-index: 9998; }
13+
[simple-hint]:after {
14+
content: attr(simple-hint);
15+
text-align: center;
16+
padding: 3px 7px;
17+
font-size: 1.1rem;
18+
line-height: 1.9em;
19+
border-radius: 2px;
20+
z-index: 9999;
21+
color: white;
22+
word-wrap: break-word;
23+
white-space: pre;
24+
background: #292929; }
25+
26+
.hint-bottom:before, .hint-top:before {
27+
right: 50%;
28+
margin-right: -5px; }
29+
.hint-bottom:after, .hint-top:after {
30+
left: 50%;
31+
-webkit-transform: translateX(-50%);
32+
-moz-transform: translateX(-50%);
33+
-ms-transform: translateX(-50%);
34+
transform: translateX(-50%); }
35+
36+
.hint-bottom:before {
37+
border-bottom-color: #292929;
38+
top: 100%; }
39+
.hint-bottom:after {
40+
margin-top: 9px;
41+
top: 100%; }
42+
43+
.hint-top:before {
44+
border-top-color: #292929;
45+
bottom: 100%; }
46+
.hint-top:after {
47+
bottom: 100%;
48+
margin-bottom: 9px; }
49+
50+
.hint-left:before, .hint-right:before {
51+
top: 50%;
52+
margin-top: -5px; }
53+
.hint-left:after, .hint-right:after {
54+
top: 50%; }
55+
56+
.hint-left:before {
57+
border-left-color: #292929;
58+
left: 0;
59+
margin-left: -10px; }
60+
.hint-left:after {
61+
margin-left: -10px;
62+
left: 0;
63+
transform: translate(-100%, -50%); }
64+
65+
.hint-right:before {
66+
border-right-color: #292929;
67+
right: 0;
68+
margin-right: -10px; }
69+
.hint-right:after {
70+
left: 100%;
71+
transform: translateY(-50%);
72+
margin-left: 10px; }
73+
74+
.hint-fade:before, .hint-fade:after {
75+
-webkit-transition: opacity 0.3s ease;
76+
-moz-transition: opacity 0.3s ease;
77+
transition: opacity 0.3s ease; }
78+
79+
.hint-persist:before, .hint-persist:after {
80+
opacity: 1; }
81+
82+
@-webkit-keyframes top {
83+
from {
84+
bottom: 125%; } }
85+
86+
@-moz-keyframes top {
87+
from {
88+
bottom: 125%; } }
89+
90+
@keyframes top {
91+
from {
92+
bottom: 125%; } }
93+
94+
@-webkit-keyframes bottom {
95+
from {
96+
top: 125%; } }
97+
98+
@-moz-keyframes bottom {
99+
from {
100+
top: 125%; } }
101+
102+
@keyframes bottom {
103+
from {
104+
top: 125%; } }
105+
106+
@-webkit-keyframes right {
107+
from {
108+
left: 125%; } }
109+
110+
@-moz-keyframes right {
111+
from {
112+
left: 125%; } }
113+
114+
@keyframes right {
115+
from {
116+
left: 125%; } }
117+
118+
.hint-anim:after, .hint-anim:before {
119+
transition: 0.3s; }
120+
.hint-anim.hint-top:hover:before, .hint-anim.hint-top:hover:after {
121+
-webkit-animation: top 0.3s linear;
122+
-moz-animation: top 0.3s linear;
123+
animation: top 0.3s linear; }
124+
.hint-anim.hint-bottom:hover:before, .hint-anim.hint-bottom:hover:after {
125+
-webkit-animation: bottom 0.3s linear;
126+
-moz-animation: bottom 0.3s linear;
127+
animation: bottom 0.3s linear; }
128+
.hint-anim.hint-right:hover:before, .hint-anim.hint-right:hover:after {
129+
-webkit-animation: right 0.3s linear;
130+
-moz-animation: right 0.3s linear;
131+
animation: right 0.3s linear; }
132+
133+
.hint-small:after {
134+
width: 200px; }
135+
136+
.hint-med:after {
137+
width: 300px; }
138+
139+
.hint-big:after {
140+
width: 450px; }

‎dist/simple-hint.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎gulpfile.js

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
// gulp modules
2+
var gulp = require('gulp'),
3+
sass = require('gulp-sass'),
4+
rename = require('gulp-rename'),
5+
minifycss = require('gulp-minify-css'),
6+
livereload = require('gulp-livereload');
7+
8+
9+
// public folder paths
10+
var css = __dirname + '/public/stylesheets',
11+
js = __dirname + '/public/javascripts',
12+
fonts = __dirname + '/public/fonts',
13+
images = __dirname + '/public/images';
14+
15+
16+
17+
// -------------- development --------------
18+
var dev = {
19+
scssInit : css + '/scss/*.scss', // initial scss processing
20+
cssDest : css, // css destination
21+
scssWatch : css + '/**/*.scss', // scss watch
22+
cssReload : css + '/*.css', // live-reload watch
23+
};
24+
25+
26+
// compile scss
27+
gulp.task('scss', function(){
28+
gulp.src( dev.scssInit )
29+
.pipe( sass({errLogToConsole: true}) )
30+
.pipe( gulp.dest( dev.cssDest) )
31+
.pipe( livereload() );
32+
});
33+
34+
// watch scss
35+
gulp.task('watch', function(){
36+
gulp.watch( dev.scssWatch, ['scss'] );
37+
});
38+
39+
40+
// start express
41+
gulp.task('express', function(){
42+
require('./bin/www');
43+
});
44+
45+
46+
gulp.task('dev', ['scss', 'express', 'watch'] );
47+
48+
49+
50+
// -------------- dist --------------
51+
var dist = {
52+
dest : __dirname + '/dist/',
53+
54+
scssInit : css + '/scss/simple-hint.scss',
55+
cssInit : css + '/simple-hint.css'
56+
};
57+
58+
// scss compile
59+
gulp.task('dist-scss', function(){
60+
gulp.src( dist.scssInit )
61+
.pipe( sass() )
62+
.pipe( gulp.dest( css ) );
63+
});
64+
65+
// simple-hint css
66+
gulp.task('dist-css', function(){
67+
gulp.src( dist.cssInit )
68+
.pipe( gulp.dest( dist.dest ) )
69+
.pipe( rename({ suffix: '.min'}) )
70+
.pipe( minifycss() )
71+
.pipe( gulp.dest( dist.dest ) );
72+
73+
});
74+
75+
76+
gulp.task('dist', ['dist-scss', 'dist-css'], function(){
77+
console.log( 'successfully set up dist' );
78+
});

‎package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "simple-hint",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"start": "node ./bin/www"
7+
},
8+
"dependencies": {
9+
"express": "~4.9.0",
10+
"body-parser": "~1.8.1",
11+
"cookie-parser": "~1.3.3",
12+
"morgan": "~1.3.0",
13+
"serve-favicon": "~2.1.3",
14+
"debug": "~2.0.0",
15+
"jade": "~1.6.0"
16+
},
17+
"devDependencies": {
18+
"gulp": "^3.8.8",
19+
"gulp-livereload": "^2.1.1",
20+
"gulp-minify-css": "^0.3.10",
21+
"gulp-rename": "^1.2.0",
22+
"gulp-sass": "^1.1.0"
23+
}
24+
}

‎public/stylesheets/scss/_base.scss

+18
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
2+
// normalize : https://github.com/necolas/normalize.css/
3+
@import "base/normalize";
4+
5+
// variables + custom mixins
6+
@import "base/variables";
7+
8+
// set globals (body, headings, p, span, ul, li, etc.)
9+
@import "base/global";
10+
11+
// extra styling (button + input resets, sticky footer, mozilla specific settings)
12+
@import "base/extra";
13+
14+
// sets up grid
15+
@import "base/grid";
16+
17+
18+

0 commit comments

Comments
 (0)