HSPH Design System

A collection of tools and libraries to implement the HSPH Design System

HSPH Boostrap

An implementation of the Bootstrap CSS framework implementing the Harvard Chan brand.

How to use

In your theme or plugin you can either directly enqueue the styles and optionally the scripts:

add_action(
	'wp_enqueue_scripts',
	function () {
		// Enqueue the CSS files.
		wp_enqueue_style( 'hsph-bootstrap' );
		// Optionnaly: Enqueue JS if you want to use tabs, drop-downs, modals, tooltips, ...
		wp_enqueue_script( 'hsph-bootstrap' );
	}
);

Or if you have existing scripts and styles you can simply make hsph-bootstrap a dependency:

add_action(
	'wp_enqueue_scripts',
	function () {
		// Enqueue the CSS files.
		wp_enqueue_style( 'theme-styles', get_stylesheet_directory_uri() . '/style.css', array( 'hsph-bootstrap' ) );
		// Optionnaly: Enqueue JS if you want to use tabs, dropdowns, modals, tooltips, ...
		wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/js/main.js', array( 'jquery', 'hsph-bootstrap' ) );
	}
);

How to Modify

Requirements: You need to have npm installed on your machine

1. Clone the repo locally https://github.com/HarvardChanSchool/plugin-design-system
2. In a terminal, navigate to the cloned folder and run `npm i` to install the dev tools
3. Make changes to /assets/sass/hsph-bootstrap/_bootstrap-vars.scss
   
   • Additionally: more advanced changes can be made to existing or new partial sass files
4. Compile your changes by running `npm run bootstrap`
5. You can preview your changes by visiting the local html files in /docs/ in your browser.
6. Once you are satisfied, commit change to the repo.
   

Demos