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/v1.0.15/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/v1.0.15/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 1.0.x version
https://assets.bux.osu.edu/v1.0.x/css/bux-styles.min.css
https://assets.bux.osu.edu/v1.0.x/js/bux.min.js

# These links will provide the latest 1.x version
https://assets.bux.osu.edu/v1.x/css/bux-styles.min.css
https://assets.bux.osu.edu/v1.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/
  |—— favicons/ 
  |—— osu-logos/
  |—— placeholders/
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​

1. Add the Package Registry URL to your project's composer.json file​

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

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

2. Authenticate Composer​

Generate a personal access token with readonly API access.

You will then need to run these commands using the auth token you receive.

composer config gitlab-domains code.osu.edu
composer config --global gitlab-token.code.osu.edu myauthtoken

This will add some config to your composer.json file for the code.osu.edu domain

"config": {
  "gitlab-domains": ["code.osu.edu"]
},

And the second line will place your auth token in a file at ~/.composer/auth.json.

{
    "bitbucket-oauth": {},
    "github-oauth": {},
    "gitlab-oauth": {},
    "gitlab-token": {
        "code.osu.edu": "myauthtoken"},
    "http-basic": {},
    "bearer": {}
}

3. Require BUX packages​

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

Optional: 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"
    ]
  }
}
Back to top