วันนี้มาแนะนำ CSS framework สวยๆครับ เป็นอีกทางเลือกหนึ่งที่น่าใช้นอกเหนือจากเจ้าดังๆ นะ
1. PAPERCSS
รายละเอียด: http://bit.ly/2v4pQth
2. Shoelace
รายละเอียด: http://bit.ly/2LxAAuo
3. Picnic CSS
รายละเอียด: http://bit.ly/2Op7ZFf
4. Base
รายละเอียด: http://bit.ly/2LW4ww9
.
ลองดูนะครับ การใช้งานก็ไม่ต่างจากพวก Bootstrap หรือ Foundation ครับ
1. Tabler ตัวนี้สวยดี สร้างด้วย Bootstrap 4 มีหน้าเว็บ Demo ให้เลือกใช้เยอะเลย และคู่มือละเอียดดีมาก
รายละเอียด: https://tabler.github.io/
demo: http://bit.ly/2kX7OTX
.
2. Sing App Lite สร้างด้วย Bootstrap 4 เหมือนกัน แต่อาจไม่ได้มีเยอะเท่ากับตัวแรก
รายละเอียด: http://bit.ly/2JnLXQm
demo: http://bit.ly/2M4tfiv
.
ชอบตัวไหนก็ลองดูนะครับ
แนะนำ LUXBAR ครับ ไว้ทำเมนูสวยๆ (nav bar) นอกจากจะ custom ได้หลายแบบแล้ว ยังเป็น Responsive อีกด้วย!
รายละเอียด: https://goo.gl/RAeoah
—
โค้ชเอก
แนะนำเว็บ Coverr.co ครับ ไว้ทำ background แบบวิดีโอให้กับหน้าเว็บของเรา วิดีโอก็ฟรี แถมมีตัวอย่างโค้ดให้เราแปะใช้งานได้เลย ลองดูนะครับ 
รายละเอียด: https://goo.gl/ptylPJ
—
โค้ชเอก
แนะนำ summernote ครับ เป็น WYSIWYG editor ที่ใช้ง่ายอีกตัว รองรับ Bootstrap 3 และมี plugin ให้เลือกใช้เยอะเลย
รายละเอียด: http://summernote.org/
—
โค้ชเอก
แนะนำเว็บไว้ gen Favicon ครับ รองรับทุก browsers และที่สำคัญรองรับทุก platforms!
สำหรับคนที่กำลังศึกษาหรือกำลังเขียน Progressive Web Apps อยู่ ตัวนี้แหละเหมาะมากสำหรับไว้ทำไอคอนครับ
รายละเอียด: https://goo.gl/scNO7k
โค้ชเอก
วันนี้มาแนะนำ CSSPIN ครับ เป็น CSS สวยๆ ไว้แสดงสถานะระหว่างรอโหลด (Loading) ไม่ต้องเขียน js แค่เขียนโค้ด html บรรทัดเดียวก็ใช้ได้แล้ว
รายละเอียด: https://webkul.github.io/csspin/
—
โค้ชเอก
สำหรับคนที่เขียน CSS แล้วไม่เข้าใจ ไม่เห็นภาพว่าโค้ดที่เขียนจะมีหน้าตาเป็นแบบไหน แนะนำให้ใช้เว็บนี้นะครับ เค้าจะมีภาพประกอบให้เราดูด้วย
รายละเอียด: http://cssreference.io/
Bootstrap 4 beta มาแล้ว!! มาอ่านสรุปสั้นๆเกี่ยวกับ Bootstrap 4 beta กันครับว่ามีอะไรใหม่ๆ หรือแตกต่างจากเวอร์ชัน 3 ยังไงบ้าง
.
1. เปลี่ยนจากใช้ Less มาเป็น Sass
2. ไม่มี thumbnails, wells และ panels แล้วนะครับ แต่จะมี Cards component ให้ใช้แทน (เขียนด้วย flexbox)
3. มีการใช้ HTML resets ชื่อว่า Reboot (cross-browser rendering) โดย forked จาก normalize.css อีกที
4. ไม่รองรับ IE8,IE9 แล้วนะครับ ถ้าใครจะใช้ก็ให้ไปใช้ Bootstrap เวอร์ชัน 3 แทน
5. สำหรับ javascript plugin เขียนใหม่ทั้งหมด ด้วย JavaScript ES6 ครับ
6. ใช้ Popper.js สำหรับช่วยทำ tooltips, popovers และ dropdowns ต่างๆ
7. build tools ตัวใหม่ ใช้ npm scripts แทน Grunt ครับ
8. เปลี่ยนขนาดฟอนต์แบบ global จาก 14px เป็น 16px
9. ไม่มี Glyphicons ติดมาให้แล้ว ถ้าอยากใช้ก็ให้นำเข้ามาใช้เอง
10. เปลี่ยน คลาสของปุ่ม จาก .btn-default ไปเป็น .btn-secondary
11. มีคลาส .table-inverse เพิ่มเข้ามาสำหรับตกแต่งตาราง
12. รองรับความกว้างของ .container 5 ขนาด (เพิ่มจาก bootstrap 3) ดังนี้
– Extra small
– Small
– Medium
– Large
– Extra large
13. ถ้าอยากได้ heading ที่ใหญ่และเด่นกว่าปกติ สามารถใช้ class display-* ได้ มี 4 ขนาด ดังนี้
<h1 class=”display-1″>Display 1</h1>
<h1 class=”display-2″>Display 2</h1>
<h1 class=”display-3″>Display 3</h1>
<h1 class=”display-4″>Display 4</h1>
14. การทำให้รูปภาพให้เป็น responsive ให้ใช้คลาส class=”img-fluid” (เดิมเป็น .img-responsive) ตัวอย่างเช่น
<img src=”myimage.jpg” class=”img-fluid” alt=”Responsive Image”>
เว็บของ Bootstrap 4 beta ถูกออกแบบใหม่เลยนะครับ เข้าไปดูได้ที่ : https://getbootstrap.com/
ส่วนใครอยากปรับจากเวอร์ชันเป็นตัวนี้ ก็ดูการเปลี่ยนแปลงต่างๆได้ที่ : https://getbootstrap.com/docs/4.0/migration/
.
—-
โค้ชเอก
Coding Mentor