Skip to content

Commit

Permalink
Getting started section update
Browse files Browse the repository at this point in the history
  • Loading branch information
Anna Yeshtukova committed Dec 21, 2021
1 parent 0bf723b commit d1541bd
Show file tree
Hide file tree
Showing 2 changed files with 99 additions and 135 deletions.
169 changes: 99 additions & 70 deletions src/docs/content/develop/getting-started.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,95 +4,110 @@ width: narrow
no-blank: true
order: 1
---
<h2>Using the design system</h2>

<h2>Using the design system</h2>
<p>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.</p>
<nav class="nsw-in-page-nav" aria-labelledby="in-page-nav">
<h2 id="in-page-nav" class="nsw-page-nav__title">On this page</h2>
<ul class="nsw-in-page-nav__list">
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'npm'}}" class="nsw-in-page-nav__link">Installing with NPM</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'style'}}" class="nsw-in-page-nav__link">Import styles</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'fonticon'}}" class="nsw-in-page-nav__link">Adding the font and icons</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'javascript'}}" class="nsw-in-page-nav__link">Importing javascript into your project</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'cdn'}}" class="nsw-in-page-nav__link">Using JSDelivr CDN</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'starter-kit'}}" class="nsw-in-page-nav__link">Download starter kit</a>
</li>
</ul>
</nav>
<h3 id="npm">Installing with NPM</h3>
<ul>
<li>Install Node/npm. You can find more information how to install it <a href="https://nodejs.org/en/download/">Nodejs</a>.
</li>
<li>Generate a <code>package.json</code> file using the <code>npm init</code> command in the terminal. You will be prompted to enter several pieces of information, like the name of your application, version, description etc.
</li>
<li>Add <code>nsw-design-system</code> to your project’s <code>package.json</code>:
<br><br>
<code>npm install --save nsw-design-system</code>
</li>
</ul>
<p>The NSW Design System is now installed as a dependancy of your project. Next, import <a href="{{change-extention path 'anchor' 'style'}}">styles</a> and <a href="{{change-extention path 'anchor' 'javascript'}}">javascript</a> in to your project build.</p>
<h3 id="style">Importing styles</h3>
<p>The NSW Design System styles can be imported as a whole package, or you can install core styles and add components selectively.</p>
<h4>All styles</h4>
<p>To import all styles as a single package you need to add following snippet at the start of your main SCSS file:</p>
{{#>_docs-example hidden="true" open="true" code="language-scss"}}


<nav class="nsw-in-page-nav" aria-labelledby="in-page-nav">
<h2 id="in-page-nav" class="nsw-in-page-nav__title">On this page</h2>
<ul class="nsw-in-page-nav__list">
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'npm'}}" class="nsw-in-page-nav__link">Installing with NPM</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'style'}}" class="nsw-in-page-nav__link">Import styles</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'fonticon'}}" class="nsw-in-page-nav__link">Adding the font and icons</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'javascript'}}" class="nsw-in-page-nav__link">Importing javascript into your project</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'cdn'}}" class="nsw-in-page-nav__link">Using JSDelivr CDN</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'starter-kit'}}" class="nsw-in-page-nav__link">Download starter kit</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'browser-support'}}" class="nsw-in-page-nav__link">Browser support</a>
</li>
<li class="nsw-in-page-nav__list-item">
<a href="{{change-extention path 'anchor' 'updates'}}" class="nsw-in-page-nav__link">Getting updates</a>
</li>
</ul>
</nav>


<h3 id="npm">Installing with NPM</h3>
<ul>
<li>Install Node/npm. You can find more information how to install it <a href="https://nodejs.org/en/download/">Nodejs</a>.</li>
<li>Generate a <code>package.json</code> file using the <code>npm init</code> command in the terminal. You will be prompted to enter several pieces of information, like the name of your application, version, description etc.</li>
<li>
Add <code>nsw-design-system</code> to your project’s <code>package.json</code>:
<br><br>
<code>npm install --save nsw-design-system</code>
</li>
</ul>
<p>The NSW Design System is now installed as a dependancy of your project. Next, import <a href="{{change-extention path 'anchor' 'style'}}">styles</a> and <a href="{{change-extention path 'anchor' 'javascript'}}">javascript</a> in to your project build.</p>


<h3 id="style">Importing styles</h3>
<p>The NSW Design System styles can be imported as a whole package, or you can install core styles and add components selectively.</p>
<h4>All styles</h4>
<p>To import all styles as a single package you need to add following snippet at the start of your main SCSS file:</p>
{{#>_docs-example hidden="true" open="true" code="language-scss"}}
@import 'node_modules/nsw-design-system/src/main';
{{/_docs-example}}
<h4>Core and selected components</h4>
<p>Our core library includes the design system's base theme, typography, mixins and helper functions. Once you imported it, you can take full advantage of our variables and helpers. To import core library you need to add following snippet at the start of your main SASS file:</p>
{{#>_docs-example hidden="true" open="true" code="language-scss"}}
{{/_docs-example}}
<h4>Core and selected components</h4>
<p>Our core library includes the design system's base theme, typography, mixins and helper functions. Once you imported it, you can take full advantage of our variables and helpers. To import core library you need to add following snippet at the start of your main SASS file:</p>
{{#>_docs-example hidden="true" open="true" code="language-scss"}}
// Core libraries
@import 'node_modules/nsw-design-system/src/global/scss/settings/settings';
@import 'node_modules/nsw-design-system/src/global/scss/base/all';
@import 'node_modules/nsw-design-system/src/global/scss/helpers/all';
@import 'node_modules/nsw-design-system/src/global/scss/settings/palette';
@import 'node_modules/nsw-design-system/src/global/scss/settings/theme';
@import 'node_modules/nsw-design-system/src/core/all';
{{/_docs-example}}
<p>Once you have installed the core library you can start importing components
as you need it. To import individual components you need to add following
snippets to your main SASS file under core libraries import:</p>
{{#>_docs-example hidden="true" open="true" code="language-scss"}}
{{/_docs-example}}
<p>Once you have installed the core library you can start importing components as you need it. To import individual components you need to add following snippets to your main SASS file under core libraries import:</p>
{{#>_docs-example hidden="true" open="true" code="language-scss"}}
// Components
@import 'node_modules/nsw-design-system/src/components/accordion/accordion';
@import 'node_modules/nsw-design-system/src/components/card/card';
@import 'node_modules/nsw-design-system/src/components/in-page-alert/in-page-alert';
{{/_docs-example}}
<h3 id="fonticon">Adding the fonts and the icons</h3>
<p>In your main html document add this line of code inside the head tag. Make sure that it's placed before the NSW Design System styles import. Or install <a href="https://www.npmjs.com/package/material-icons" target="_blank">icon</a> and <a href="https://www.npmjs.com/package/@fontsource/public-sans" target="_blank">font</a> from npm.</p>
{{#>_docs-example hidden="true" open="true" code="language-html"}}
{{/_docs-example}}


<h3 id="fonticon">Adding the fonts and the icons</h3>
<p>In your main html document add this line of code inside the head tag. Make sure that it's placed before the NSW Design System styles import. Or install <a href="https://www.npmjs.com/package/material-icons" target="_blank">icon</a> and <a href="https://www.npmjs.com/package/@fontsource/public-sans" target="_blank">font</a> from npm.</p>
{{#>_docs-example hidden="true" open="true" code="language-html"}}
<link href="https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
{{/_docs-example}}
<p>Another way is to import it in css:</p>
{{#>_docs-example hidden="true" open="true" code="language-scss"}}
{{/_docs-example}}
<p>Another way is to import it in css:</p>
{{#>_docs-example hidden="true" open="true" code="language-scss"}}
@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,400;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
{{/_docs-example}}
<h3 id="javascript">Importing javascript into your project</h3>
<p>Some 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.</p>
{{#>_docs-example hidden="true" open="true" code="language-html"}}
{{/_docs-example}}


<h3 id="javascript">Importing javascript into your project</h3>
<p>Some 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.</p>
{{#>_docs-example hidden="true" open="true" code="language-html"}}
...
<script src="path/to/main.js"> <\/script>
<script>window.NSW.initSite()<\/script>
</body>
</html>
{{/_docs-example}}
{{/_docs-example}}
<p>Depending on your project set up, you might wish to copy the file into your project from <code>node_modules</code> or add the reference to your build workflow.</p>
<p>Depending on your project set up, you might wish to copy the file into your project from <code>node_modules</code> or add the reference to your build workflow.</p>
<h3 id="cdn">Using JSDelivr CDN</h3>
<p>You can add the files to your main html document</p>
{{#>_docs-example hidden="true" open="true" code="language-html"}}
<p>You can add the files to your main html document</p>
{{#>_docs-example hidden="true" open="true" code="language-html"}}
<head>
...
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nsw-design-system@3/dist/css/main.css">
Expand All @@ -101,8 +116,22 @@ order: 1
<script src="https://cdn.jsdelivr.net/npm/nsw-design-system@3/dist/js/main.min.js"><\/script>
<script>window.NSW.initSite()<\/script>
</body>
{{/_docs-example}}
<h3 id="starter-kit">Download starter kit</h3>
<p>You can download the compiled design system assets (HTML, CSS, JavaScript) in the <a href="https://github.com/digitalnsw/nsw-design-system/blob/master/HTMLstarterkit.zip">HTMLStarterkit zip file</a> from the latest release.</p>
<h3>Getting updates</h3>
<p>To be notified when there’s a new release, you can either join the <a href="https://community.digital.nsw.gov.au/">Design System community</a> or <a href="https://github.com/digitalnsw/nsw-design-system">watch the NSW Design System Github</a></p>
{{/_docs-example}}
<h3 id="starter-kit">Download starter kit</h3>
<p>You can download the compiled design system assets (HTML, CSS, JavaScript) in the <a href="https://github.com/digitalnsw/nsw-design-system/blob/master/HTMLstarterkit.zip">HTMLStarterkit zip file</a> from the latest release.</p>
<h3 id="browser-support">Browser support</h3>
<p>NSW Design System is supported in the following browsers:</p>
<ul>
<li>Chrome (latest)</li>
<li>Safari (latest)</li>
<li>Microsoft Edge (latest)</li>
<li>Firefox (latest)</li>
</ul>
<h3 id="updates">Getting updates</h3>
<p>To be notified when there’s a new release, you can either join the <a href="https://community.digital.nsw.gov.au/">Design System community</a> or <a href="https://github.com/digitalnsw/nsw-design-system">watch the NSW Design System Github</a></p>
65 changes: 0 additions & 65 deletions src/docs/content/develop/migration.hbs
View file

This file was deleted.

0 comments on commit d1541bd

Please sign in to comment.