-
Notifications
You must be signed in to change notification settings - Fork 60
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
23 changed files
with
684 additions
and
692 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| var gulp = require("gulp"), | ||
| sass = require("gulp-ruby-sass"), | ||
| autoprefixer = require("gulp-autoprefixer"), | ||
| rename = require('gulp-rename'), | ||
| minifycss = require('gulp-minify-css'), | ||
| concat = require('gulp-concat'), | ||
| uglify = require('gulp-uglify'), | ||
| coffee = require('gulp-coffee'); | ||
|
|
||
| // Gulp sass task | ||
| gulp.task('css',function(){ | ||
| gulp.src("src/sass/**/*.sass") | ||
| .pipe(sass()) | ||
| .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4')) | ||
| //.pipe(gulp.dest('dist/css')) | ||
| .pipe(rename({ suffix: '.min' })) | ||
| .pipe(minifycss()) | ||
| .pipe(concat('amaran.min.css')) | ||
| .pipe(gulp.dest('dist/css')); | ||
| }); | ||
|
|
||
|
|
||
|
|
||
| // Gulp coffee task | ||
| gulp.task('js',function(){ | ||
| gulp.src("src/coffee/**/*.coffee") | ||
| .pipe(coffee()) | ||
| .pipe(uglify()) | ||
| .pipe(concat('jquery.amaran.min.js')) | ||
| .pipe(gulp.dest('dist/js')); | ||
| }); | ||
|
|
||
| // Gulp watch task | ||
| gulp.task('watch',function(){ | ||
| gulp.watch('src/sass/**/*.sass',['css']); | ||
| gulp.watch('src/coffee/**/*.coffee',['js']); | ||
| }); | ||
|
|
||
| gulp.task('default',['watch']); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,228 +1,99 @@ | ||
| New version coming soon with lots of changes. | ||
| AmaranJS jQuery Notification Plugin | ||
| ============ | ||
| Nice, sleek and stylish notifications. | ||
|
|
||
| https://github.com/hakanersu/AmaranJS/tree/coffee-sass | ||
| ## What is new and What is changed | ||
|
|
||
|
|
||
| [Demo & Documentation](http://hakanersu.github.io/AmaranJS/) | ||
| * Blur Theme ,Rounded Theme and Read More theme removed. | ||
| * All javascript codes ported to coffee and css to sass. | ||
| * [Animate.css](http://daneden.github.io/animate.css/) and options added for alternative css3 effects. | ||
|
|
||
| ### Important Change v0.2.0 | ||
| * "default" theme changed to "awesome" | ||
| * Old default theme changed to "default" theme aka http://codepen.io/hakanersu/pen/Dxatp | ||
| ## Some Features | ||
|
|
||
| ### TODO | ||
| * Default theme will change to http://codepen.io/hakanersu/pen/Dxatp | ||
| * Callback functions will added to themes. | ||
| Here is the some basic features of AmaranJS.But i recommend that review the examples and check demos. | ||
|
|
||
| ###Minimal Setup | ||
| Copy amaran folder in to your project folder. | ||
| * Easy notification creation. | ||
| * Unique notification animations. | ||
| * Included stylish themes. | ||
| * Easily adapt your own themes. | ||
| * Callbacks | ||
|
|
||
| It’s not required, but i recommend placing CSS files in ```<head>``` and JavaScript files and initialization code in the footer of your site (before the closing ```</body>``` tag). | ||
| ## Installation | ||
|
|
||
| ``` | ||
| <link rel="stylesheet" href="amaran/css/jquery.amaran.min.css"> | ||
| <link rel="stylesheet" href="amaran/css/themes/all-themes.css"> | ||
| ``` | ||
| Go to dist directory and copy all the folders to a new destination, which will be your project home. | ||
|
|
||
| It’s not required, but i recommend placing CSS files in ```<head>``` and JavaScript files and initialization code in the footer of your site (before the closing ```</body>``` tag). | ||
|
|
||
| jQuery required for **Amaran JS**.If you already have **jquery.js** on your site, don’t include it a second time, or use **jQuery.noConflict();** mode. | ||
| jQuery required for **Amaran JS**.If you already have jquery.js on your site, don’t include it a second time, or use **jQuery.noConflict();** mode | ||
|
|
||
| ```html | ||
| <link rel="stylesheet" href="/css/amaran.min.css"> | ||
| ``` | ||
| You can add jQuery via Google CDN | ||
|
|
||
| ``` | ||
| ```html | ||
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | ||
| ``` | ||
|
|
||
| Place Amaran JS after jQuery | ||
|
|
||
| ```html | ||
| <script src="/js/jquery.amaran.js"></script> | ||
| ``` | ||
| <script src="amaran/js/jquery.amaran.js"></script> | ||
| ``` | ||
|
|
||
| So minimalistic setup look like this | ||
|
|
||
| ``` | ||
| ```html | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>My Web Page</title> | ||
| <link rel="stylesheet" href="amaran/css/jquery.amaran.min.css"> | ||
| <link rel="stylesheet" href="amaran/css/themes/all-themes.css"> | ||
| <link rel="stylesheet" href="/css/amaran.min.css"> | ||
| </head> | ||
| <body> | ||
| <p>My Content</p> | ||
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | ||
| <script src="amaran/js/jquery.amaran.js"></script> | ||
| <script src="/js/jquery.amaran.js"></script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| ###Recomended Setup | ||
| ### Optional Steps | ||
|
|
||
| I recommend Font Awesome Icons and Open Sans for better looking notifications.Specially for default theme. | ||
| Just place these two css files inside your ```<head>``` section. | ||
| * Awesome theme uses fontawesome if you want to use awesome theme you have to include fontawesome. | ||
|
|
||
| ``` | ||
| ```html | ||
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> | ||
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'> | ||
| ``` | ||
| So recomended setup should look like this; | ||
|
|
||
| * If you want to use [Animate.css](http://daneden.github.io/animate.css/) effects you have to include [Animate.css](http://daneden.github.io/animate.css/) . [Animate.css](http://daneden.github.io/animate.css/) already included dist/css folder. | ||
|
|
||
| ```html | ||
| <link rel="stylesheet" href="/css/animate.min.css"> | ||
| ``` | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>My Web Page</title> | ||
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> | ||
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'> | ||
| <link rel="stylesheet" href="amaran/css/jquery.amaran.min.css"> | ||
| <link rel="stylesheet" href="amaran/css/themes/all-themes.css"> | ||
| </head> | ||
| <body> | ||
| <p>My Content</p> | ||
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | ||
| <script src="amaran/js/jquery.amaran.js"></script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| ###Basic Usage | ||
|
|
||
| We are ready to create our first example.Very very simple usage of Amaran JS. | ||
| ## Usage | ||
| AmaranJS included 4 theme (for now). | ||
|
|
||
| First of all we must add our code inside jQuery document ready function.```$(function(){ });``` | ||
|
|
||
| ``` | ||
| Very basic usage ,not include any theme. | ||
| ```javascript | ||
| $(function(){ | ||
| $.amaran({'message':'My first example!'}); | ||
| }); | ||
| ``` | ||
|
|
||
| If you add this code inside ```$(function(){ })``` function it will automatically popsup when page loads. | ||
|
|
||
| I know not funcy as demos lets create themed example.I will cover more about themes in next section. | ||
|
|
||
| ``` | ||
| $.amaran({ | ||
| content:{ | ||
| message:'My first funcy example!', | ||
| size:'1.4 GB', | ||
| file:'my_birthday.mp4', | ||
| icon:'fa fa-download' | ||
| }, | ||
| theme:'default ok' | ||
| }); | ||
| ``` | ||
| If you want to use included themes , you have to pass content object with desired fields. | ||
|
|
||
| Lets see full example. | ||
| Awesome theme usage. | ||
|
|
||
| ``` | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <title>My Web Page</title> | ||
| <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> | ||
| <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600' rel='stylesheet' type='text/css'> | ||
| <link rel="stylesheet" href="amaran/css/jquery.amaran.min.css"> | ||
| <link rel="stylesheet" href="amaran/css/themes/all-themes.css"> | ||
| </head> | ||
| <body> | ||
| <p>My Content</p> | ||
| <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> | ||
| <script src="amaran/js/jquery.amaran.js"></script> | ||
| <script> | ||
| $(function(){ | ||
| $.amaran({ | ||
| content:{ | ||
| message:'Your Download is Ready!', | ||
| size:'1.4 GB', | ||
| file:'my_birthday.mp4', | ||
| icon:'fa fa-download' | ||
| }, | ||
| theme:'default ok' | ||
| }); | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> | ||
| ``` | ||
|
|
||
| ###Using Themes | ||
|
|
||
| We have currently 5 themes.Some of them have variations like "default" theme.Lets look at themes. | ||
|
|
||
| ####default theme | ||
|
|
||
| Default theme has 7 variations. | ||
|
|
||
| // image will include here | ||
|
|
||
| Usage; | ||
|
|
||
| ``` | ||
| ```javascript | ||
| $.amaran({ | ||
| content:{ | ||
| message:'Your Download is Ready!', | ||
| message:'My first funcy example!', | ||
| size:'1.4 GB', | ||
| file:'my_birthday.mp4', | ||
| icon:'fa fa-download' | ||
| }, | ||
| theme:'default ok' | ||
| theme:'awesome ok' | ||
| }); | ||
| ``` | ||
|
|
||
| You can specify a theme by passing ```theme : ''``` option to Amaran JS object. | ||
|
|
||
| For "default" theme you can call theme and variation with theme ```'default <VARIATION NAME>'``` e.g : ```theme:'default ok'``` or ```theme:'default error'``` | ||
|
|
||
| For "default" theme we have 3 content options message,size and file.message represent first line,size second line and file reperesent third line. | ||
|
|
||
| With icon options you can specify icon."default" theme using Font Awesome icons.Icons list can be found in this ```http://fontawesome.io/icons/``` adress. | ||
|
|
||
| e.g For envelope icon just pass ```icons:'fa fa-envelope'``` | ||
|
|
||
| **Creating your own variations** | ||
|
|
||
| ``` | ||
| .amaran.default.<VARIATION NAME> p.bold{ | ||
| color:<COLOR CODE>; | ||
| } | ||
| .amaran.default.<VARIATION NAME> .icon { | ||
| background-color:<COLOR CODE>; | ||
| color:#fff; | ||
| } | ||
| ``` | ||
| Just change ```<VARIATION NAME>``` with your variation name and ```<COLOR CODE>``` with your color code and add in your main css file or you can add inside ```amaran/css/theme/default.css``` | ||
| e.q | ||
|
|
||
| ``` | ||
| .amaran.default.pink p.bold{ | ||
| color:#D704DE; | ||
| } | ||
| .amaran.default.pink .icon { | ||
| background-color:#D704DE; | ||
| color:#fff; | ||
| } | ||
| ``` | ||
|
|
||
| // image will include here | ||
|
|
||
| **user theme** | ||
|
|
||
| "user" theme has 4 variations | ||
|
|
||
| // image will include here | ||
|
|
||
| Usage : | ||
|
|
||
| ``` | ||
| $.amaran({ | ||
| content:{ | ||
| img:'http://api.randomuser.me/0.2/portraits/men/36.jpg', | ||
| user:'John Walker', | ||
| message:'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cupiditate, ducimus?' | ||
| }, | ||
| theme:'user green', | ||
| }); | ||
| ``` | ||
|
|
||
| Documentation not ready as MD i will add soon. | ||
| [Usage Documentation](http://hakanersu.github.io/AmaranJS/amaranjs/#basic-usage) | ||
| Documentation a bit outdated. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
Large diffs are not rendered by default.
Oops, something went wrong.
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.