St. Jude Cloud Bootstrap Theme

src="https://img.shields.io/badge/status-active-success.svg" />


src="https://img.shields.io/github/issues/stjudecloud/theme/%40stjudecloud%2Ftheme-bootstrap?label=issues" />


src="https://img.shields.io/github/issues-pr/stjudecloud/theme/%40stjudecloud%2Ftheme-bootstrap?label=pull%20requests" />

Bootstrap Sass theme for the St. Jude Cloud design system. See the repository's root README.md for more information on the design system itself.




Request Feature
|
Report Bug


⭐ Consider starring the repo! ⭐

Quick Start

Use the following commands to get started quickly.

``bash


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

$3

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.

`text
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
`

$3

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,

`sass
// 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"
`

$3

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

$3

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