Skip to content

Frontend.md

Latest commit

 

History

History
46 lines (29 loc) · 1.97 KB

Frontend.md

File metadata and controls

46 lines (29 loc) · 1.97 KB

Updating NuGet Gallery's frontend

Styling

We use Bootstrap 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 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/
  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 and Knockout.js.

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.