St. Jude Cloud Bootstrap Theme
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
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.