First commit

RobLoach · Jan 2, 2014 · 28f2cd9 · 28f2cd9
1 parent d0ee5bf
commit 28f2cd9
Show file tree

Hide file tree

Showing 11 changed files with 3,580 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,17 @@
+lib-cov
+*.seed
+*.log
+*.csv
+*.dat
+*.out
+*.pid
+*.gz
+
+pids
+logs
+results
+
+npm-debug.log
+node_modules
+
+.sass-cache
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -0,0 +1,68 @@
+module.exports = function(grunt) {
+
+    grunt.initConfig({
+        pkg: grunt.file.readJSON('package.json'),
+
+
+        sass: {
+          dist: {
+            options: {
+              style: 'expanded'
+            },
+            files: {
+              'css/hover.css': 'scss/hover.scss'
+            }
+          }
+        },
+
+
+        autoprefixer: {
+          options: {
+            browsers: ['last 2 version', 'ie 8', 'ie 9']
+          },
+          multiple_files: {
+            expand: true,
+            flatten: true,
+            src: 'css/*.css',
+            dest: 'css/'
+          }
+        },
+
+
+        cssmin: {
+          combine: {
+            files: {
+              'css/hover-min.css': ['css/hover.css']
+            }
+          }
+        },
+
+
+        watch: {
+          options: {
+            livereload: true,
+          },
+          css: {
+            files: ['scss/*.scss', 'css/*.css', '*.html'],
+            tasks: ['sass', 'autoprefixer', 'cssmin'],
+            options: {
+              spawn: false,
+            }
+          }
+        },
+
+        connect: {
+          server: {
+            options: {
+              port: 8000,
+              base: './'
+            }
+          }
+        },
+
+    });
+
+    require('load-grunt-tasks')(grunt);
+
+    grunt.registerTask('default', ['connect', 'watch']);
+};
diff --git a/README.md b/README.md
@@ -1,4 +1,90 @@
-Hover
-=====
+#hover.css
 
 A collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS.
+
+##Author
+
+- [Ian Lunn](https://twitter.com/IanLunn)  
+- [ianlunn.co.uk](http://ianlunn.co.uk/)
+
+##How To Use
+hover.css can be used in a number of ways; either copy and paste the effect you'd like to use in your own stylesheet or reference the stylesheet. Then just add the class name of the effect to the element you'd like it applied to.
+
+###Copy and Paste an Effect
+If you plan on only using one or several effects, it's better practice to copy and paste an effect into your own stylesheet, so a user doesn't have to download hover.css in its entirety.
+
+Assuming you want to use the `Grow` effect:
+
+1. Download hover.css
+2. In hover.css, find the 'Grow' CSS (each effect is named using a comment above it):
+
+```css
+/* Grow */
+
+.grow {
+  display: inline-block;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: -webkit-transform;
+  transition-property: transform;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  -webkit-transform: translateZ(0);
+  -ms-transform: translateZ(0);
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+
+.grow:hover {
+  -webkit-transform: scale(1.1);
+  -ms-transform: scale(1.1);
+  transform: scale(1.1);
+}
+```
+
+3. Copy this effect and then paste it into your own stylesheet.
+4. In the HTML file which you'd like the effect to appear, add the class of `.grow` to your chosen element.
+
+Example element before applying hover.css effect:
+
+```html
+<a class="button">Add to Basket</a>
+```
+
+Example element after applying hover.css effect:
+
+```html
+<a class="button grow">Add to Basket</a>
+```
+
+###Reference hover.css
+If you plan on using many of hover.css' effects on your website, you may like to reference the entire hover.css stylesheet.
+
+1. Download hover-min.css
+2. Add `hover-min.css` to your websites files, in a directory named `css` for example
+3. Reference hover-min.css in `<head>` of the HTML page you'd like to add hover.css effects to:
+
+```html
+<head>
+	<link href="css/hover-min.css" rel="stylesheet">
+</head>
+```
+
+4. Assuming you want to use the 'Grow' effect, in the HTML file you'd like to use this effect, add the class of `.grow` to your chosen element.
+
+Example element before applying hover.css effect:
+
+```html
+<a class="button">Add to Basket</a>
+```
+
+Example element after applying hover.css effect:
+
+```html
+<a class="button grow">Add to Basket</a>
+```
+
+
+##License
+hover.css is open source, and made available under a [MIT License](http://www.opensource.org/licenses/mit-license.php). Distribute, use as-is, or modify to your liking in personal and commercial projects. Please retain the original readme and license files.
+
+Placing author information in your stylesheet, credits page or humans.txt is much appreciated.
diff --git a/css/demo-page.css b/css/demo-page.css
@@ -0,0 +1,93 @@
+/*
+ * Hover.css - Demo Page
+ * Author: Ian Lunn @IanLunn
+ * Author URL: http://ianlunn.co.uk/
+ * Github: https://github.com/IanLunn/Hover
+
+ * Made available under a MIT License:
+ * http://www.opensource.org/licenses/mit-license.php
+
+ * Hover.css Copyright Ian Lunn 2014.
+ */
+
+body {
+  margin: 0 auto;
+  max-width: 800px;
+  padding: 20px;
+  font-family: sans-serif;
+  color: #333;
+  line-height: 140%;
+}
+
+img {
+  border: none;
+}
+
+.aligncenter {
+  text-align: center;
+}
+
+.intro {
+  max-width: 680px;
+  margin: 0 auto;
+}
+
+.button.cta {
+  display: inline-block;
+  position: relative;
+  margin: 2em 0 1em 0;
+  padding: 1em;
+  background: #2098D1;
+  border: none;
+  text-decoration: none;
+  font-weight: 700;
+  color: white;
+}
+
+#effects {
+  margin-top: 5em;
+}
+
+h1 {
+  text-align: center;
+  font-size: 4em;
+}
+
+h2 {
+  margin-top: 2em;
+}
+
+.about {
+  border-top: #333 solid 2px;
+  border-bottom: #333 solid 2px;
+}
+
+.footer {
+  overflow: hidden;
+  width: auto;
+  margin-top: 6em;
+  font-size: .9em;
+}
+
+.footer a {
+  text-decoration: none;
+}
+
+.footer a:hover {
+  text-decoration: underline;
+}
+
+.social {
+  margin-top: 2em;
+}
+
+.social-button {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.author {
+  margin: 6em auto 0 auto;
+  text-align: center;
+  font-weight: 900;
+}
diff --git a/css/hover-min.css b/css/hover-min.css