> ## Documentation Index
> Fetch the complete documentation index at: https://aipkg.org/llms.txt
> Use this file to discover all available pages before exploring further.

# Frontend Development

> Guide to updating NuGetGallery's frontend — compiling LESS stylesheets with Bootstrap 3 and Grunt, and adding page-specific JavaScript with jQuery and Knockout.js.

# Updating NuGet Gallery's frontend

## Styling

We use [Bootstrap 3](https://getbootstrap.com/docs/3.3/) as our base CSS framework.
This provides a grid layout, CSS normalization, and some common styles.

Changes to our styles should be made to [LESS](https://lesscss.org/) files and not to a CSS file directly.
LESS is a syntax that itself is not usable by a browser but is compiled to CSS. It provides niceties that CSS
does not offer such as rule nesting, mixins, variables, and arithmetic (calculated values).

Each page may have its own set of specific styles. These page-specific styles are in a `page-*.less` file
in the `src\Bootstrap\less\theme\` directory.

### Prerequisites

To compile LESS files:

1. Install node: [https://nodejs.org/en/download/](https://nodejs.org/en/download/)
2. Install Grunt: `npm install -g grunt`
3. Navigate to `.\src\Bootstrap`
4. Install NPM dependencies: `npm install`

### Updating styling

1. Update one or more `.less` files in the `src\Bootstrap\less` directory
2. Navigate to `.\src\Bootstrap`
3. Run `grunt`

It might be necessary to perform a "hard refresh" in your browser after running these steps so that the updated `bootstrap.min.css` file is loaded correctly. A hard refresh will reload the page and bypass the cache, ensuring the latest version of the page and its resources (like images and scripts) are loaded from the server. In Edge, Chrome, and Firefox the command for hard refresh is `Ctrl + Shift + R`.

Alternatively, you can disable the cache entirely in the Developer Tools Network tab.

### Adding a new page

1. Create a new `page-X.less` file in the `src\Bootstrap\less\theme\` directory
2. Add the new page in `src\Bootstrap\less\theme\all.less`

## JavaScript

We use [jQuery](https://jquery.com/) and [Knockout.js](https://knockoutjs.com/).

Common JavaScript should be added to `src\NuGetGallery\Scripts\gallery\common.js`.

Each page may have its own custom logic. These page-specific scripts are in a `page-*.js` file
in the `src\NuGetGallery\Scripts\gallery\` directory.