Skip to main content

Installation

Use hosted CSS and JS or download assets to include in your project.

Use Hosted Assets#

To use the hosted CSS, add this <link> to the <head> of your document.

<link rel="stylesheet" href="https://assets.bux.osu.edu/v0.7.8/css/bux-styles.min.css"/>

To use the hosted JS, add this <script> to the end of your document, just before the closing </body> tag.

<script src="https://assets.bux.osu.edu/v0.7.8/js/bux.min.js"></script>

In addition to the latest tagged version, we will also provide major and minor versions in the following format. If you'd like to receive automatic updates you may choose to use one of these versions instead.

# These links will provide the latest 0.7.x version
https://assets.bux.osu.edu/v0.7.x/css/bux-styles.min.css
https://assets.bux.osu.edu/v0.7.x/js/bux.min.js

# These links will provide the latest 0.x version
https://assets.bux.osu.edu/v0.x/css/bux-styles.min.css
https://assets.bux.osu.edu/v0.x/js/bux.min.js

Download Project Assets#

This ZIP file contains compiled and minified CSS and JS, Sass source files, Twig templates, images, and a starter HTML file.

css/
|—— bux-styles.css
|—— bux-styles.min.css
images/
|—— favicon.ico
|—— osu-logos/
js/
|—— bux.js
|—— bux.min.js
sass/
|—— components/
|—— core/
|—— utils/
|—— bux-styles.scss
|—— _settings.scss.txt
twig/
|—— (A Twig template for each component as necessary.)
index.html

Use a Package Manager#

NPM and Composer packages are hosted via the University Code Repository (UCR) and will require authenitication to UCR. Each version of the package will include a dist directory that includes the same files listed in the "Download Project Assets" section above.

NPM#

Add the @osu namespace to your project by adding the following line to your project's .npmrc file. If your project doesn't have an .npmrc file, create one at the root of your project.

@osu:registry=https://code.osu.edu/api/v4/packages/npm/

Then install the package from your terminal at the root of the project.

npm install @osu/bux-source

Composer#

Add the following item to the "repositories" section of your project's composer.json file.

"code.osu.edu/6209": {
"type": "composer",
"url": "https://code.osu.edu/api/v4/group/6209/-/packages/composer/packages.json"
}

Then require the package from your terminal at the root of the project.

composer require osu/bux-composer

Depending on your project, you may want to add it as a dev dependency:

composer require --dev osu/bux-composer

Customize Composer install location#

You may optionally install this package to a specific directory rather than into the default vendor directory. To do so, you must also install the Composer Installers Extender package.

A valid use case for this would be to install BUX assets directly into your Drupal theme. See example below for how to configure that in your project's composer.json file.

"extra": {
"installer-types": [
"design-system"
],
"installer-paths": {
"design-system/{$name}": [
"type:design-system"
]
}
}