วันนี้มาแนะนำ CSS framework สวยๆครับ

วันนี้มาแนะนำ 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 ครับ

แนะนำ Admin Dashboard ฟรี มาใหม่สวยๆ ครับ

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

.
ชอบตัวไหนก็ลองดูนะครับ

แนะนำเว็บ Coverr.co ครับ

แนะนำเว็บ Coverr.co ครับ ไว้ทำ background แบบวิดีโอให้กับหน้าเว็บของเรา วิดีโอก็ฟรี แถมมีตัวอย่างโค้ดให้เราแปะใช้งานได้เลย ลองดูนะครับ 

รายละเอียด: https://goo.gl/ptylPJ


โค้ชเอก

แนะนำเว็บไว้ gen Favicon ครับ

แนะนำเว็บไว้ gen Favicon ครับ รองรับทุก browsers และที่สำคัญรองรับทุก platforms!

สำหรับคนที่กำลังศึกษาหรือกำลังเขียน Progressive Web Apps อยู่ ตัวนี้แหละเหมาะมากสำหรับไว้ทำไอคอนครับ 

รายละเอียด: https://goo.gl/scNO7k

โค้ชเอก

แนะนำ CSSPIN

วันนี้มาแนะนำ CSSPIN ครับ เป็น CSS สวยๆ ไว้แสดงสถานะระหว่างรอโหลด (Loading) ไม่ต้องเขียน js แค่เขียนโค้ด html บรรทัดเดียวก็ใช้ได้แล้ว 

รายละเอียด: https://webkul.github.io/csspin/


โค้ชเอก

แนะนำเว็บรวมคำสั่ง CSS

สำหรับคนที่เขียน CSS แล้วไม่เข้าใจ ไม่เห็นภาพว่าโค้ดที่เขียนจะมีหน้าตาเป็นแบบไหน แนะนำให้ใช้เว็บนี้นะครับ เค้าจะมีภาพประกอบให้เราดูด้วย 

รายละเอียด: http://cssreference.io/

Bootstrap 4 beta มาแล้ว!! สรุปสั้นๆ 14 ข้อ เกี่ยวกับ Bootstrap 4 beta ครับ

bs4

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