Skip to main content

​
Overview

The Bootstrap directory is a local vendor copy of Bootstrap 3.4.1 (the final stable Bootstrap 3 release) that has been extended in-place to serve as the front-end design system for nuget.org. Rather than pulling Bootstrap from a CDN or NuGet package at runtime, the Gallery keeps the full source tree under version control so that NuGet-specific styles, theming tokens, and JavaScript overrides can be built into the final distribution files as part of a reproducible Grunt build. The project outputs two artifacts that are copied directly into the main NuGetGallery web project:
  • dist/css/bootstrap.min.css → ../NuGetGallery/Content/gallery/css/
  • dist/js/bootstrap.js → ../NuGetGallery/Scripts/gallery/
Bootstrap v3 is in maintenance-only mode upstream. No new features are accepted by the upstream project; the Gallery’s additions are maintained entirely within this vendored copy.

​
Role in System

CSS Build

LESS source compiled via grunt-contrib-less, then autoprefixed and minified with clean-css. IE 8 compatibility is preserved via ieCompat: true and cssmin compatibility flags.

JS Build

Twelve Bootstrap plugin files concatenated in dependency order, jQuery version-checked at runtime, then minified with UglifyJS with IE 8 mangling support enabled.

Theme System

Light and dark modes are driven entirely by CSS custom properties defined in themes.less. The data-theme attribute on <html> switches the active palette at runtime with no JavaScript required.

Gallery Copy Task

grunt copy:gallerycss and grunt copy:galleryjs push the compiled artefacts into the main Gallery project. Developers must run Grunt after any LESS changes.

​
Key Files

​
Dependencies

​
Build-time (npm / Grunt)

​
Runtime

There are no .csproj or NuGet package references in this folder. This is a pure front-end npm/Grunt project with no .NET build integration. It must be built separately before the ASP.NET application picks up updated styles.

​
Notable Patterns and Implementation Details

The dist/ directory is committed to source control alongside the LESS source. Pull requests that modify LESS files must also include a re-compiled dist/ output, or the Gallery will render with stale styles in production deployments that skip the Grunt step.
Fluent Design token naming: themes.less uses a verbose but systematic naming convention (--neutralBackground2Rest, --brandForegroundLinkHover, etc.) derived from Microsoft Fluent UI. Every interactive state (Rest, Hover, Pressed, Selected) and every semantic role has an explicit token, making it straightforward to audit colour-contrast compliance per WCAG.
Dark mode is zero-JavaScript: Theme switching is achieved by toggling data-theme="dark" on the <html> element. All colour values are CSS custom properties resolved at paint time, so the switch is instant and can be wired to prefers-color-scheme without any additional scripting.
  • carousel.less is intentionally disabled in bootstrap.less (commented out). The Gallery does not use Bootstrap carousels.
  • Glyphicons are also disabled — the Gallery uses Microsoft Fluent UI icons (.ms-Icon) instead of the Bootstrap glyph font.
  • xs container width bug workaround: base.less sets width: calc(100vw - 20px) on .container at max-width: @screen-sm because Bootstrap 3 does not constrain overflow at the extra-small breakpoint.
  • @verified-color: #068918 is a custom LESS variable added on top of Bootstrap’s standard palette to style the package verified/prefix-reserved indicator badge.
  • IE 8 support is explicit throughout: cssmin compatibility flag, UglifyJS ie8: true, and ieCompat: true in the LESS compiler are all set.
  • Per-page LESS files (~35 page-*.less files) scope all page-specific rules under a top-level class (e.g. .page-package-details, .page-home) to prevent cross-page style bleed.