คู่มือสำหรับผู้เริ่มต้นใช้งาน Pico CSS

Alicia Brunner included in Programming Html Css Web Development Web Design

2023-08-18 550 words 3 minutes

Contents

Cascading Style Sheets (CSS) เป็นภาษาภาพที่มีอยู่ทั่วไปทุกหนทุกแห่งและมีประสิทธิภาพ ซึ่งช่วยให้ปรับแต่งรูปลักษณ์ขององค์ประกอบ HTML ได้ อย่างไรก็ตาม การใช้งานอาจก่อให้เกิดความท้าทาย เพื่อบรรเทาความยุ่งยากเหล่านี้ นักพัฒนาได้พัฒนาเฟรมเวิร์ก CSS เช่น TailwindCSS และเทคโนโลยีการประมวลผลล่วงหน้า ซึ่งรวมถึง Less CSS และ Sass

Pico CSS เป็นวิธีการที่คล่องตัวในการจัดรูปแบบหน้าเว็บที่มีเฉพาะเครื่องมือและคุณลักษณะที่จำเป็นสำหรับการปรับปรุงด้านสุนทรียภาพ โดยไม่ทำให้เกิดความซับซ้อนมากเกินไปกับโครงการ ช่วยให้ผู้ใช้สามารถทำงานกับองค์ประกอบ HTML พื้นฐานและใช้สไตล์ที่กำหนดเองได้อย่างง่ายดาย

การติดตั้ง Pico CSS ในโครงการของคุณ

หนึ่งในแนวทางมาตรฐานสำหรับการรวม Pico CSS เข้ากับโครงการคือการใช้ Content Delivery Network (CDN) วิธีการนี้ใช้ประโยชน์จากผู้ให้บริการ CDN ที่โฮสต์ไฟล์ Pico CSS เช่น jsDelivr หากต้องการใช้โซลูชันนี้ เพียงกำหนดโค้ดของเว็บแอปพลิเคชันของคุณให้อ้างอิงไฟล์ pico.min.css ที่คอมไพล์ล่วงหน้าแล้วซึ่งโฮสต์โดย CDN จึงช่วยอำนวยความสะดวกในการผสานรวมที่ราบรื่นด้วยความพยายามเพียงเล็กน้อยในส่วนของนักพัฒนา

 <link
 rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
/>

อีกวิธีหนึ่งเกี่ยวข้องกับการใช้ Node Package Manager (NPM) เพื่อติดตั้ง PicoCSS อย่างไรก็ตาม สิ่งสำคัญคือต้องแน่ใจว่า Node.js ได้รับการติดตั้งเรียบร้อยแล้วบนระบบของคุณก่อนที่จะดำเนินการต่อ หากต้องการตรวจสอบว่ามี Node.js อยู่ในอุปกรณ์ของคุณหรือไม่ ให้ดำเนินการคำสั่งต่อไปนี้ในเทอร์มินัลหรือพรอมต์คำสั่ง:

 node -v

หากมีการติดตั้ง Node.js อยู่ในระบบ อินเทอร์เฟซบรรทัดคำสั่งจะแสดงข้อมูลเวอร์ชัน ในกรณีที่ไม่มีซอฟต์แวร์นี้ อาจมีการขอคำแนะนำในการรับและตั้งค่า Node.js บนอุปกรณ์คอมพิวเตอร์ ในการติดตั้ง Pico CSS ให้ทำตามขั้นตอนต่อไปนี้:

 npm install @picocss/pico

การสร้างเว็บไซต์ด้วย Pico CSS

เมื่อสร้างการออกแบบหน้าเว็บของคุณ Pico CSS เสนอการแบ่งประเภทที่แตกต่างกันสองประเภท ได้แก่"คอนเทนเนอร์"และ"กริด"หากต้องการเริ่มต้นกระบวนการนี้ โปรดสร้างไดเร็กทอรีใหม่และภายในไดเร็กทอรีนั้น ให้สร้างเอกสารชื่อ “index.htm” รวมถึงอีกชื่อหนึ่งที่เรียกว่า “style.css” ภายในไฟล์ “index.htm” โปรดรวมรหัสเทมเพลตพื้นฐานที่ตามมา:

 <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css"
    />
    <link rel="stylesheet" href="style.css" />
    <title>Pico Website</title>
  </head>
  <body>
    <div class="container">
      <h1>Articles Worth Reading...</h1>
    </div>
  </body>
</html>

ระบบตาราง Pico CSS

การใช้งานระบบ Grid ภายใน Pico CSS แสดงลักษณะที่เรียบง่าย การกำหนดตารางอาจมีผลโดยใช้ชื่อชั้น"ตาราง"โดยเฉพาะอย่างยิ่งใน Pico CSS คอลัมน์กริดจะได้รับการรวมเข้าด้วยกันเมื่อมีอุปกรณ์ที่มีความกว้างหน้าจอต่ำกว่าเกณฑ์ 992 พิกเซล

ใต้องค์ประกอบ # ภายในส่วน ของไฟล์ index.htm ให้สร้างตารางที่ประกอบด้วยสี่คอลัมน์

 <div class="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>

เพื่อให้ได้รูปแบบที่เหมาะสมสำหรับแต่ละองค์ประกอบ div ภายในกริด จำเป็นต้องกำหนดทั้งคลาส"คอนเทนเนอร์"และ"การ์ด"ให้กับแต่ละ div ที่เกี่ยวข้อง อดีตซึ่งระบุว่าเป็น"คอนเทนเนอร์"มีคุณสมบัติโดยธรรมชาติของการรวมเนื้อหาที่ดูอยู่กึ่งกลางผ่านการเชื่อมโยงกับเฟรมเวิร์ก Pico CSS ต่อจากนั้น ให้รวมข้อมูลหรือสารสนเทศที่เกี่ยวข้องภายในโครงสร้างแบบกริดโดยใช้ไวยากรณ์และวิธีการที่เหมาะสม ส่งผลให้มีเค้าโครงที่เป็นระเบียบคล้ายกับตัวอย่างด้านล่าง:

 <div class="grid">
  <div class="container card">
    <img
      src="https://images.pexels.com/photos/70069/pexels-photo-70069.jpeg"
    />
    <h4 class="title">Why do birds sing in the morning?</h4>
    <div class="metadata">
      <span>David Uzondu</span>
      <span>13 Minutes ago</span>
    </div>
  </div>

  <div class="container card">
    <img
      src="https://images.pexels.com/photos/1024510/pexels-photo-1024510.jpeg"
    />
    <h4 class="title">The Secret Life of Ducklings</h4>
    <div class="metadata">
        <span>Sam Holland</span>
        <span>53 Minutes ago</span>
    </div>
  </div>

  <div class="container card">
    <img
      src="https://images.pexels.com/photos/2152/sky-earth-space-working.jpg"
    />
    <h4 class="title">NASA's New Mission: Sending Flat-Earthers to
     Edge of Earth to Prove Them Wrong</h4>
    <div class="metadata">
      <span>Simon Peterson</span>
      <span>1 hour ago</span>
    </div>
  </div>

  <div class="container card">
    <img
      src="https://images.pexels.com/photos/12086689/pexels-photo-12086689.jpeg"
    />
    <h4 class="title">Local Grandma Wins International Hip-Hop Dance Battle,
     Proves Age is Just a Number</h4>
    <div class="metadata">
      <span>Anonymous</span>
      <span>2 days ago</span>
    </div>
  </div>
</div>

ในการปรับเปลี่ยนลักษณะที่ปรากฏของเว็บไซต์ของเรา เราต้องเข้าถึงไฟล์ style.css และนำส่วนย่อยของโค้ดที่มีมาให้ ซึ่งจะช่วยให้เราสามารถปรับแต่งลักษณะต่างๆ ของการนำเสนอด้วยภาพของหน้าเว็บ เช่น รูปแบบตัวอักษร สี และการจัดวาง

 img {
    width: 100%;
    background-size: cover;
    border-radius: 10px;
    height: 200px;
}

.card {
    background-color: rgb(244, 244, 244);
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    margin-top: 10px;
}

.card:hover {
    transform: scale(1.03);
}

.metadata {
    margin-top: -30px;
    margin-bottom: 10px;
}

.title {
    margin-top: 10px;
    font-size: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metadata {
    font-size: 14px;
}

span:nth-child(1)::after {
    content: " -";
}

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

วิธีใช้ปุ่มใน Pico CSS

Pico CSS มีองค์ประกอบ HTML ที่ออกแบบไว้ล่วงหน้าและแบบเอกสารสำเร็จรูปมากมาย โดยหนึ่งในปุ่มที่ใช้บ่อยที่สุดคือปุ่มที่แพร่หลายในการออกแบบเว็บ

การใช้ Pico CSS องค์ประกอบปุ่มถูกสร้างขึ้นเพื่อแสดงการออกแบบและรูปลักษณ์ที่เหมือนกันในเว็บเบราว์เซอร์ที่หลากหลาย การรวมองค์ประกอบนี้เกี่ยวข้องกับการแทรกองค์ประกอบภายในโค้ด HTML ซึ่งคล้ายกับแนวทางปฏิบัติมาตรฐานอื่นๆ:

 <button>This is a button</button>

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

 <a href="https.//www.google.com" role="button">Go To Google</a>

วิธีใช้ยูทิลิตี้การโหลดใน Pico CSS

เมื่อใช้ Pico CSS การตั้งค่าแอตทริบิวต์ aria-busy เป็น"จริง"บนองค์ประกอบจะทำหน้าที่แนะนำตัวบ่งชี้การโหลดตามค่าเริ่มต้น สิ่งนี้มีประโยชน์ในกรณีที่ต้องการแจ้งให้ผู้ใช้ทราบถึงความไม่พร้อมในการโต้ตอบกับองค์ประกอบเฉพาะ หรือเมื่อเบราว์เซอร์กำลังเรียกค้นทรัพยากรเฉพาะ

 <a href="#" aria-busy="true">Generating One-Time Password, please wait&hellip;</a>

รหัสดังกล่าวคาดว่าจะให้ผลลัพธ์ดังต่อไปนี้:

วิธีใช้คำแนะนำเครื่องมือใน Pico CSS

Pico CSS ทำให้กระบวนการติดตั้งคำแนะนำเครื่องมือง่ายขึ้นโดยมอบโซลูชันที่มีประสิทธิภาพและเป็นมิตรกับผู้ใช้ ด้วยเฟรมเวิร์กนี้ ผู้ใช้สามารถสร้างคำแนะนำเครื่องมือสำหรับองค์ประกอบต่างๆ ได้อย่างง่ายดายโดยไม่ต้องใช้ความรู้ขั้นสูงเกี่ยวกับ JavaScript หรือภาษาโปรแกรมอื่นๆ ในการสร้างคำแนะนำเครื่องมือโดยใช้ Pico CSS ต้องใช้ข้อกำหนดเพียงสองข้อเท่านั้น:

คำจำกัดความที่ให้ไว้อธิบายองค์ประกอบคำแนะนำเครื่องมือใน HTML โดยระบุว่าประกอบด้วยแอตทริบิวต์ที่เรียกว่า"ข้อมูลคำแนะนำเครื่องมือ"ซึ่งกำหนดเนื้อหา

แอตทริบิวต์ ตำแหน่งข้อมูล ใน Bootstrap ใช้เพื่อระบุตำแหน่งของคำแนะนำเครื่องมือบนหน้าเว็บ มีค่าที่เป็นไปได้สี่ค่าที่สามารถกำหนดให้กับแอตทริบิวต์นี้ ได้แก่"บน"“ขวา"“ล่าง"และ"ซ้าย"ค่าเหล่านี้จะกำหนดตำแหน่งที่คำแนะนำเครื่องมือจะปรากฏเมื่อเทียบกับองค์ประกอบทริกเกอร์หรือองค์ประกอบเป้าหมาย

ตัวอย่างที่ให้มาแสดงขั้นตอนการใช้เครื่องมือนี้อย่างกระชับ อธิบายการใช้งานจริง

 <button data-tooltip="Top" data-placement="top">Top</button>
<button data-tooltip="Right" data-placement="right">Right</button>
<button data-tooltip="Bottom" data-placement="bottom">Bottom</button>
<button data-tooltip="Left" data-placement="left">Left</button>

เมื่อเรียกใช้โปรแกรมภายในเว็บเบราว์เซอร์ ควรสังเกตผลลัพธ์ต่อไปนี้:

หีบเพลงใน Pico CSS

การใช้องค์ประกอบ ภายในเฟรมเวิร์ก Pico CSS ทำให้สามารถใช้ฟังก์ชันที่ช่วยให้ผู้ใช้ควบคุมการมองเห็นส่วนเนื้อหาผ่านการขยายและย่อ เหมือนกับการดำเนินการกับเครื่องดนตรีแอคคอร์เดียนที่ส่วนต่าง ๆ ถูกขยายหรือบีบอัด

 <details>
   <summary>This is an accordion</summary>
   <p>
       Taciti ac condimentum dapibus luctus volutpat ligula nec et mattis
       arcu ridiculus? Non posuere bibendum libero diam tempus nec odio non
       mauris elit! Euismod suspendisse pellentesque donec vestibulum dapibus
       iaculis. Cursus mollis quis praesent purus pulvinar pellentesque
       vulputate integer elit sodales? Egetnunc pellentesque eu eget
       consequat condimentum praesent nec auctor sapien luctus at, donec ac
       ex sit magna amet in.
   </p>
</details>

เมื่อแสดงโค้ด HTML นี้ เบราว์เซอร์ควรจัดเตรียมอินเทอร์เฟซสำหรับการสลับการแสดงเนื้อหา ซึ่งในกรณีนี้จะแสดงด้วยลูกศรชี้ลงภายในรูปสามเหลี่ยม:

เมื่อใดที่คุณควรใช้ CSS Framework

การใช้เฟรมเวิร์ก CSS จะช่วยเร่งวงจรการพัฒนาโดยขจัดความจำเป็นสำหรับองค์ประกอบการออกแบบที่ซ้ำซ้อน ช่วยให้นักพัฒนาสามารถมุ่งเน้นความพยายามไปที่แง่มุมที่ซับซ้อนมากขึ้นของแอปพลิเคชัน หากต้องการอนุรักษ์ทรัพยากรและใช้ประโยชน์จากผลประโยชน์ที่ได้รับจากกรอบเหล่านี้ ขอแนะนำให้รวมไว้ในโครงการ

การใช้เฟรมเวิร์กเป็นการรวบรวมรูปแบบการกำหนดสไตล์ CSS ระบบกริด และบล็อกการสร้างที่กำหนดไว้ล่วงหน้า ซึ่งช่วยให้นักพัฒนามีสมาธิกับตรรกะพื้นฐานและฟังก์ชันการทำงานของแอปพลิเคชันของตน เฟรมเวิร์ก CSS จำนวนมากมาพร้อมกับเอกสารอ้างอิงที่ครอบคลุมและความช่วยเหลือจากชุมชนอย่างกว้างขวาง ซึ่งพิสูจน์แล้วว่าเป็นทรัพยากรที่ขาดไม่ได้เมื่อเผชิญกับอุปสรรคหรือความท้าทายระหว่างทาง