design system starter
1.0.0
オーストラリア政府の設計システムは廃止されており、詳細についてはコミュニティページをご覧ください
オーストラリア政府の設計システムを使用して、完全なページテンプレートを始めましょう。
オーストラリア政府の設計システムを使用して、完全なページテンプレートを閲覧します。
このリポジトリをクローンして、ローカル開発環境を作成し、テンプレートの変更を開始します。
スターターパックは、NPM（ノードパッケージマネージャー）を使用して、ローカル開発環境をセットアップし、設計システムコンポーネントをインストールします。ノードのデフォルトのパッケージマネージャーはnpmです。ノードをダウンロードすると、NPMがプリインストールされます。
コンピューターにNPMとノードがインストールされていることを確認してください。不明な場合は、NPMの指示に従うことができます。
このリポジトリをコンピューターのフォルダーにダウンロード、クローン、またはフォークします。
コマンドラインでこのフォルダーに移動し、 npm install実行します。これにより、ローカル開発環境に必要な依存関係がインストールされます。
これで、 npm run watchを実行して、ローカルサーバーを開始する準備ができている必要があります。これにより、 *.scssファイルの変更が監視され、new *.cssファイルの作成、ブラウザの更新が表示されます。
画像を作成します：
$ docker build -t ds-starter .次に、画像を実行してボリュームをマップします。注：$ PWDはWindowsではサポートされていません。
$ docker run --rm --volume= " $PWD :/app " -p 3000:3000 -it ds-startertopに戻ります
ディレクトリには、 package.jsonファイルがあります。このファイルはnpm installを実行するときにインストールする依存関係を指します。 npm install実行すると、すべての設計システムコンポーネントと、ローカル開発環境に関連する追加のパッケージをインストールします。
npm installパンケーキが実行された後、これにより依存関係が連携してdocs/js/script.min.jsおよびsrc/sass/_uikit.scssが作成されることが確認されます。
src/sass/main.scssは、生成された_uikit.scssをインポートします。 _uikit.scssファイルが生成されたときにタッチしてはいけませんが、 main.scssファイルを自由に変更してください。
ユーザーがnpm run buildまたはnpm run watchを実行すると、ノードサスを使用して、 src/sass/main.scssファイルをdocs/css/main.cssファイルに変換します。 Autoprefixerは、コンピレーション後に実行され、 main.cssファイルにベンダープレフィックスを追加します。
これがどのように設定されているかについては、
package.jsonスクリプトを参照してください
このセットアップにより、 main.scssファイルから設計システムファイルの変数を変更できます。独自の配色を追加したり、タイポグラフィと間隔を変更したりできます。コンポーネントまたは追加のコンポーネントへの微調整は、 _uikit.scssのインポート以下に追加する必要があります。これらのファイルの変更はブラウザに挿入されるため、ブラウザの同期のおかげで更新する必要さえありません。
内のdocsフォルダーには、Webサイトを公開するために必要なすべてのファイルが含まれています。 index.htmlファイルは、 main.cssファイルとscript.min.jsアセットを参照して、ページを生成します。 GitHubページはdocsフォルダーを使用して静的Webサイトをホストするため、フォルダーdocsに名前を付けます。
topに戻ります
Node.js 8以降、できれば現在のLTSバージョン。注： Windowsで開発している場合は、ローカル
npm構成が、フォルダーのようなUnixのパス（すなわちa\windows\pathではなくa/unix/path）をサポートするシェルを使用していることを確認してください。
topに戻ります
オーストラリア政府の設計システムスターターパックに貢献するには：
topに戻ります
著作権（c）オーストラリア連邦。 Commonwealth Coat of Armsとその他の点では、この作業はMITライセンスの下でライセンスされています。
topに戻ります
