🎉 Initial commit

umarmughal · Sep 27, 2016 · 7dc9e30 · 7dc9e30
commit 7dc9e30
Show file tree

Hide file tree

Showing 12 changed files with 509 additions and 0 deletions.
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,9 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+charset = utf-8
+indent_style = space
+indent_size = 2
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,36 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+
+# Runtime data
+pids
+*.pid
+*.seed
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (http://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directory
+node_modules
+
+# Optional npm cache directory
+.npm
+
+# Optional REPL history
+.node_repl_history
+
+# Mac stuff
+.DS_Store
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,8 @@
+/demo
+/src
+.editorconfig
+.gitignore
+.travis.yml
+bower.json
+gulpfile.js
+README.md
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,3 @@
+language: node_js
+node_js:
+  - stable
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# WORK IN PROGRESS
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+	<meta charset="utf-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+	<title>Wenk - Lightweight pure CSS tooltip for the greater good</title>
+	<link rel="stylesheet" href="wenk.min.css">
+
+	<!-- https://github.com/mightyCrow/barebones-css -->
+	<link rel="stylesheet" href="https://cdn.rawgit.com/mightyCrow/barebones-css/master/dist/barebones.min.css">
+
+	<style>
+		main {
+			margin-top: 60px;
+		}
+
+		section {
+			margin-bottom: 30px;
+			width: 80%;
+		}
+
+		.heart:after {
+			content: "\2764";
+			color: #f45660;
+		}
+	</style>
+</head>
+
+<body>
+	<!-- This HTML is ugly cuz I'm lazy -->
+	<a href="https://github.com/mightyCrow/wenk" class="github-corner"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#151513; color:#fff; position: absolute; top: 0; border: 0; right: 0;"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+	<style>
+		.github-corner:hover .octo-arm {
+			animation: octocat-wave 560ms ease-in-out
+		}
+
+		@keyframes octocat-wave {
+			0%,
+			100% {
+				transform: rotate(0)
+			}
+			20%,
+			60% {
+				transform: rotate(-25deg)
+			}
+			40%,
+			80% {
+				transform: rotate(10deg)
+			}
+		}
+
+		@media (max-width:500px) {
+			.github-corner:hover .octo-arm {
+				animation: none
+			}
+			.github-corner .octo-arm {
+				animation: octocat-wave 560ms ease-in-out
+			}
+		}
+	</style>
+	<header>
+
+	</header>
+	<main class="row center-xs">
+		<section class="col-lg-12">
+			<h1>Wenk 😉</h1>
+			<p>Wenk is a Lightweight tooltip written in pure CSS using <a href="https://github.com/postcss/postcss">PostCSS</a>. The <strong>minified version is just 722 bytes when gzipped</strong>. It can be used with <code>data</code> attributes or classes(whatever
+				you prefer).</p>
+		</section>
+		<section class="col-lg-12">
+			<h3>Display in different direction!</h3>
+			<p><span data-wenk="I'm at the top!">Wenk to the top!</span></p>
+			<p><span data-wenk="I'm to the right!" data-wenk-pos="right">Wenk to the right!</span></p>
+			<p><span data-wenk="I'm to the left!" data-wenk-pos="left">Wenk to the left!</span></p>
+			<p><span data-wenk="I'm at the bottom!" data-wenk-pos="bottom">Wenk to the button!</span></p>
+		</section>
+		<section class="col-lg-12">
+			<h3>Display in different direction!</h3>
+			<!--
+			<p><span data-wenk="I'm small!" data-wenk-length="small">Small wenk!</span></p>
+			<p><span data-wenk="I'm medium!" data-wenk-length="medium">Medium wenk!</span></p>
+			<p><span data-wenk="I'm large!" data-wenk-length="large">Large wenk!</span></p>
+			<p><span data-wenk="I fit!" data-wenk-length="fit">I fit just right!</span></p>
+			-->
+			<p><span data-wenk="I'm small!" class="wenk-length--small">Small wenk!</span></p>
+			<p><span data-wenk="I'm medium!" class="wenk-length--large">Medium wenk!</span></p>
+			<p><span data-wenk="I'm large!" class="wenk-length--large">Large wenk!</span></p>
+			<p><span data-wenk="I fit!" class="wenk-length--fit">I fit just right!</span></p>
+		</section>
+	</main>
+	<footer class="row center-xs">
+		<p>
+			Created with <span class="heart"></span> by <a href="https://github.com/mightyCrow">Tiaan du Plessis</a> using <a href="index.html">Barebones</a>.<br>
+		</p>
+	</footer>
+</body>
+
+</html>
diff --git a/demo/wenk.min.css b/demo/wenk.min.css
diff --git a/dist/wenk.css b/dist/wenk.css
@@ -0,0 +1,112 @@
+/**
+ * wenk - Lightweight pure CSS tooltip for the greater good
+ * @version v1.0.0
+ * (c) 2016 Tiaan du Plessis @mightyCrow |
+ * @link 
+ * @license MIT
+ */
+ [data-wenk] {
+    position: relative
+    /* ===[Tooltip Down]=== */
+    /* ===[Tooltip Left]=== */
+    /* ===[Tooltip Right]=== */
+    /* ===[Length of tooltip]=== */
+}
+[data-wenk]:after {
+    position: absolute;
+    -webkit-transform: translateX(-50%);
+            transform: translateX(-50%);
+    display: none;
+    font-size: 13px;
+    border-radius: .4rem;
+    content: attr(data-wenk);
+    padding: 12.8px;
+    padding: .8rem;
+    background-color: rgba(17, 17, 17, .8);
+    box-shadow: 0 0 14px rgba(0, 0, 0, 0.1);
+    color: #fff;
+    width: 200px;
+    line-height: 20px;
+    line-height: 1.25rem;
+    text-align: left;
+    z-index: 1;
+    pointer-events: none;
+    display: block;
+    opacity: 0;
+    visibility: hidden;
+    -webkit-transition: all .3s;
+    transition: all .3s;
+    bottom: 100%;
+    left: 50%;
+    -webkit-transform: translate(-50%, 10px);
+            transform: translate(-50%, 10px)
+}
+[data-wenk]:after {
+    opacity: 0
+}
+[data-wenk]:hover {
+    overflow: visible
+}
+[data-wenk]:hover:after {
+    display: block;
+    opacity: 1;
+    visibility: visible;
+    -webkit-transform: translate(-50%, -10px);
+            transform: translate(-50%, -10px)
+}
+[data-wenk].wenk--bottom, [data-wenk][data-wenk-pos="bottom"] {}
+[data-wenk].wenk--bottom:after, [data-wenk][data-wenk-pos="bottom"]:after {
+    bottom: auto;
+    top: 100%;
+    left: 50%;
+    -webkit-transform: translate(-50%, -10px);
+            transform: translate(-50%, -10px)
+}
+[data-wenk].wenk--bottom:hover, [data-wenk][data-wenk-pos="bottom"]:hover {}
+[data-wenk].wenk--bottom:hover:after, [data-wenk][data-wenk-pos="bottom"]:hover:after {
+    -webkit-transform: translate(-50%, 10px);
+            transform: translate(-50%, 10px)
+}
+[data-wenk].wenk--left, [data-wenk][data-wenk-pos="left"] {}
+[data-wenk].wenk--left:after, [data-wenk][data-wenk-pos="left"]:after {
+    bottom: auto;
+    left: auto;
+    top: 50%;
+    right: 100%;
+    -webkit-transform: translate(10px, -50%);
+            transform: translate(10px, -50%)
+}
+[data-wenk].wenk--left:hover, [data-wenk][data-wenk-pos="left"]:hover {}
+[data-wenk].wenk--left:hover:after, [data-wenk][data-wenk-pos="left"]:hover:after {
+    -webkit-transform: translate(-10px, -50%);
+            transform: translate(-10px, -50%)
+}
+[data-wenk].wenk--right, [data-wenk][data-wenk-pos="right"] {}
+[data-wenk].wenk--right:after, [data-wenk][data-wenk-pos="right"]:after {
+    bottom: auto;
+    top: 50%;
+    left: 100%;
+    -webkit-transform: translate(-10px, -50%);
+            transform: translate(-10px, -50%)
+}
+[data-wenk].wenk--right:hover, [data-wenk][data-wenk-pos="right"]:hover {}
+[data-wenk].wenk--right:hover:after, [data-wenk][data-wenk-pos="right"]:hover:after {
+    -webkit-transform: translate(10px, -50%);
+            transform: translate(10px, -50%)
+}
+[data-wenk][data-wenk-length="small"]:after, [data-wenk].wenk-length--small:after {
+    white-space: normal;
+    width: 80px
+}
+[data-wenk][data-wenk-length="medium"]:after, [data-wenk].wenk-length--medium:after {
+    white-space: normal;
+    width: 150px
+}
+[data-wenk][data-wenk-length="large"]:after, [data-wenk].wenk-length--large:after {
+    white-space: normal;
+    width: 260px
+}
+[data-wenk][data-wenk-length="fit"]:after, [data-wenk].wenk-length--fit:after {
+    white-space: normal;
+    width: 100%
+}
diff --git a/dist/wenk.min.css b/dist/wenk.min.css
diff --git a/gulpfile.js b/gulpfile.js
@@ -0,0 +1,86 @@
+const gulp = require('gulp')
+const gulpLoadPlugins = require('gulp-load-plugins');
+const browserSync = require('browser-sync')
+const del = require('del');
+const $ = gulpLoadPlugins();
+const pkg = require('./package.json');
+const reload = browserSync.reload;
+// Pretty banner
+const banner = ['/**',
+    ' * <%= pkg.name %> - <%= pkg.description %>',
+    ' * @version v<%= pkg.version %>',
+    ' * (c) ' + new Date().getFullYear() + ' <%= pkg.author %> |',
+    ' * @link <%= pkg.homepage %>',
+    ' * @license <%= pkg.license %>',
+    ' */',
+    ' '
+].join('\n');
+
+// Default paths
+const paths = {
+    output: 'dist/',
+    input: `src/**/*.css`
+};
+
+// Default postcss plugins
+const defaultPlugins = [
+    require('postcss-cssnext')()
+];
+
+// Get size of all files in output dir
+gulp.task('size', () => {
+    return gulp.src(`${paths.output}**/*`)
+        .pipe($.size({
+            gzip: true,
+            showFiles: true
+        }));
+});
+
+// Clean output dir
+gulp.task('clean', () => {
+    return del(`${paths.output}**/*`);
+});
+
+// Build CSS
+gulp.task('styles:minified', () => {
+    return gulp.src(paths.input)
+        .pipe($.plumber())
+        .pipe($.postcss(defaultPlugins.concat([
+            require('cssnano')()
+        ])))
+        .pipe($.rename({
+            extname: '.min.css'
+        }))
+        .pipe($.header(banner, {
+            pkg
+        }))
+        .pipe(gulp.dest(paths.output))
+        .pipe(gulp.dest('./demo'))
+})
+
+gulp.task('styles', () => {
+    return gulp.src(paths.input)
+        .pipe($.plumber())
+        .pipe($.postcss(defaultPlugins))
+        .pipe($.header(banner, {
+            pkg
+        }))
+        .pipe(gulp.dest(paths.output))
+})
+
+gulp.task('build', ['styles', 'styles:minified'])
+
+gulp.task('watch', () => {
+    gulp.watch(paths.input, ['clean', 'build'])
+})
+
+gulp.task('demo', ['clean', 'build'], () => {
+  browserSync({
+    server: './demo'
+  })
+
+  gulp.watch(paths.input, ['build']);
+  gulp.watch('./demo/**/*').on('change', reload);
+});
+
+gulp.task('default', ['build', 'watch'])