[Bulma] css framework ที่จิ๋วแต่แจ่มมาก

บล็อกนี้ก็นานๆ เขียนทีเหมือนเดิมครับ 555 คราวนี้กลับมาวันฮาโลวีนเลย โดยวันนี้ผมจะมาแนะ css framework ที่ชื่อว่า Bulma กันครับ โดยเจ้านี้มีขนาดเพียง 118 kb เท่านั้นเอง โดยตัวมันจะเป็นเพียงแค่ css ที่ไม่มี javascrip บรรจุมาให้เลย ก็เลยทำให้มันมีขนาดที่เล็กได้ ซึ่งเหมาะกับคนที่ต้องการเขียน javascrip เอง

โดยเจ้่า Bulma นี้ เขียนแบบ Sass นะครับ (ขอติดไว้ก่อน แล้วจะมาอธิบายคราวหน้านะครับ) ซึ่งเจ้าจะจะช่วยให้การเขียน css ง่ายขึ้นมากมายเลยนั้นเอง พูดนอกเรื่องไปไกลละ ลองมาติดตั้งกันเลยดีกว่าครับ

วิธีติดตั้งมี 3 แบบด้วยกันคือ
1. ผ่าน NPM (แนะนำวิธีนี้)

npm install bulma

2. ผ่าน CDN

https://cdnjs.com/libraries/bulma

3. ดาวโหลดไปติดตั้งแอง

https://github.com/jgthms/bulma/tree/master/css

*ถ้าคุณต้องการใช้ Icon โดย Bulma ละก็อย่าลืมใส่ Font Awesome ด้วยนะครับ

<link rel=“stylesheet” href=https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css&#8221;>

โดย Bulma  เองนี้ จะรองรับการย่อ/ ขยาย หน้าจอ กันได้ 4 แบบคือ

  1. mobile จะมีขนาดถึง 768px
  2. tablet จะเริ่มที่ขนาด 769px
  3. desktop จะเริ่มที่ขนาด 769px
  4. widescreen จะเริ่มที่ขนาด 1180px
Responsiveness

และเจ้า Bluma นี้มี elements ให้เล่นหลายอย่างมากเช่น ตามภาพด้านล่าง

Button
Notification
Progressn
Table
Tag

ที่ผมยกตัวอย่างมาก็ยังมีแค่ไม่กี่อย่างเท่านั้นเอง ถ้าทุกคนสนใจก็ลองเข้าดูต่อได้ที่ http://bulma.io/ เว็บเจ้าของคนทำได้เลยครับ ยังไงก็ลองเอาไปเล่นๆ กันดูนะครับ

Advertisements

ใส่ความเห็น

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / เปลี่ยนแปลง )

Twitter picture

You are commenting using your Twitter account. Log Out / เปลี่ยนแปลง )

Facebook photo

You are commenting using your Facebook account. Log Out / เปลี่ยนแปลง )

Google+ photo

You are commenting using your Google+ account. Log Out / เปลี่ยนแปลง )

Connecting to %s