Quick Start

Use the following commands to get started quickly.

# Clone the repository and cd to themes/bootstrap
git clone https://github.com/stjudecloud/theme.git
cd theme/themes/bootstrap

# Install dependencies
npm install

# Build a dev AND production bundle in `dist/`. This is the default so both
# can be packaged in our npm releases, but you may specify `build:dev` or 
# `build:prod` if you only need one.
npm run build

# Run a watcher job that updates as you develop
npm start # or `npm run watch`

Versioning

This repository matches Bootstrap's two major version numbers. If this repository's version is v4.3.123, then it depends on Bootstrap v4.3.x.

What's Included

Compiled Assets

By default, the dist/ directory will include all of the files you need to host publicly to have the Bootstrap theme work on your site. Note that the dist/ directory contains both minified and non-minified assets. For now, we include both as the cost should be small to store both and you can easily replace the theme script to point to a development copy for debugging purposes.

dist
├── stjude-cloud-theme.css
├── stjude-cloud-theme.css.map
├── stjude-cloud-theme.min.css
├── stjude-cloud-theme.min.css.map
├── stjude-logo-child.10a0c66e.svg
├── stjude-logo-child.863ec0d6.svg
├── stjude-logo-child.f9d6fdfe.svg
...etc

Sass Files

The source Sass files are included in the sass/ directory of the published package. Most individuals will probably want to import the full theme, but you can selectively import elements as well. For example,

// Import full theme
@import "@stjudecloud/theme-bootstrap/scss/stjude-cloud-theme"

// Apply your site-specific components and other CSS
@import "@stjudecloud/theme-bootstrap/scss/typography"

Fonts and Images

To correctly include font families for a project as well as images, override the default $stjude-sans-font-path and $stjude-images-path variable.

Copyright

© 2021-Present St. Jude Children's Research Hospital.