Notify Element needs CSS love.

[shakyShane]

The notify element that informs the user of connections + file changes needs some serious attention.

This is a great opportunity for a designer/developer to contribute to this Open Source project - I'm basically just looking for a CSS wizz to create an awesome growl-like notification that can be used by BrowserSync.

This is what we currently have - not much to beat right?

Here's the 'BrowserSync' word mark in outlines as seen on http://browsersync.io if you want to use that.

https://www.sugarsync.com/pf/D7377973_73548509_925643

Reply here, or via @BrowserSync with any links to codepens/jsbins/jsfiddles - really looking forward to seeing any contributions :)

[shakyShane]

Just to clarify - all that's required is the CSS + HTML, no need for any JS knowledge. :)

[davidhund]

I started a jsfiddle for people to iterate upon. IMO there's no need for anything fancy. http://jsfiddle.net/urFhY/3/

[shakyShane]

Yeah, certainly no need for anything too fancy.

I forgot to mention that future features may require multi-line messages too, so that's something else to think about :)

[davidhund]

Here's a growl-like version, with multi-line text: http://jsfiddle.net/DS8Wj/ — Anyway: I just thought to kick this off: I have not spent much time on it (yet) ;)

[damonbauer]

Similar concept here. I used the colors from the browsersync.io site. http://codepen.io/damonbauer/pen/Gzkvi

[davidhund]

That certainly looks a bit better @damonbauer. I wonder how much info is needed though (@shakyShane?) — I'm guessing we would not want it to be too intrusive. Been thinking about centering it: that's probably not the best idea since it would obstruct even more of the page, but anyway: http://jsfiddle.net/9KWGn/1/

[shakyShane]

Yeah I'm liking the idea of a heading + sub text.

Sent from my iPhone

On 17 Apr 2014, at 20:40, David Hund notifications@github.com wrote:

That certainly looks a bit better @damonbauer. I wonder how much info is needed though (@shakyShane?) — I'm guessing we would not want it to be too intrusive. Been thinking about centering it: that's probably not the best idea since it would obstruct even more of the page, but anyway: http://jsfiddle.net/9KWGn/1/

— Reply to this email directly or view it on GitHub.

[ricardozea]

Notifications are looking good.

I prefer something a bit tighter and smaller, because when I'm testing on mobile devices the current large notification takes too much space. Besides, after I while I really don't need to "read" the notification and something small that my eye can just perceive fast is enough for me to know that BS is working.

So I came up with this alternative based on @damonbauer's Pen: http://codepen.io/ricardozea/pen/hHFIs/

+1 to @damonbauer's idea of using BS's website colors, right on for branding.

_Note:_ To see the multiline copy, just move the last --> from the Conditional Comment up to the <!-- Start Multiline stuff section.

PS. I optimized the SVG code a bit, made a few HTML additions and optimized the SCSS a little bit as well.

Hope you like it.

[webdesserts]

:+1: for @ricardozea's version

[shakyShane]

Yeah these are looking good!

I completely forgot to document the fact that you can pass an array of styles to the notify option if the current one is annoying (like when building a NAV for example).

These are the styles https://github.com/shakyShane/browser-sync-client/blob/master/lib/notify.js#L5-L15

and if you want to customise it, you add that array to the notify option, like

browserSync.init({
    notify: {
        styles: [ /* css rules */ ]
    }
});

[shakyShane]

Closing in favour of allowing anyone to override this via config mentioned above

[matthewmcvickar]

@shakyShane Can you include this in the documentation on the BrowserSync site? I was looking for this option and only found this GitHub issue by Googling.

[davidhund]

:+1:

[doginthehat]

:+1:

Also worth mentioning in the documentation, passing an array overwrites the styles, passing an object merges the styles.

I find the latter simpler: styles: {'top':'auto','bottom':'0','borderBottomLeftRadius': "0",'fontSize': "12px"} keeps it anchored to the edges but moves it to the bottom and makes the font size consistent on any site.