gh-action-test
Advanced tools
NSW Design system is a collection of reusable UI components used on the NSW government websites.
See live examples of NSW Digital Design system components and guidance on how to use them on you website at NSW Design System.
How you use the NSW Design System depends on your team's capabilities. We recommend using npm but also provided in a CDN, and a downloadable starter kit which includes all the compiled assets.
npm is a package manager for Node-based projects. We recommend npm packages because it makes it easy to update and install the design system from the command line.
Install Node/npm.
Generate a package.json file using the npm init command in the terminal. You will be prompted to enter several pieces of information, like the name of your application, version, description etc.
Add nsw-design-system to your project’s package.json:
npm install --save nsw-design-systemThe NSW Design System is now installed as a dependancy of your project, check out how to import styles and javascript in to your project build.
The NSW Design System styles need to be added to the main Sass file in your project.
Use the below snippet to import the NSW Design System (ideally placed before any other imports or sass):
@import 'node_modules/nsw-design-system/src/main';
In your main html document add this line of code inside the <head> tag
<link href="https://fonts.googleapis.com/css?family=Montserrat:400,600&display=swap" rel="stylesheet">
The design system icons use sprite SVG, add this line of code inside the <head> tag in your main html document
<script>
// SVG Sprite Loader
var svgAjax = new XMLHttpRequest();
svgAjax.open("GET", "https://cdn.jsdelivr.net/npm/nsw-design-system/dist/assets/svg/sprite.svg", true);
svgAjax.send();
svgAjax.onload = function(e) {
var fragment = document.createRange().createContextualFragment(svgAjax.responseText);
var svg = fragment.querySelector('svg')
svg.setAttribute('aria-hidden', true);
svg.style.cssText = 'position: absolute; width: 0; height: 0; overflow: hidden;'
document.body.insertBefore(fragment, document.body.childNodes[0]);
};
</script>
Some of the NSW Design System components require javascript to provide advanced functionality. To ensure the page is ready for javascript to run, include the follow scripts tags at the end of the html document.
<script src="node_modules/nsw-design-system/src/main.js"></script>
<script>window.NSW.initSite()</script>
</body>
</html>
Depending on your project set up, you might wish to copy the file into your project from node_modules or add the reference to your build workflow.
The bundled css and js files are also hosted in JSDelivr.
You can add the files to your main html document
<html>
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nsw-design-system@2/dist/css/main.css">
</head>
<body>
...
<script src="https://cdn.jsdelivr.net/npm/nsw-design-system@2/dist/js/main.min.js"></script>
<script>window.NSW.initSite()</script>
</body>
</html>
You can download the compiled design system assets (HTML, CSS, JavaScript) in the HTMLStarterkit zip file from the latest release.
To be notified when there’s a new release, you can either join the NSW Design System community or watch the NSW Design System Github
FAQs
Design system for Digital NSW
We found that gh-action-test demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Socket CTO Ahmad Nassri discusses why supply chain attacks now target developer machines and what AI means for the future of enterprise security.
Security News
Learn the essential steps every developer should take to stay secure on npm and reduce exposure to supply chain attacks.
Security News
Experts push back on new claims about AI-driven ransomware, warning that hype and sponsored research are distorting how the threat is understood.