HSPH Design System

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

Available tools:

HSPH Boostrap

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

How to use

IMPORTANT

HSPH Bootstrap is a special version of bootstrap compiled to be "no-conflict". All of the bootstrap rules are prefixed with a .hsph-bootstrap selector. Therefor you will need to add this selector to the body of the document if you want to use it on the entire page. Alternatively you can use wrapper <div> with this class to selectively enable bootstrap on specific sections of the page.

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

Direct enqueing

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:

By 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' ) );
	}
);

Refer to the official documentation on how to use Bootstrap in your theme: https://getbootstrap.com/docs/4.4/getting-started/introduction/

How to Modify

Requirements: You need to have npm installed on your machine

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

Demos

Demos are available here: https://harvardchanschool.github.io/plugin-design-system/

HSPH Font Awesome

The Font Awesome 4.7 library is available for all to use in their themes and plugins

How to use

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

Direct enqueing

add_action(
	'wp_enqueue_scripts',
	function () {
		// Enqueue the CSS files.
		wp_enqueue_style( 'hsph-fontawesome' );
	}
);

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

By dependency

add_action(
	'wp_enqueue_scripts',
	function () {
		// Enqueue the CSS files.
		wp_enqueue_style( 'theme-styles', get_stylesheet_directory_uri() . '/style.css', array( 'hsph-fontawesome' ) );
	}
);

Refer to the official documentation on how to use Font Awesome in your theme: https://fontawesome.com/v4.7.0/examples/

How to modify

We include the entire library so there is not much to modify but if you ever need to rebuild it:

Requirements: You need to have npm installed on your machine

Clone the repo locally https://github.com/HarvardChanSchool/plugin-design-system
In a terminal, navigate to the cloned folder and run `npm i` to install the dev tools
Compile your changes by running `npm run fontawesome`
Commit change to the repo.

Using both at the same time and in the admin

By dependency

function use_hsph_design_system() {
	// Enqueue Bootstrap CSS files.
    wp_enqueue_style( 'hsph-bootstrap' );
    // Enqueue Bootstrap JS files.
    wp_enqueue_script( 'hsph-bootstrap' );
 	// Enqueue Font Awesome CSS files.
	wp_enqueue_style( 'hsph-fontawesome' );
}
add_action( 'wp_enqueue_scripts', 'use_hsph_design_system');
add_action( 'admin_enqueue_scripts', 'use_hsph_design_system');