Skip to content

Commit

Permalink
Initial commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@l-lin
l-lin committed Jan 21, 2014
0 parents commit 4712e2b
Show file tree
Hide file tree
Showing 21 changed files with 2,649 additions and 0 deletions.
3 changes: 3 additions & 0 deletions .bowerrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
{
"directory": "src/vendor"
}
13 changes: 13 additions & 0 deletions .editorconfig
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
# http://editorconfig.org
root = true

[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false
1 change: 1 addition & 0 deletions .gitattributes
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
* text=auto
6 changes: 6 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
node_modules
dist
bin
.tmp
src/vendor
*.iml
6 changes: 6 additions & 0 deletions .travis.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
language: node_js
node_js:
- '0.10'
before_script:
- 'npm install -g bower grunt-cli'
- 'bower install'
92 changes: 92 additions & 0 deletions Gruntfile.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
// Generated on 2013-11-23 using generator-angular 0.6.0-rc.1
'use strict';

// # Globbing
// for performance reasons we're only matching one level down:
// 'test/spec/{,*/}*.js'
// use this if you want to recursively match all subfolders:
// 'test/spec/**/*.js'

module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
require('time-grunt')(grunt);

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
yeoman: {
// configurable paths
src: 'src',
dist: 'dist',
build: '.tmp',
banner: '/*!\n' +
' * <%= pkg.name %> - v<%= pkg.version %>\n' +
' * https://github.com/<%= pkg.author %>/<%= pkg.name %>\n' +
' */\n'
},
/** ------------- CLEAN TMP FOLDERS ------------- */
clean: {
dist: {
files: [{
dot: true,
src: [
'<%= yeoman.build %>',
'<%= yeoman.dist %>/*',
'!<%= yeoman.dist %>/.git*'
]
}]
},
server: '<%= yeoman.build %>'
},
/** ------------- SOURCE CODES MINIMIZATION ------------- */
concat: {
options: {
stripBanners: true,
banner: '<%= yeoman.banner %>'
},
// Copy the source files with the banner in dist folder
banner: {
src: ['<%= yeoman.src %>/font-awesome-animation.css'],
dest: '<%= yeoman.dist %>/font-awesome-animation.css'
}
},
cssmin: {
options: {
banner: '<%= yeoman.banner %>'
},
dist: {
files: {
'<%= yeoman.dist %>/font-awesome-animation.min.css': [
'<%= yeoman.src %>/*.css'
]
}
}
},
uglify: {
options: {
banner: '<%= yeoman.banner %>'
},
dist: {
files: {
'<%= yeoman.dist %>/font-awesome-animation.min.js': [
'<%= yeoman.build %>/font-awesome-animation.js'
]
}
}
}
});

/** ---------------------------------------------------- */
/** ------------- GRUNT TASKS REGISTRATION ------------- */
/** ---------------------------------------------------- */

grunt.registerTask('build', [
'clean:dist',
'cssmin',
'uglify',
'concat:banner'
]);

grunt.registerTask('default', [
'build'
]);
};
33 changes: 33 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
font-awesome-animation [![Build Status](https://travis-ci.org/l-lin/font-awesome-animation.png?branch=master)](https://travis-ci.org/l-lin/font-awesome-animation) [![Built with Grunt](https://cdn.gruntjs.com/builtwith.png)](http://gruntjs.com/)
================
> Simple animations using some CSS3 I found on the web.
> Best used on glyphicons like [FontAwesome](http://fortawesome.github.io/Font-Awesome/).
Getting started
================
Download
----------------
### Manually
The files can be downloaded from:
* Minified [CSS](https://github.com/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css) for production usage
* Un-minified [CSS](https://github.com/l-lin/font-awesome-animation/dist/font-awesome-animation.css) for development

### With BowerJS
```
$ bower install font-awesome-animation
```

Installation
----------------
Include CSS file in your index.html file:
```html
<link rel="stylesheet" href="font-awesome-animation.min.css">
```

Usage
================
See [live demo](https://l-lin.github.com/font-awesome-animation).

License
================
[MIT License](http://en.wikipedia.org/wiki/MIT_License)
22 changes: 22 additions & 0 deletions bower.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
{
"name": "font-awesome-animation",
"version": "0.0.1",
"author": "l-lin",
"main": [
"dist/font-awesome-animation.css",
"dist/font-awesome-animation.min.css"
],
"ignore": [
".bowerrc",
".editorconfig",
".git*",
".jshintrc",
"Gruntfile.js",
"test",
"node_modules",
"src",
".travis.yml"
],
"dependencies": {},
"devDependencies": {}
}
Binary file added demo/favicon.ico
Binary file not shown.
171 changes: 171 additions & 0 deletions demo/index.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,171 @@
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Font Awesome Animation</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="icon" type="image/x-icon" href="favicon.ico">

<link href='http://fonts.googleapis.com/css?family=Gilda+Display' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/monokai.syntax.css">
<link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="../src/font-awesome-animation.css">
</head>
<body>
<header>
<h1><a href="https://github.com/l-lin/font-awesome-animation">Font Awesome Animation</a></h1>
<p>
Simple animations using <a href="http://fortawesome.github.io/Font-Awesome/">FontAwesome</a> and some CSS3.
</p>
<a href="https://github.com/l-lin/font-awesome-animation">
<img style="position: absolute; top: 0; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub">
</a>
<hr />
</header>

<div class="container" ng-controller="demoCtrl">
<article>
<h1>Getting started</h1>
<section>
<p>
Might not work on &lt; IE10...
</p>
</section>
<section>
<h3>Download</h3>
<h4>Manually</h4>
<p>
The files can be downloaded from:
<ul>
<li>
Minified <a href="https://github.com/l-lin/font-awesome-animation/dist/font-awesome-animation.min.css">CSS</a> for production usage
</li>
<li>
Un-minified <a href="https://github.com/l-lin/font-awesome-animation/dist/font-awesome-animation.css">CSS</a> for development
</li>
</ul>
</p>
<h4>With <a href="http://bower.io">Bower</a></h4>
<br />
<div class="highlight">
<pre><code class="bash"><span class="nv">$ </span>bower install font-awesome-animation
</code></pre>
</div>
</section>
<section>
<h3>Installation</h3>
<p>
Include the CSS file in your <code>index.html</code> file:
<br /><br />
<div class="highlight">
<pre><code class="html"><span class="nt">&lt;link</span> <span class="na">rel=</span><span class="s">"stylesheet"</span> <span class="na">href=</span><span class="s">"font-awesome-animation.min.css"</span><span class="nt">&gt;</span></code></pre>
</div>
</p>
</section>
</article>
<article>
<h1>Usage</h1>
<section>
<p>
Add the desired CSS class to the icon (or any element of your DOM).
</p>
<br />
<div class="demo">
<div class="animation">
<div class="font-animation">
<h3>
On DOM load
</h3>
</div>
<div class="font-animation">
<h3>
On hover
</h3>
</div>
</div>
<div class="animation">
<div class="font-animation">
<a href="#">
<i class="fa fa-wrench wrenching-animation animation"></i>
&nbsp;wrenching-animation animation
</a>
</div>
<div class="font-animation">
<a href="#">
<i class="fa fa-wrench wrenching-animation animation-hover"></i>
&nbsp;wrenching-animation animation-hover
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<a href="#">
<i class="fa fa-bell ringing-animation animation"></i>
&nbsp;ringing-animation animation
</a>
</div>
<div class="font-animation">
<a href="#">
<i class="fa fa-bell ringing-animation animation-hover"></i>
&nbsp;ringing-animation animation-hover
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<a href="#">
<i class="fa fa-envelope horizontal-animation animation"></i>
&nbsp;horizontal-animation animation
</a>
</div>
<div class="font-animation">
<a href="#">
<i class="fa fa-envelope horizontal-animation animation-hover"></i>
&nbsp;horizontal-animation animation-hover
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<a href="#">
<i class="fa fa-thumbs-o-up vertical-animation animation"></i>
&nbsp;vertical-animation animation
</a>
</div>
<div class="font-animation">
<a href="#">
<i class="fa fa-thumbs-o-up vertical-animation animation-hover"></i>
&nbsp;vertical-animation animation-hover
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<a href="#">
<i class="fa fa-thumbs-o-up flash-animation animation"></i>
&nbsp;flash-animation animation
</a>
</div>
<div class="font-animation">
<a href="#">
<i class="fa fa-thumbs-o-up flash-animation animation-hover"></i>
&nbsp;flash-animation animation-hover
</a>
</div>
</div>
</div>
</section>
</article>
</div>

<footer>
Designed and built with <i class="fa fa-heart"></i> by <a href="https://github.com/l-lin">Louis LIN</a>
</footer>
</body>
</html>
Loading

0 comments on commit 4712e2b

Please sign in to comment.