livn-bootstrap-themes

LivaNova brand's Bootstrap themes.

Usage no npm install needed!

<script type="module">
  import livnBootstrapThemes from 'https://cdn.skypack.dev/livn-bootstrap-themes';
</script>

README

LivaNova Bootstrap Themes

Bootstrap 4 Themes for LivaNova Plc. Currenty brands/products that themes have been made for are:

  • LivaNova
  • Cardiovascular
  • Neuromodulation

How do I get set up?

Adding the dependency

NPM
npm i livn-bootstrap-themes
Yarn
yarn add livn-bootsrap-themes

Using a theme in your web project

Note: You will not need to import the base bootstrap css file as the compiled themes reference them already.

Reference the compiled and minified css stylesheet into your HTML

If you are writing your code directly in HTML, or not using a front-end framework to compile scss, inside the pages' <head></head> tag before any other stylesheet - add the following:

<link rel="stylesheet" href="node_modules/livn-bootstrap-themes/css/[THEME_NAME].min.css">

and

<script src="node_modules/livn-bootstrap-themes/js/[THEME_NAME].min.js"></script>

depending on your development environmnt, you may need to ensure that the css file is made avaialble in the output folder and alter the above file path accordingly.

Referencing the the scss source files
@import('node_modules/livn-bootstrap-themes/scss/[THEME_NAME].scss');
List of supported theme names
Theme [THEME_NAME]
LivaNova Plc. livanvova
Cardiovascular cardiovascular
Neuromodulation neuromodulation

Many Bootstrap 4 components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, in addition to some custom bootstrap JavaScript plugins.

Place the following neuromodulation<script/> tags near the end of your pages, right before the closing </body>. jQuery must come first, then Popper.js, and then our JavaScript plugins.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

Editing Themes

New SCSS Files

Add new SCSS files in the scss directory with a .scss file extension and per convention, partials should go into subfolders of the same name. These will automatically be compiled into css in the css directory with a .css file extension and minified with the .min suffix when the appropriate gulp task is run.

New JavaScript Files

Add new JavaScript files in the js directory with a .js file extension. These will automatically be minified with the .min suffix when the appropriate gulp task is run.

Gulp Tasks
  • gulp is the default task that builds everything
  • gulp watch browserSync opens the project in your default browser and live reloads when changes are made
  • gulp css compiles SCSS files into CSS and minifies the compiled CSS
  • gulp js minifies the themes JS file
  • gulp vendor copies dependencies from node_modules to the vendor directory

Who do I talk to if there is an issue installing or using the package?

Submit an issue via the git repositoy: https://bitbucket.org/sagarlivn/livn-bootstrap-themes

How can I request to have a new product/brand theme be created?

Via https://bitbucket.org/sagarlivn/livn-bootstrap-themes, provide the following information regarding the new product/branding:

  • Reason for new theme.
  • Contact information for the owner.
  • Guidlines, logos, colors to be applied to the theme.
  • Additional requirements

Author: Sagar Patel BEng (Hons) - Full Stack Software Engineer (Digital Innovation Team - LivaNova Plc.)