design system starter
1.0.0
ระบบการออกแบบของรัฐบาลออสเตรเลียได้รับการปลดประจำการเยี่ยมชมหน้าชุมชนของเราสำหรับข้อมูลเพิ่มเติม
เริ่มต้นด้วยเทมเพลตเต็มหน้าโดยใช้ระบบการออกแบบของรัฐบาลออสเตรเลีย
เรียกดูเทมเพลตเต็มหน้าโดยใช้ระบบการออกแบบของรัฐบาลออสเตรเลีย
โคลนที่เก็บนี้เพื่อสร้างสภาพแวดล้อมการพัฒนาในท้องถิ่นและเริ่มแก้ไขเทมเพลต
Starter Pack ใช้ NPM (Node Package Manager) เพื่อตั้งค่าสภาพแวดล้อมการพัฒนาในท้องถิ่นและติดตั้งส่วนประกอบระบบการออกแบบ ตัวจัดการแพ็คเกจเริ่มต้นสำหรับโหนดคือ NPM เมื่อคุณดาวน์โหลดโหนด NPM จะติดตั้งไว้ล่วงหน้า
ตรวจสอบให้แน่ใจว่าคุณติดตั้ง NPM และโหนดบนคอมพิวเตอร์ของคุณ คุณสามารถทำตามคำแนะนำ NPM หากคุณไม่แน่ใจ
ดาวน์โหลดโคลนหรือส้อมที่เก็บนี้ลงในโฟลเดอร์บนคอมพิวเตอร์ของคุณ
ในบรรทัดคำสั่งเข้าสู่โฟลเดอร์นี้และเรียกใช้ npm install สิ่งนี้จะติดตั้งการพึ่งพาที่จำเป็นสำหรับสภาพแวดล้อมการพัฒนาในท้องถิ่น
ตอนนี้คุณควรพร้อมที่จะเริ่มต้นเซิร์ฟเวอร์ในพื้นที่ของคุณโดยเรียกใช้ npm run watch สิ่งนี้จะดูการเปลี่ยนแปลงบนไฟล์ *.scss สร้างไฟล์ *.css ใหม่และรีเฟรชเบราว์เซอร์
สร้างภาพ:
$ 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 แพนเค้กจะตรวจสอบว่าการพึ่งพาของคุณทำงานร่วมกันและสร้าง 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 สินทรัพย์เพื่อสร้างหน้า เราตั้งชื่อ docs โฟลเดอร์เนื่องจากหน้า GitHub ใช้โฟลเดอร์ DOCS เพื่อโฮสต์เว็บไซต์คงที่
⬆กลับไปด้านบน
Node.js 8 หรือสูงกว่า โดยเฉพาะอย่างยิ่งรุ่น LTS ปัจจุบันหมายเหตุ: หากคุณกำลังพัฒนาบน Windows โปรดตรวจสอบให้แน่ใจว่าการกำหนดค่า
npmในเครื่องของคุณใช้เชลล์ที่รองรับการใช้งานแบบโฟลเดอร์ (เช่นa/unix/pathมากกว่าa\windows\path)
⬆กลับไปด้านบน
เพื่อมีส่วนร่วมในการเริ่มต้นระบบการออกแบบของรัฐบาลออสเตรเลีย:
⬆กลับไปด้านบน
ลิขสิทธิ์ (c) เครือจักรภพแห่งออสเตรเลีย ยกเว้นเสื้อคลุมแขนของเครือจักรภพและที่ระบุไว้เป็นอย่างอื่นงานนี้ได้รับใบอนุญาตภายใต้ใบอนุญาต MIT
⬆กลับไปด้านบน
