Tutorial

Getting Started with Material Design Lite (MDL)

By Arnon Puitrakul - 15 กรกฎาคม 2015

Getting Started with Material Design Lite (MDL)

ย้อนกลับไปที่งาน Google I/O 2014 Google ได้เปิดตัว Guidelines สำหรับการ Design App และ Web ต่างๆ นอกจากนั้นยังเปิดตัวโครงการอย่าง Polymer ที่เปลี่ยนแปลงวิธีการเขียนเว็บของเรา ไปเยอะอยู่เหมือนกัน (เอาจริงๆ Polymer ผมก็ชอบนะ) แต่ตอนนี้ มาแล้ว Web Component บน Paper Element ใน Web Polymer ถูกเอามาลงใน Version CSS, HTML และ Javascript ซึ่งทาง Google เรียกมันว่า Material Design Lite หรือ MDL นั่นเอง
ถ้ายังนึกไม่ออกว่ามันคืออะไร ให้นึงถึง Front-end Framework อย่าง Bootstrap ที่เราชอบใช้กัน แต่ต่างกันตรงที่ Element ทั้งหมดจะถูกถอด Design มาจาก Paper Element ใน Web Polymer นั่นเอง
แต่ที่น่าสะพรึ่งคือ ขนาดของมัน เมื่อโหลดผ่าน CDN เพียงแค่ 27 kb เท่านั้นเอง และยังสามารถใช้กับ Web Browser ใหม่ๆ ได้หมดทุกตัว ยกเว้น IE9 นอกจากที่ขนาดจะเล็ก และรองรับ Web Browser ใหม่ๆได้แล้ว ยัง Install และใช้งานได้ง่ายมากๆ ยิ่งถ้าใครเคยใช้พวก Foudation หรือไม่ก็ Bootstrap มาแล้ว ก็คงจะไม่ใช้ปัญหาสักเท่าไหร่
นอกจากนี้ยังมี Template มาตราฐานหลายๆ อย่างให้เราได้ดูเป็นตัวอย่างอีกด้วย สามารถเข้าไปดูได้ที่ หน้า template ได้เลย

MDLGetting_started5 ![MDLGetting_started)

หลังจากที่ได้บรรยายสรรพคุณ ไปเยอะแล้ว เราลองเล่นกันเลยดีกว่า ในตอนนี้ เราจะลองมาสร้าง หน้า Home เล่นๆกันดีกว่า
ก่อนอื่น เราก็ต้องไป Import File ของตัว MDL เข้ามาก่อน ในที่นี้ขอใช้ผ่าน CDN ล่ะกัน (แต่ใน Github จะโหลดมาเป็น Local)

<link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
<script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

หลังจากที่เรา Import File ที่จำเป็นเข้ามาแล้ว ถัดไปเราจะทำการสร้าง Navbar ด้านบนกัน ถ้าเราเข้าไปดูใน Document จะเห็นกว่ามี Navbar หลายแบบมาก แต่ในที่นี้เราจะเลือกแบบ Fixed-header แต่ก่อนจะวาง Navbar เราจะต้องวาง Container เหมือนกับตัวหุ้มหน้าเว็บเราก่อน

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

</div>

ทีนี้ล่ะ เราก็จะได้มาสร้าง Navbar กันจริงๆ ล่ะ เราจะต้องใช้ Header Tag เข้ามาช่วยในการสร้างด้วย มาเติมกันเลย

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
   <header class="mdl-layout__header">

   </header>
</div>

ถ้าลองเปิดหน้าที่เราเขียนตอนนี้ก็จะมีแต่จะมาเพิ่ม Link กับ Title ใน Navbar กัน

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
   <header class="mdl-layout__header">
     <div class="mdl-layout__header-row">
        <!-- Title -->
           <span class="mdl-layout-title">Title</span>
        <!-- Spacer -->
           <div class="mdl-layout-spacer"></div>
        <!-- Nav <- Hide in smaller screen -->
           <nav class="mdl-navigation mdl-layout--large-screen-only">
              <a href="" class="mdl-navigation__link">Home</a>
              <a href="" class="mdl-navigation__link">Tutorial</a>
              <a href="" class="mdl-navigation__link">about:me</a>
           </nav>
      </div>
   </header>
</div>

เมื่อกี้ เราก็ได้เพิ่ม Link และ Title ถัดไปเราจะทำ Drawer กัน

 <!-- Drawer Layout -->
 <div class="mdl-layout__drawer">
    <span class="mdl-layout-title">Arnon Puitrakul</span>
    <nav class="mdl-navigation">
       <a href="" class="mdl-navigation__link">Home</a>
       <a href="" class="mdl-navigation__link">Tutorial</a>
       <a href="" class="mdl-navigation__link">about:me</a>
    </nav>
 </div>

ในการสร้าง Drawer เราก็ต้องสร้าวให้มันอยู่ใน Div Tag เข้าไป และถัดไป เราจะวางที่อยู่ให้กับ Content ในหน้าของเรา โดยเรียก Class mdl-layout__content

 <!-- Main Content -->
 <main class="mdl-layout__content">
    <div class="page-content">
       <!-- Page Content Goes Here -->
       <h3>Hello World</h3>
     </div>
 </main>

โดยเราจะเรียกผ่าน Tag Main และกำหนด Class เป็น mdl-layout__content และสุดท้าย เราจะมาสร้าง Footer กัน

 <!-- Footer -->
 <footer class="mdl-mini-footer">
    <div class="mdl-mini-footer--left-section"> <div class="mdl-logo">Copyright 2014-20ๅ5 Arnon Puitrakul all right reserved.</div></div>

    <div class="mdl-mini-footer--right-section"> <div class="mdl-logo">Getting Started with MDL by @arnondora</div></div>
 </footer>

เท่านี้ เราก็จะได้ หน้าเว็บเริ่มต้นง่ายๆ กับ MDL กันแล้ว ส่วน Code ที่เขียนในนี้สามารถเข้าไปดูได้ใน Github ได้เลย
จะเห็นได้ว่า MDL ทำให้เราสามารถสร้างหน้าเว็บที่สวยงาม ตาม Material Design ได้ง่ายขึ้นเยอะมากๆ MDL จะเหมาะสำหรับเว็บที่ ไม่ต้องการรัน Web Polymer เต็มๆ หรือแค่ต้องการ Design จาก Paper Element ใน Web Polymer ก็ได้ สามารถดูข้อมูลเพิ่มเติมได้ที่ หน้าเว็บของ MDL ได้เลย
เดี๋ยวก็จะเขียน Theme อีก รอบนี้จะเอา MDL มาใช้นี่แหละ รอดูกันได้เลย เผื่อจะเอามาแจกกัน

Read Next...

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

จัดการข้อมูลบน Pandas ยังไงให้เร็ว 1000x ด้วย Vectorisation

เวลาเราทำงานกับข้อมูลอย่าง Pandas DataFrame หนึ่งในงานที่เราเขียนลงไปให้มันทำคือ การ Apply Function เข้าไป ถ้าข้อมูลมีขนาดเล็ก มันไม่มีปัญหาเท่าไหร่ แต่ถ้าข้อมูลของเราใหญ่ มันอีกเรื่องเลย ถ้าเราจะเขียนให้เร็วที่สุด เราจะทำได้โดยวิธีใดบ้าง วันนี้เรามาดูกัน...

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

ปั่นความเร็ว Python Script เกือบ 700 เท่าด้วย JIT บน Numba

Python เป็นภาษาที่เราใช้งานกันเยอะมาก ๆ เพราะความยืดหยุ่นของมัน แต่ปัญหาของมันก็เกิดจากข้อดีของมันนี่แหละ ทำให้เมื่อเราต้องการ Performance แต่ถ้าเราจะบอกว่า เราสามารถทำได้ดีทั้งคู่เลยละ จะเป็นยังไง เราขอแนะนำ Numba ที่ใช้งาน JIT บอกเลยว่า เร็วขึ้นแบบ 700 เท่าตอนที่ทดลองกันเลย...

Humanise the Number in Python with "Humanize"

Humanise the Number in Python with "Humanize"

หลายวันก่อน เราทำงานแล้วเราต้องการทำงานกับตัวเลขเพื่อให้มันอ่านได้ง่ายขึ้น จะมานั่งเขียนเองก็เสียเวลา เลยไปนั่งหา Library มาใช้ จนไปเจอ Humanize วันนี้เลยจะเอามาเล่าให้อ่านกันว่า มันทำอะไรได้ แล้วมันล่นเวลาการทำงานของเราได้ยังไง...

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

ทำไม 0.3 + 0.6 ถึงได้ 0.8999999 กับปัญหา Floating Point Approximation

การทำงานกับตัวเลขทศนิยมบนคอมพิวเตอร์มันมีความลับซ่อนอยู่ เราอาจจะเคยเจอเคสที่ เอา 0.3 + 0.6 แล้วมันได้ 0.899 ซ้ำไปเรื่อย ๆ ไม่ได้ 0.9 เพราะคอมพิวเตอร์ไม่ได้มองระบบทศนิยมเหมือนกับคนนั่นเอง บางตัวมันไม่สามารถเก็บได้ เลยจำเป็นจะต้องประมาณเอา เราเลยเรียกว่า Floating Point Approximation...