View on GitHub

Download

Download OUDS Web to get the compiled CSS and JavaScript, source code, or include it with your favorite package managers like npm, yarn, and more.

On this page

Package managers

Pull in OUDS Web’s source files into nearly any project with some of the most popular package managers. No matter the package manager, OUDS Web will require a Sass compiler and Autoprefixer for a setup that matches our official compiled versions.

npm

Install OUDS Web in your Node.js powered apps with the npm package:

npm install @ouds/web@0.4.0

const oudsWeb = require('oudsWeb') or import oudsWeb from 'oudsWeb' will load all of OUDS Web’s plugins onto a oudsWeb object. The oudsWeb module itself exports all of our plugins. You can manually load OUDS Web’s plugins individually by loading the /js/dist/*.js files under the package’s top-level directory.

OUDS Web’s package.json contains some additional metadata under the following keys:

  • sass - path to OUDS Web’s main Sass source file
  • style - path to OUDS Web’s non-minified CSS that’s been compiled using the default settings (no customization)

Get started with OUDS Web via npm with the starter project! Head to the Bootstrap starter templates repository, in particular Sass & JS, for inspiration on how to create and customize OUDS Web in your npm project. Includes the Sass compiler, Autoprefixer, Stylelint, PurgeCSS.

yarn

Install OUDS Web in your Node.js powered apps with the yarn package:

yarn add @ouds/web@0.4.0

Yarn 2+ (aka Yarn Berry) doesn’t support the node_modules directory by default: using the Bootstrap Sass & JS example needs some adjustments:

yarn config set nodeLinker node-modules # Use the node_modules linker
touch yarn.lock # Create an empty yarn.lock file
yarn install # Install the dependencies
yarn start # Start the project

NuGet

If you develop in .NET Framework, you can also install and manage OUDS Web’s CSS or Sass and JavaScript using NuGet. Newer projects should use libman or another method as NuGet is designed for compiled code, not frontend assets.

Install-Package ouds-web

Install-Package ouds-web.sass

CDNs

jsDelivr

We recommend jsDelivr as a CDN, and use it ourselves in our documentation to skip the download and deliver cached version of OUDS Web’s compiled CSS and JS to your project.

<link href="https://cdn.jsdelivr.net" rel="preconnect" crossorigin="anonymous">
<link href="https://cdn.jsdelivr.net/npm/@ouds/web@0.4.0/dist/css/ouds-web.min.css" rel="stylesheet" integrity="sha384-jrROfQGVaBxbucOInwS9RDKlkBnrSv7yT20bH67d8g5EuYeXvgGjTQl5C3hbMEnW" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/@ouds/web@0.4.0/dist/js/ouds-web.bundle.min.js" integrity="sha384-+qQ4PG8nWG4N+q+ajZg4dYlDbMRH+jPtGAi7CMObYXUc0IRyVdIsl60JbYVnVbSt" crossorigin="anonymous"></script>

If you’re using our compiled JavaScript and prefer to include Popper separately, add Popper before our JS, via a CDN preferably.

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js" integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@ouds/web@0.4.0/dist/js/ouds-web.min.js" integrity="sha384-/NNcMoX1MxhNOIgFdsk9OlWzrX5a0T/XNWP6CiPI5XOJm0WzyEmiFiYNGcokVQoC" crossorigin="anonymous"></script>

Resource hint: make sure to use preconnect where appropriate (only when given URL will be used).

Alternative CDN

In some cases—like in some specific countries or environments—you may need to use other CDN providers like unpkg. You’ll find the same files on these CDN providers, albeit with different URLs.

If the SRI hashes differ for a given file, you shouldn’t use the files from that CDN, because it means that the file was modified by someone else.

Note that you should compare same length hashes, e.g. sha384 with sha384, otherwise it’s expected for them to be different. As such, you can use an online tool like SRI Hash Generator to make sure that the hashes are the same for a given file. Alternatively, assuming you have OpenSSL installed, you can achieve the same from the CLI, for example:

openssl dgst -sha384 -binary ouds-web.min.js | openssl base64 -A

Downloads

Compiled CSS and JS

Download ready-to-use compiled code for OUDS Web v0.4.0 to easily drop into your project, which includes:

This doesn’t include documentation, source files, or any optional JavaScript dependencies like Popper.

Download

Source files

Compile OUDS Web with your own asset pipeline by downloading our source Sass, JavaScript, and documentation files. This option requires some additional tooling:

Should you require our full set of build tools, they are included for developing OUDS Web and its docs, but they’re likely unsuitable for your own purposes.

Download source

Examples

If you want to download and examine our examples, you can grab the already built examples:

Download examples