design system starter

호주 정부 설계 시스템이 해체되었습니다. 자세한 내용은 커뮤니티 페이지를 방문하십시오.

호주 정부 설계 시스템 - 스타터

호주 정부 설계 시스템을 사용하여 전체 페이지 템플릿으로 시작하십시오.

내용물

• 템플릿
• 개발 환경
• 시작하세요
• 작동 방식
• 전제 조건
• 기여
• 특허

---

템플릿

호주 정부 설계 시스템을 사용하여 전체 페이지 템플릿을 찾아보십시오.

• 홈페이지
• 콘텐츠 페이지
• 양식 페이지

개발 환경

이 저장소를 복제하여 로컬 개발 환경을 만들고 템플릿 수정을 시작하십시오.

• 시작하세요
• 작동 방식
• 기여
• 특허

---

시작하세요

스타터 팩은 NPM (노드 패키지 관리자)을 사용하여 로컬 개발 환경을 설정하고 설계 시스템 구성 요소를 설치합니다. 노드의 기본 패키지 관리자는 NPM입니다. Node를 다운로드하면 NPM이 사전 설치됩니다.

1. 컴퓨터에 NPM과 노드가 설치되어 있는지 확인하십시오. 확실하지 않은 경우 NPM 지침을 따를 수 있습니다.

2. 이 저장소를 컴퓨터의 폴더로 다운로드, 클론 또는 포크로 다운로드하십시오.

3. 명령 줄 에서이 폴더로 이동하여 npm install 실행하십시오. 이것은 지역 개발 환경에 필요한 종속성을 설치합니다.

4. 이제 npm run watch 실행하여 로컬 서버를 시작할 준비가되어 있어야합니다. *.scss 파일의 변경 사항을 감시하고 새 *.css 파일을 생성하고 브라우저를 새로 고침 할 수 있습니다.

Docker 사용

이미지 구축 :

$ docker build -t ds-starter .

그런 다음 이미지를 실행하고 볼륨을 매핑하십시오. 참고 : $ PWD는 Windows에서 지원되지 않습니다.

$ docker run --rm --volume= " $PWD :/app " -p 3000:3000 -it ds-starter

⬆ 위로 돌아갑니다

---

작동 방식

디렉토리에는 package.json 파일이 있습니다. 이 파일은 npm install 실행할 때 설치하는 데 종속성을 가리 킵니다. npm install 실행하면 모든 설계 시스템 구성 요소 및 지역 개발 환경과 관련된 추가 패키지를 설치합니다.

npm install Pancake가 실행되면 종속성이 함께 작동하는지 확인하고 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 실행하면 Node-Sass를 사용하여 src/sass/main.scss 파일을 docs/css/main.css 파일로 변환합니다. AutoPrefixer는 컴파일 후 main.css 파일에 공급 업체 접두사를 추가하기 위해 실행됩니다.

이것이 설정된 방법에 대해서는 package.json 스크립트를 참조하십시오.

이 설정을 사용하면 main.scss 파일에서 설계 시스템 파일의 변수를 수정할 수 있습니다. 자신의 색 구성표를 추가하거나 타이포그래피 및 간격을 변경할 수 있습니다. 구성 요소 또는 추가 구성 요소에 대한 조정은 _uikit.scss 의 가져 오기 아래에 추가되어야합니다. 이 파일의 변경 사항은 브라우저에 주입되므로 브라우저 동기화 덕분에 새로 고침 할 필요조차 없습니다.

이 docs 폴더에는 웹 사이트를 게시하는 데 필요한 모든 파일이 포함되어 있습니다. index.html 파일은 main.css 파일 및 script.min.js 자산을 참조하여 페이지를 생성합니다. github 페이지가 문서 폴더를 사용하여 정적 웹 사이트를 호스팅하기 때문에 폴더 docs 이름을 지정합니다.

⬆ 위로 돌아갑니다

---

전제 조건

• Node.js 8 이상 , 바람직하게는 현재 LTS 버전입니다.

참고 : Windows에서 개발중인 경우 로컬 npm 구성이 폴더 경로와 같은 Unix를 지원하는 쉘을 사용하고 있는지 확인하십시오 (예 : a/unix/path a\windows\path ).

⬆ 위로 돌아갑니다

---

기여

호주 정부 설계 시스템 스타터 팩에 기여하기 위해 :

1. 프로젝트를 포크하고 로컬로 복제하십시오.
2. 완료 될 작업을위한 새 지점을 만듭니다.
3. 작업을 완료하고 여기에 가이드 라인에 따라 최선의 능력으로 테스트하십시오.
4. 작업이 완료되면 좋은 커밋 메시지를 작성하십시오.
5. 작업을 GitHub로 밀고 새 풀 요청을 작성하십시오.
6. 모든 코드 검토 피드백에 응답하십시오.

⬆ 위로 돌아갑니다

---

특허

저작권 (C) 호주 연방. 연방 무기와 달리 언급 된 곳을 제외 하고이 작업은 MIT 라이센스에 따라 라이센스가 부여됩니다.

⬆ 위로 돌아갑니다

};