Boomerang UI Kit

Boomerang UI Kit เพิ่มความสดใหม่ให้กับ Bootstrap 4

Boomerang UI Kit 🎵🎵🎶 “ก็เพราะว่าชั้นนั้นเป็น อย่างบูมเมอแรง ขว้างไปยิ่งแรง ยิ่งกลับมาเร็ว… “🎶🎵🎵 เพลงนี้เป็นเพลงฮิตเมื่อตอนสมัยผมเด็กๆ….555

Boomerang UI Kit เสริมความสดใสให้กับ Bootstrap 4

Boomerang UI Kit

UI Kit

วันนี้มี UI Kit เจ้าหนึ่งมาฝากกันครับ ชื่อมีความสัมพันธ์กัน กับเพลงนี้มาก จึงเริ่มต้นด้วยการร้องเพลง เก่าๆให้ฟัง 555 ตัวนี้มีความน่าสนใจตรงที่ พัฒนารากฐานมาจาก Bootstrap 4 สุดยอด CSS Framework ระดับโลก ^^

มันไม่ใช่ CSS Framework นะครับ แต่มันเป็น UI Kit ที่เอาตัว CSS Framework มาออกแบบ มา Design ให้สวยงาม พร้อมใช้งาน

ซึ่งแต่ละตัวก็ยอมรับว่า สวยงามดีครับ ทั้ง Typography ที่มีทั้ง Regular, Semi-bold, Bold

Typo

Typo

หรือจะเป็นเรื่องราวของสีสันอย่าง Color palette ที่หยิบสีมาปรับแต่งใหม่ใน Sass ได้อย่างสวยงาม สดใส

Color

Color

ส่วนในกลุ่มของ Form ก็มีทั้ง ปุ่มต่างๆ ที่ไล่สี และยังมี Micro Animated ติดมาด้วย หรือจะเป็น Modal ตัวใหม่ที่สดใส น่าใช้ขึ้นมาก

Form elements เริ่มต้นกันที่ เหล่า Input box ต่างๆ

input

input

หรือจะเป็น ปุ่มที่หลายคน อาจจะมองข้าม แต่แสนสำคัญ ในเวลาทำเว็บจริงๆ อย่าง Check box

Checkbox

Checkbox

แต่โดยส่วนตัว สนใจกับ Modal ที่ทำออกมา look ค่อนข้างดูดี ดูแพง พอสมควร ดูแล้วค่อยคุ้มค่าหน่อย

modal pop up

modal pop up

เรื่องหน้าตา เอามาให้ดูกัน ประมาณนี้ก่อน มาดูเรื่องการทำงาน การใช้งาน กันบ้าง ว่าเราต้องทำอย่างไร ถึงจะดึงความสามารถ และหน้าตาแบบนี้ ออกมาใช้งาน ใน Project ของเราได้

ก่อนอื่นเลย คือเราจำเป็น จะต้องมี การเรียก Bootstrap 4 เข้ามาก่อนทั้งหมด ทั้งหมดหมายถึง ทั้ง jQuery และ popper js ที่ bootstrap เค้าจำเป็น ต้องใช้นั้นแหละ แต่ให้เอา CSS ของทาง UI Kit ตัวนี้ ไปวางไว้ด้านบน ก่อนที่จะเรียก bootstrap นั้นเอง

วิธีการใช้งาน เริ่มต้นกันที่ กัน Setting Theme กันก่อน

Starter template

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<title>Hello World</title>

<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:400,600,700,800|Roboto:400,500,700" rel="stylesheet">

<!-- Boomerang CSS (including Bootstrap) -->
<link type="text/css" href="/assets/css/theme.css" rel="stylesheet">
</head>
<body>
<main class="main">...</main>

<!-- Bootstrap JS -->
<script src="/assets/vendor/jquery/jquery.min.js"></script>
<script src="/assets/vendor/popper/popper.min.js"></script>
<script src="/assets/vendor/bootstrap/js/bootstrap.min.js"></script>

<!-- FontAwesome 5 -->
<script src="assets/vendor/fontawesome/js/fontawesome-all.min.js"></script>

<!-- Boomerang JS -->
<script src="/assets/js/theme.js"></script>
</body>
</html>

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

ส่วนใครเป็นนัก ตกแต่ง นักประดิษฐ์ นักงัดแงะ และเขียน Sass เป็นแล้ว แนะนำให้ไป customized styles ต่างๆกันได้เลยเต็มที่ เพราะมีไฟล์ Sass ติดมาให้ด้วย ส่วนใครยังไม่เป็น ไม่ต้องกังวลครับ

ไปเรียนเรื่องราวของ Sass กันก่อน ว่ามันทำงานยังไง แล้วทำไม CSS Framework ต่างๆ ถึงเลือกใช้งานกัน มันต้องมีดีอะไรซักอย่างแน่ๆ 555

เอาละครับ ใครที่เป็นแฟนคลับวง Bootstrap 4 เอาตัวนี้ไปเล่นเสริม เพื่อสร้างความแตกต่าง และแปลกใหม่ได้ง่ายๆ แวะไปที่นี่ได้เลยครับ

Link :: https://webpixels.github.io/

ส่วนใครที่เพิ่งเข้ามาตรงนี้ และยังไม่ค่อยรู้จัก กับเรื่องราวที่ผมพูด อะไรคือ Bootstrap อะไรคือ ตัวเสริม ไปลองทำความรู้จักกับ Bootstrap 4 กันได้ที่นี่เลยครับ

Link :: Start bootstrap 4