Bstyles

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

• Basscss
• cssnext
• PostCSS
• Browsersync
• Gulp with some ES2015
• StyleLint
• Hero patterns
• ...and Having fun with some responsive type