Content Comparison

HSPH Boostrap

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

How to use - WordPress

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 use - Other projects (Laravel, ...)

It is usually recommended to install the design system as an npm package by modifying the `dependencies` section of your `package.json`:

    "dependencies": {
        "@harvardchanschool/plugin-design-system": "github:HarvardChanSchool/plugin-design-system"
    },

You can then either load the full design system in Laravel Mix :

// Combine and minify CSS
mix.styles([
    'node_modules/@harvardchanschool/plugin-design-system/assets/css/hsph-bootstrap.css'
], 'public/css/app.css');

// Combine and minify JavaScript
mix.js([
    'node_modules/@harvardchanschool/plugin-design-system/assets/js/hsph-bootstrap.bundle.min.js',
], 'public/js/app.js');

Or just the SASS variables if you are working on a smaller project:

@import '../../node_modules/@harvardchanschool/plugin-design-system/assets/sass/hsph-bootstrap/_hsph-vars';
@import '../../node_modules/@harvardchanschool/plugin-design-system/assets/sass/hsph-bootstrap/_bootstrap-vars';
@import '../../node_modules/bootstrap/scss/_mixins.scss';

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`
   1. If you made any changes to fonts or select2 you need to compile those as well. See package.json for the commands.

5. Increment the plugin version in /hsph-plugin-design-system.php 

6. You can preview your changes by visiting the local html files in /docs/ in your browser.
7. 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 - WordPress

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 use - Other projects (Laravel, ...)

It is usually recommended to install the design system as an npm package by modifying the `dependencies` section of your `package.json`:

    "dependencies": {
        "@harvardchanschool/plugin-design-system": "github:HarvardChanSchool/plugin-design-system"
    },

You can then either load the full design system in Laravel Mix :

// Combine and minify CSS
mix.styles([
    'node_modules/@harvardchanschool/plugin-design-system/assets/css/hsph-fontawesome.css'
], 'public/css/app.css');

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