Skip to content

Commit

Permalink
updated docs to include instructions for custom icons - closes #3
Browse files Browse the repository at this point in the history
  • Loading branch information
@catc
catc committed Oct 8, 2014
1 parent 9899fea commit 78a77c7
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 40 deletions.
2 changes: 1 addition & 1 deletion gulpfile.js
View file
Expand Up @@ -171,7 +171,7 @@ gulp.task('gh-other', function(){
});


gulp.task('gh-page', ['gh-jade', 'scss', 'gh-css', 'gh-scripts', 'gh-fonts'], function(){
gulp.task('gh-page', ['gh-jade', 'scss', 'gh-css', 'gh-scripts', 'gh-other'], function(){
console.log( 'successfully updated github page' );
});

8 changes: 7 additions & 1 deletion public/stylesheets/scss/style.scss
View file
Expand Up @@ -481,7 +481,13 @@ table {
border: 3px solid #FACC54;
}


#ss-customstyle {
p:nth-of-type(3) {
padding-top: 10px;
margin-top: 20px;
border-top: 1px solid $b6;
}
}


/*======================================================================
Expand Down
5 changes: 5 additions & 0 deletions public/stylesheets/style.css
View file
Expand Up @@ -1104,6 +1104,11 @@ table {
border-radius: 50%;
border: 3px solid #FACC54; }

#ss-customstyle p:nth-of-type(3) {
padding-top: 10px;
margin-top: 20px;
border-top: 1px solid #ddd; }

/*======================================================================
Selectric
======================================================================*/
Expand Down
72 changes: 51 additions & 21 deletions views/index.jade
View file
Expand Up @@ -515,31 +515,61 @@ block content
})
button.btn(type="button") Run growl

h2#ss-customstyle Custom styles
p Creating your own custom styles is easy.
pre.language-css
code.language-css.
.igrowl-customeName {
background: customColor;
border-color: customColor;

.igrowl-message { color: customColor; }
.igrowl-title { color: customColor; }
.igrowl-icon { color: customColor; }
}
p and then use your style by:
pre.language-javascript
code.language-javascript.
$.iGrowl({
type : 'customName',
// other properties
})
#ss-customstyle
h2 Custom styles & icon sets
p Creating your own custom styles is easy.
pre.language-css
code.language-css.
.igrowl-customeName {
background: customColor;
border-color: customColor;

.igrowl-message { color: customColor; }
.igrowl-title { color: customColor; }
.igrowl-icon { color: customColor; }
}
p and then use your style by:
pre.language-javascript
code.language-javascript.
$.iGrowl({
type : 'customName',
// other properties
})

p.
You can use your own icon sets. If they're images, just pass the source path to the <code>image[src]</code> property.
If you're trying to incorporate an icon font, try to follow the iGrowl font structure by
using one of the iGrowl font icon css (ie: <code>linecons.css</code>, <code>vicons.css</code>, etc) for reference.

p.
By default, when you pass an icon name to iGrowl such as <code>linecons-pen</code> it adds the <code>i-linecons-pen</code> class to the div containing the icon.
To set up your icon set:
pre.language-css
code.language-css.
[class^="i-iconSetName-"], [class*=" i-iconSetName-"] {
font-family: 'iconSetName';

/* other styling (see icon css for reference) */
}
p Then assign each icon a unicode/ligature:
pre.language-css
code.language-css.
.i-iconSetName-iconName:before {
content: "icon-code";
}
p To use via iGrowl:
pre.language-javascript
code.language-javascript.
$.iGrowl({
icon : 'iconSetName-iconName',
// other properties
})


h2#ss-contributing Contributing
p If you find any bugs, have feature requests, or would like to contribute - either send me a pull request or open a ticket and I'll do my best to follow up on it.
p Developed and maintained by <a href="https://github.com/catc" target="_blank">Catalin Covic</a> under the <a href="http://opensource.org/licenses/MIT" target="_blank">MIT license</a>.


//- .sidebar
nav#sidebar
ul.nav
Expand All @@ -557,7 +587,7 @@ block content
li: a(href="#ss-methods") Public methods & prototypes

li: a(href="#ss-examples") Examples
li: a(href="#ss-customstyle") Custom styles
li: a(href="#ss-customstyle") Custom styles & icons sets
li: a(href="#ss-contributing") Contributing


34 changes: 17 additions & 17 deletions views/layout.jade
View file
Expand Up @@ -4,21 +4,21 @@ html
title iGrowl
link(href='http://fonts.googleapis.com/css?family=Lato:400,700,900,900italic,700italic' rel='stylesheet' type='text/css')

link(rel='stylesheet', href='stylesheets/style.css')
link(rel='stylesheet', href='stylesheets/igrowl.css')
link(rel='stylesheet', href='stylesheets/animate.css')
link(rel='stylesheet', href='stylesheets/icomoon.css')
link(rel='stylesheet', href='stylesheets/prism.css')
//- link(rel='stylesheet', href='stylesheets/style.css')
//- link(rel='stylesheet', href='stylesheets/igrowl.css')
//- link(rel='stylesheet', href='stylesheets/animate.css')
//- link(rel='stylesheet', href='stylesheets/icomoon.css')
//- link(rel='stylesheet', href='stylesheets/prism.css')
link(rel='stylesheet', href='stylesheets/icomoon/feather.css')
link(rel='stylesheet', href='stylesheets/icomoon/linecons.css')
link(rel='stylesheet', href='stylesheets/icomoon/steadysets.css')
link(rel='stylesheet', href='stylesheets/icomoon/vicons.css')
//- link(rel='stylesheet', href='stylesheets/icomoon/feather.css')
//- link(rel='stylesheet', href='stylesheets/icomoon/linecons.css')
//- link(rel='stylesheet', href='stylesheets/icomoon/steadysets.css')
//- link(rel='stylesheet', href='stylesheets/icomoon/vicons.css')
//- github page
//- link(rel='stylesheet', href='stylesheets/icomoon/icons.css')
//- link(rel='stylesheet', href='stylesheets/style.css')
link(rel='stylesheet', href='stylesheets/icomoon/icons.css')
link(rel='stylesheet', href='stylesheets/style.css')



Expand All @@ -27,11 +27,11 @@ html



script(src="javascripts/jquery.js", type="text/javascript")
script(src="javascripts/bootstrap.min.js", type="text/javascript")
script(src="javascripts/prism.js", type="text/javascript")
script(src="javascripts/jquery.selectric.min.js", type="text/javascript")
script(src="javascripts/igrowl.js", type="text/javascript")
script(src="javascripts/serializer.js", type="text/javascript")
//- script(src="javascripts/jquery.js", type="text/javascript")
//- script(src="javascripts/bootstrap.min.js", type="text/javascript")
//- script(src="javascripts/prism.js", type="text/javascript")
//- script(src="javascripts/jquery.selectric.min.js", type="text/javascript")
//- script(src="javascripts/igrowl.js", type="text/javascript")
//- script(src="javascripts/serializer.js", type="text/javascript")
script(src="javascripts/main.js", type="text/javascript")

0 comments on commit 78a77c7

Please sign in to comment.