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

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:

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:

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

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

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. Compile your changes by running `npm run fontawesome`
4. Commit change to the repo.

Using both at the same time and in the admin

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