SunnyUX คืออะไร?

SunnyUX เป็น CSS Libary ที่สามารถ จัดโครงสร้าง (Layouts)  รวมถึงย่อคำสั่งต่างๆ ให้สามารถเรียกใช้ผ่าน HTML Class ได้ เช่น padding: 0; ก็จะถูกย่อเป็น p-0, margin-left: 0; margin-right: 0; ก็จะถูกย่อเป็น mx-0 เป็นต้น คล้ายกับ ​CSS Libary อย่าง Bootstrap

แต่ SunnyUX จะมี Components ให้เลือกใช้ และสไตล์เริ่มต้น ที่แตกต่างออกไป การพัฒนา SunnyUX จะพัฒนา Components เพิ่มเข้ามาเรื่อยๆ อาจถูกแบ่งเป็นหลายส่วน เพื่อให้เลือกใช้งานได้ตามต้องการ เพื่อความ lightweight ของ Libary

CDN

<link rel="stylesheet" href="config.css">
<link rel="stylesheet" href="https://sunny420x.com/css/sunnyux.css">
<script src="https://sunny420x.com/js/sunnyux.js"></script>

config.css

:root {
    --container-max-width: 1200px;
    --nav-height: 50px; 
    --nav-text-color: var(--grey); 
    --nav-text-color-hover: var(--white); 
    --nav-bg: var(--dark-transparent); 
    --nav-hover-bottom: var(--darkblue); 
}

การแบ่งและจัดโครงสร้าง (Griding Systems)

1) Flex โครงสร้างไม่คงที่ (Flexbox)

ใช้งาน Flex โดยการเรียกใช้งาน class ที่ชื่อว่า flex และ ข้างใน flex elements จำเป็นต้องสร้าง class ตามขนาดที่ต้องการ ซึ่งแบบแรกเป็น flex แบบที่ความกว้าง ของ elements ไม่เท่ากัน เช่น 70%/30% และ 40%/30%/30%

<div class="flex">
  <div class="row-70">
  </div>
  <div class="row-30">
  </div>
</div>

และสำหรับสัดส่วน 40% 30% และ 30% จะเขียนดังนี้

<div class="flex">
    <div class="row-40">
    </div>
    <div class="row-30">
    </div>
    <div class="row-30">
    </div>
</div>

2) Grid ขนาดคงที่

หากเป็นกล่องที่มี elements ข้างในเท่ากัน จะใช้ grid-4 (หมายถึง หนึ่งแถว มี 4 elememts), grid-3, grid-2, grid-1 แทน โดยรองรับมากสุดถึง grid-6 ตัวอย่างเช่น

<div class="grid-4">
    <div class="media">...</div>
</div>

Grid สองคอลัมน์ต่อแถว แบ่งเป็นสองส่วน รวมทุกส่วนเท่ากับ 12 เช่น grid-11-1, grid-10-2, grid-9-3, grid-8-4, grid-7-5, grid-5-7, grid-4-8, grid-3-9, grid-2-10 และ grid-1-11

ขณะนี้รองรับ Grid สามคอลัมน์ต่อแถว แบ่งเป็นสามส่วน รวมทุกส่วนเท่ากับ 12 เช่น grid-5-5-2, grid-4-6-2, grid-3-7-2, grid-3-8-1, grid-6-3-3, grid-9-2-2, grid-5-2-5, grid-4-3-4, grid-3-6-3, grid-2-8-2, grid-1-9-2 และ grid-1-10-1

สร้าง Navigator

<div class="nav black">
    <div class="container">
        <div class="grid">
            <button class="btn transparent text-white" id="collapse-btn" onclick="collapse()"><i class="fa-solid fa-bars"></i></button>
            <ul class="px-10" id="collapse">
                <a href="/"><li>Home</li></a>
                <a href="#"><li>About</li></a>
                <li class="dropdown" onclick="showhide(this)">
                Tools
                    <ul>
                        <a href=""><li>Dropdown1</li></a>
                    </ul>
                </li>
            </ul>
        </div>
    </div>
</div>
<div id="mockup"></div>

สร้าง Tables

<div class="table-overflow">
<table> 
    <tr>
        <th>#</th>
        <th>FirstName</th>
        <th>LastName</th>
    </tr>
    <tr>
        <td>1</td>
        <td>Sunny</td>
        <td>Jirakit</td>
    </tr>
</table>
</div>

ปุ่ม (Buttons)

Dark BlueRedLight RedGreenPinkBlackWhiteOrangeGreyBlue GreyTransparent

<button class="btn darkblue">Dark Blue</div> 
<button class="btn red">Red</div>
<button class="btn lightred">Light Red</div>
<button class="btn green">Green</div>
<button class="btn pink">Pink</div>
<button class="btn black">Black</div>
<button class="btn white">White</div>
<button class="btn orange">Orange</div>
<button class="btn grey">Grey</div>
<button class="btn bluegrey">Blue Grey</div>
<button class="btn transparent">Transparent</div>

Dark BlueRedLight RedGreenPinkBlackWhiteOrangeGreyBlue Grey

<button class="btn transparent ghost-darkblue">Dark Blue</div> 
<button class="btn transparent ghost-red">Red</div>
<button class="btn transparent ghost-lightred">Light Red</div>
<button class="btn transparent ghost-green">Green</div>
<button class="btn transparent ghost-pink">Pink</div>
<button class="btn transparent ghost-black">Black</div>
<button class="btn transparent ghost-white">White</div>
<button class="btn transparent ghost-orange">Orange</div>
<button class="btn transparent ghost-grey">Grey</div>
<button class="btn transparent ghost-bluegrey">Blue Grey</div>

สร้างรายการแนวนอน และแนวตั้ง

หัวข้อ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a laoreet dui, ut rutrum leo. Integer at elementum sapien. Nunc viverra tincidunt hendrerit. Aenean maximus bibendum leo nec imperdiet. Vivamus mollis, tellus ut imperdiet porta, mauris diam elementum purus, mattis pellentesque enim ex quis justo. Nunc viverra tincidunt hendrerit.

<div class="media-x">
    <div class="cover"><img alt="" src="/img/default.jpg" /></div>
    <div class="content">
        <h1>หัวข้อ</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a laoreet dui, ut rutrum leo. Integer at elementum sapien. Nunc viverra tincidunt hendrerit.      Aenean maximus bibendum leo nec imperdiet. Vivamus mollis, tellus ut imperdiet porta, mauris diam elementum purus, mattis pellentesque enim ex quis justo. Nunc   viverra tincidunt hendrerit.</p>
    </div>
</div>

หัวข้อ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a laoreet dui, ut rutrum leo. Integer at elementum sapien. Nunc viverra tincidunt hendrerit. Aenean maximus bibendum leo nec imperdiet. Vivamus mollis, tellus ut imperdiet porta, mauris diam elementum purus, mattis pellentesque enim ex quis justo. Nunc viverra tincidunt hendrerit.

<div class="media">
    <div class="cover"><img alt="" src="/img/default.jpg" /></div> 
    <div class="content"> 
        <h1>หัวข้อ</h1>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce a laoreet dui, ut rutrum leo. Integer at elementum sapien. Nunc viverra   tincidunt hendrerit. Aenean maximus bibendum leo nec imperdiet. Vivamus mollis, tellus ut imperdiet porta, mauris diam elementum purus, mattis pellentesque enim ex quis justo. Nunc viverra tincidunt hendrerit.</p> 
    </div> 
</div>

Classes ต่างๆ

สำหรับการกำหนดสัดส่วนของ margin และ padding จะสามารถใส่ ค่าได้ตั้งแต่ 0, 10, 20, 30, 40, 50, 60 (Pixels) เช่น mx-10, mx-20, my-30, px-50, mx-0 เป็นต้น

Card

หากต้องการสร้าง Element ที่มีลักษณะเหมือนการ์ด (Card) ที่ประกอบไปด้วย ส่วนหัว (header) และส่วนสำหรับเนื้อหา สามารถสร้างได้โดยใส่ class ดังนี้

<div class="card white rounded">
  <div class="header black">Header</div>
  <div class="p-30">Content</div>
</div>

หน้าโหลดของเว็บไซต์ (Loader)

เป็นตัวเลือกเสริมสำหรับเว็บไซต์ที่ต้องโหลดข้อมูลรูปภาพเป็นจำนวนมาก สำหรับเว็บไซต์ที่โหลดหน้าเร็วอยู่แล้ว ไม่จำเป็นต้องใส่

<div id="preload" class="white">
    <img src="" class="loader">
</div>

Container พร้อม Left-side Navigator.

<body>
    <div class="admin-container">
        <div class="leftside black">
            <button class="btn transparent text-white" id="collapse-btn" onclick="leftcollapse();">
                <i class="fa-solid fa-bars"></i>
            </button>
            <div id="collapse">
               <h1>Sitename</h1>
               <ul class="list">
                   <a href="index.php" class="text-white"><li>Home</li></a>
               </ul>
            </div>
        </div>
        <div class="container white">
            <h1>Content</h1>
        </div>
    </div>
</body>