{"id":19504791,"url":"https://github.com/nice-digital/niceorg-client","last_synced_at":"2026-04-09T20:04:08.229Z","repository":{"id":38992028,"uuid":"114232999","full_name":"nice-digital/niceorg-client","owner":"nice-digital","description":"CSS and JavaScript for nice.org.uk using the NICE Design System","archived":false,"fork":false,"pushed_at":"2023-08-22T09:36:50.000Z","size":1484,"stargazers_count":0,"open_issues_count":2,"forks_count":0,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-01-08T10:45:29.826Z","etag":null,"topics":["client","client-side","css","javascript","jquery","nice","niceorg"],"latest_commit_sha":null,"homepage":"http://localhost:8087/","language":"SCSS","has_issues":false,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nice-digital.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-12-14T09:54:32.000Z","updated_at":"2021-11-22T14:51:10.000Z","dependencies_parsed_at":"2024-11-10T22:28:42.403Z","dependency_job_id":"295c5448-40ac-45d4-a702-01b3febf814f","html_url":"https://github.com/nice-digital/niceorg-client","commit_stats":null,"previous_names":[],"tags_count":53,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nice-digital%2Fniceorg-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nice-digital%2Fniceorg-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nice-digital%2Fniceorg-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nice-digital%2Fniceorg-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nice-digital","download_url":"https://codeload.github.com/nice-digital/niceorg-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240754366,"owners_count":19852189,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["client","client-side","css","javascript","jquery","nice","niceorg"],"created_at":"2024-11-10T22:27:15.777Z","updated_at":"2026-04-09T20:04:08.188Z","avatar_url":"https://github.com/nice-digital.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# niceorg-client (NOC)\n\n\u003e Implementation of the [NICE Design System](https://design-system.nice.org.uk/) for www.nice.org.uk\n\n[:rocket: Jump to usage](#usage) | [:pencil2: Jump to developing locally](#developing-locally)\n\n\u003cdetails\u003e\n\u003csummary\u003e\u003cstrong\u003eTable of contents\u003c/strong\u003e\u003c/summary\u003e\n\n- [What is it?](#what-is-it)\n- [Technical stack](#technical-stack)\n- [IDE](#ide)\n- [Usage](#usage)\n\t- [Niceorg](#niceorg)\n\t- [Guidance-Web](#guidance-web)\n- [Developing locally](#developing-locally)\n\t- [Proxy to niceorg](#proxy-to-niceorg)\n\t- [Bookmarklets](#bookmarklets)\n- [Environments](#environments)\n\n\u003c/details\u003e\n\n## What is it?\n\nThis repository houses the client code (CSS and JS) shared between the front-end of Orchard and Guidance Web.\n\nNOC augments the [NICE Design System](https://design-system.nice.org.uk/) with nice.org-specific components, including styling of old [NICE.Bootstrap](https://github.com/nice-digital/NICE.Bootstrap) components. We support using NICE.Bootstrap components with their existing markup as re-writing all the markup for the whole of niceorg and guidance would be a _massive_ job. So instead, we style them using the Design System, so at least we get consistent foundations like typography, spacing and colour.\n\nThis also has the benefit that comms and content teams can continue to use the existing markup they know to produce pages. But allows them to gradually start using the new Design System components.\n\nNOC is a separate repository from the core niceorg codebase because:\n\n- it allows front-end developers to work on it in an IDE (or OS) of their choice, without Visual Studio\n- the CSS and JS is referenced by both [niceorg](https://github.com/nice-digital/niceorg) and [Guidance-Web](https://github.com/nice-digital/guidance-web) so makes sense to live on its own\n- we deploy it to the CDN so doesn't live on a niceorg/Guidance-Web server.\n\n## Technical stack\n\n- [Visual Studio Code](https://code.visualstudio.com/) as an IDE\n- [NICE Design System](https://design-system.nice.org.uk/)\n  - And [NICE Icons](https://github.com/nice-digital/nice-icons)\n- [Webpack](https://webpack.js.org/) for module bundling\n  - Using [Babel](https://babeljs.io/) for ES6 transpilation\n- [Jest](https://jestjs.io/) for unit testing\n- [ESLint](https://eslint.org/) for JavaScript linting\n- [Prettier](https://prettier.io/) for code style/formatting\n- [stylelint](https://stylelint.io/) for SCSS linting\n- [SASS](https://sass-lang.com/) for CSS preprocessing\n- [PostCSS](http://postcss.org/) for post processing\n  - With [Autoprefixer](https://github.com/postcss/autoprefixer)\n    - Using [browserslist](https://github.com/browserslist/browserslist) and our [shared browserslist config](https://github.com/nice-digital/browserslist-config#readme)\n\n## IDE\n\nWe recommend using [Visual Studio Code](https://code.visualstudio.com/) as the IDE for development. We have a set of [recommended extensions](.vscode/extensions.json) you should install to make development easier. You should be prompted to install these when opening the folder in VS Code.\n\n## Usage\n\nAdd the following `link` and `script` tags into your page source to use NOC:\n\n```diff\n\u003chead\u003e\n+\t\u003clink rel=\"preconnect\" href=\"https://fonts.gstatic.com\"\u003e\n+\t\u003clink href=\"https://fonts.googleapis.com/css2?family=Inter:wght@400;600\u0026family=Lora:ital,wght@0,600;1,600\u0026display=swap\" rel=\"stylesheet\"\u003e\n+\t\u003clink href=\"http://localhost:8087/niceorg/css/app.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n\t\u003cmain\u003e\n\t\u003c/main\u003e\n+\t\u003cscript src=\"http://localhost:8087/niceorg/js/app.js\" async\u003e\u003c/script\u003e\n\u003c/body\u003e\n```\n\n\u003e This example is using http://localhost:8087/ for local development. See the [environments](#environments) listed below for the CDN URLs for use in production.\n\nNOC is designed to be used within both niceorg (Orchard front-end) and Guidance-Web:\n\n### Niceorg\n\nTo use NOC within niceorg, set the `StylesheetNICEDesignSystem` AppSetting in [Orchard.Web/Web.config](https://github.com/nice-digital/niceorg/blob/master/src/Orchard.Web/Web.config) (or the Octo variable) to point to one of the [environments](#environments) listed below.\n\nTODO: Add niceorg JS url once NOC JS has been added\n\nE.g. to point locally, for develoment:\n\n```xml\n\u003cadd key=\"StylesheetNICEDesignSystem\" value=\"http://localhost:8087/niceorg/css/app.css\" /\u003e\n```\n\nOr to point to the verison on the live CDN:\n\n```xml\n\u003cadd key=\"StylesheetNICEDesignSystem\" value=\"//cdn.nice.org.uk/niceorg/css/app.css\" /\u003e\n```\n\n### Guidance-Web\n\nTo use NOC within Guidance-Web, set the `NiceorgDesignSystemCSSURL` and `NiceorgDesignSystemJSURL` AppSettings in [Guidance.Web/appsettings.json](https://github.com/nice-digital/guidance-web/blob/master/Guidance.Web/appsettings.json#L121-L123) to point to one of the [environments](#environments) listed below.\n\nE.g. to point to the local dev server:\n\n```json\n\"NiceorgDesignSystemCSSURL\": \"http://localhost:8087/niceorg/css/app.css\",\n\"NiceorgDesignSystemJSURL\": \"http://localhost:8087/niceorg/js/app.js\"\n```\n\nor, to point to the live CDN:\n\n```json\n\"NiceorgDesignSystemCSSURL\": \"//cdn.nice.org.uk/niceorg/css/app.css\",\n\"NiceorgDesignSystemJSURL\": \"//cdn.nice.org.uk/niceorg/js/app.js\"\n```\n\n## Developing locally\n\nTo develop locally, make sure you have [Node 10.13.0+](https://nodejs.org/en/download/).\n\nRun `node -v` in a terminal to log the currently Node version. If it's less than 10.13 then [download and install the latest LTS (Long Term Support) version of Node](https://nodejs.org/en/download/) or use nvm (Node Version Manager) to install it (`nvm install 10.13.0 \u0026\u0026 nvm use 10.13.0` in a terminal). \n\n\u003e Note: our supported version of Node is dictated by [webpack's supported Node version](https://webpack.js.org/concepts/#environment).\n\nOnce Node is installed do the following to run NOC locally:\n\n1. Run `npm ci` in a terminal to install npm dependencies\n2. Run `npm start` to run the project\n\nThis runs a dev server and opens http://localhost:8087/niceorg/playground.html in a browser. This page is a dev playground for testing out components, see _server/playground.ejs for the source.\n\nThis dev server also proxies requests to niceorg:\n\n### Proxy to niceorg\n\nRunning the dev server via `npm start` sets up a proxy to live niceorg on www.nice.org.uk. This means, for example if you view http://localhost:8087/ it will make a request for the HTML response from https://www.nice.org.uk/ behind the scenes, process the HTML to make links relative etc, and inject the NOC CSS and JS.\n\nRun one of these commands to run against a different environment:\n\n- local (http://niceorg) `npm run dev:local`\n- dev `npm run dev:dev`\n- test `npm run dev:test`\n- alpha `npm run dev:alpha`\n\n### Bookmarklets\n\nTo test the local version of NOC against the [NICE.Bootstrap guide](http://nice-digital.github.io/NICE.Bootstrap/index.html), create a bookmarklet with the following link:\n\n```\njavascript:$('link[href*=\"NICE.bootstrap.css\"]').replaceWith('\u003clink href=\"http://localhost:8087/niceorg/css/app.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e')\n```\n\nAnd to test the local version of NOC against www.nice.org, use the following bookmarklet:\n\n```\njavascript:$('link[href*=\"NICE.bootstrap.updated.brand.css\"]').remove(),$('link[href*=\"fontawesome.css\"]').remove(),$('link[href*=\"NICE.glyphs.css\"]').remove(),$('link[href*=\"NICE.base\"]').remove(),$(\"head\").append('\u003clink href=\"http://localhost:8087/niceorg/css/app.css\" rel=\"stylesheet\" type=\"text/css\" /\u003e')\n```\n\n\u003e Note: we can't actually create bookmarklets here because GitHub strips them from markdown.\n\n## Environments\n\nThe CSS is available at */niceorg/css/app.css* and the JS at */niceorg/js/app.js* on each of the following environments:\n\n| Environment      | CSS                                               | JavaScript                                      |\n| ---------------- | :------------------------------------------------ | :---------------------------------------------- |\n| Local dev server | http://localhost:8087/niceorg/css/app.css         | http://localhost:8087/niceorg/js/app.js         |\n| Alpha CDN        | https://alpha-cdn.nice.org.uk/niceorg/css/app.css | https://alpha-cdn.nice.org.uk/niceorg/js/app.js |\n| Live CDN         | https://cdn.nice.org.uk/niceorg/css/app.css       | https://cdn.nice.org.uk/niceorg/js/app.js       |\n\n\u003e Note: we used to have separate minified CSS URLs (e.g. https://cdn.nice.org.uk/niceorg/css/app.min.css). Those are now 'deprecated' because we have full sourcemaps. However, we still deploy a copy of the CSS there for backwards compatibility.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnice-digital%2Fniceorg-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnice-digital%2Fniceorg-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnice-digital%2Fniceorg-client/lists"}