Friendly look and feel for browsersync.notify
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
docs
gulp
src
.babelrc
.gitignore
.npmignore
.npmrc
.stylelintrc
.travis.yml
gulpfile.babel.js
package-lock.json
package.json
readme.md

readme.md

Bstyles

Build Status

Friendly look and feel for browsersync.notify

Getting Started

npm i bstyles

Import the styles in your BrowserSync configuration

Available styles

  • Top - 100% width top banner, green background
  • TopLeft - Subtle green text, transparent background
  • BottomLeft - Small circular badge. White text with grey background
  • BottomRight - Subtle grey text, transparent background

Example:

import gulp from 'gulp';
import browserSync from 'browser-sync';
import paths from '../config';
import bstyles from 'bstyles';
const reload = browserSync.reload;

gulp.task('browser-sync', () => {
  browserSync.init([
    paths.css.src,
    paths.scripts.src,
    paths.html.src
  ],
    {
      server: {
        baseDir: "./"
      },
      notify: true,
      notify: {
        styles: bstyles.bottomRight
      }
    });
});

Tools used to build the demo site