tools tutorial - มีอะไรใน Material Design Lite บ้าง?

|


hi! จริงๆแล้วบทความนี้เกิดจากความขี้เกียจเช่นเคย Y.Y ขี้เกียจทำงาน เห็น google ออก material design lite (mdl) มาได้สักพักแล้ว จริงๆแอบกดเข้าไปเล่นตั้งแต่แรกๆแต่ไม่ได้มีเวลามานั่งเขียนเป็นบทความเป็นอะไร :S วันนี้อู้งานเลยมาลองๆเขียนเป็นบทความสั้นๆแนะนำเกี่ยวกับเจ้า material design lite

 

แน่นอนว่าคำถามแรกในใจ มันต่าง lite ยังไง มันต่างยังไงกับ polymer ??

ก็คือเจ้า mdl เนี่ยมันบอกว่าตัวมันเองเนี่ยทำให้เว็บเนี่ยให้ความรู้สึกสัมผัสเป็น meterial design โดยไม่อิง javascript framework ใดๆ และ ปรับให้เหมาะสมกับทุกๆอุปกรณ์ (อ่านมา ไม่รู้แปลถูกไหม 555 เขียนอยู่หน้าเว็บจริงๆนะไปดูๆ)  สรุป!! อารมณ์มันเหมือน bootstrap นั่นแหละ จริงๆอาจจะยังไม่เคลียร ลองดูใน FAQ  ก็ได้ครับ ซึ่งมีตอบคำถามด้วยว่า google ได้ใช้ mdl บน production บ้างรึยัง (มาเห็นตอนเขียนอะไรเสร็จหมดแล้วนั่งมโนไปเองตั้งนาน)

 

มาดูข้อจำกัดของมันก่อนว่ารองรับ browser ไหนบ้าง (ข้อมูลจาก github)

Screen Shot 2558-08-01 at 6.20.55 PM

โอ้ ie9 คุณได้ไปต่อ!! โอเคดูเผินๆ ก็ไม่มีอะไรน่าเป็นห่วง

 

จะเริ่มต้นติดตั้งกันยังไง ??

โธ่ๆๆ มันง่ายมากถ้าเราดูจาก getting started ในเว็บก็มีสอนหมดมีวิธีลงได้หลากหลายแบบมากเอาที่สบายใจเลยครับแต่ถ้าให้เร็วที่สุดลงแบบ hosted ก็คือเอาลิ้งที่เค้ามีให้ไปแปะเท่านั้นละ ก็เริ่มต้นเขียนกันได้เลยครับ

 

ไปไม่ถูกเลยจะเริ่มยังไง ??

โอเคมาถึงจุดๆยังไม่รู้จะเริ่มยังไงใช่ไหมลองดูตามใน doc component หรือ layout ต่างๆเค้ามีอะไรให้เราใช้บ้าง

Screen Shot 2558-08-01 at 6.29.37 PM

จะเห็นว่ามีเยอะแยะมากมายให้เราใช้เลย แต่แนะนำว่าให้ดูส่วนของ layout ก่อนก็ได้ครับเพราะว่ามันจะเริ่มโครงได้ง่ายแล้วจะอธิบายเรื่องของ grid ในส่วนนี้ด้วยซึ่งจำเป็นต้องรู้กันจะเริ่มเขียนนะ !! แต่ถ้าหากเรายังไม่เกตจะเอาอะไรมาใช้ยังไงเราอยากเห็นว่ามันทำอะไรแนวไหนได้บ้างก็ลองดูตัวอย่าง template ที่เค้ามีให้ ที่นี่ สามารถโหลดไปลองเล่นหรือดูวิธีเขียนได้

 

มีแค่นี้ใช่ปะ??

โอ้ยังๆทิ้งท้ายอีกนิดกับเครื่องมือที่ google ให้เรามา คือเครื่องมือเลือก customize ธีมสี ซึ่งเราสามารถกำหนดสีและนำไปใช้ได้ก็แลดูสะดวกดีฮะๆ อีกอย่างจะออกแบบ ui/ux อะไรเนี่ยก็ดู guideline เค้าสักหน่อยนะครับว่าเค้าวางอะไรยังไง Structure layout guideline

Screen Shot 2558-08-01 at 6.33.13 PM

 

โอเคคร่าวๆกับ material design lite ก็น่าจะประมาณนี้ครับหวังว่าจะช่วยย่นเวลามานั่งงมเองได้ไม่มากก็น้อยนะฮะๆ

 

Share Button

Comments

comments