HSPH Design System
Guillaume Molter
James Nicholson
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 - WordPress
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:
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
- 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`If you made any changes to fonts or select2 you need to compile those as well. Seepackage.jsonfor the commands.
Increment the plugin version in /hsph-plugin-design-system.php
- 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 - 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
- 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
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');
Related content
Copyright © 2024 The President and Fellows of Harvard College * Accessibility * Support * Request Access * Terms of Use