หน้าแรก>การเขียนโปรแกรมที่เกี่ยวข้อง>ซอร์สโค้ดอื่น ๆ
ดาวน์โหลด


Water.css

- คอลเลกชันแบบดรอปอินของสไตล์ CSS เพื่อสร้างเว็บไซต์ง่าย ๆ


เป้าหมาย

  • ตอบสนอง
  • น่าอยู่
  • การสนับสนุนเบราว์เซอร์ที่ดี (ใช้ได้กับเบราว์เซอร์ของ Kindle เก่า: P)
  • ขนาดเล็ก
  • สวย
  • ไม่มีชั้นเรียน

ทำไม

ฉันมักจะสร้างหน้าตัวอย่างหรือเว็บไซต์ที่มีเนื้อหาง่ายๆ สำหรับสิ่งเหล่านี้ฉันไม่ต้องการใช้เวลาในการจัดแต่งทรงผม แต่ไม่ชอบความอัปลักษณ์ของสไตล์เริ่มต้น

Water.css เป็นกรอบ CSS ที่ไม่ต้องการชั้นเรียนใด ๆ คุณเพียงแค่รวมไว้ใน <head> ของคุณและลืมไปในขณะที่มันทำให้ทุกอย่างดีขึ้นอย่างเงียบ ๆ

WHO?

คุณอาจต้องการใช้ Water.css หากคุณกำลังสร้างหน้าแบบคงที่หรือเว็บไซต์สาธิตที่คุณไม่ต้องการใช้เวลาในการจัดแต่งทรงผม

แม้ว่าในตอนแรกมันจะไม่ได้สร้างขึ้นสำหรับเว็บไซต์ที่ซับซ้อนมากขึ้น แต่นักพัฒนาหลายคนใช้ Water.css เป็นสไตล์ชีทพื้นฐานและใช้สไตล์ที่กำหนดเองอย่างสร้างสรรค์เพื่อสร้างแอพทั้งหมด ไม่มีอะไรหยุดคุณจากการทำเช่นเดียวกัน!

ยังไง?

เพียงแค่ติดสิ่งนี้ใน <head> ของคุณ

?/☀ธีมอัตโนมัติ:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.min.css">

- ธีมมืด:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/dark.min.css">

☀ธีมแสง:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/light.min.css">


ตัวอย่าง ของธีมที่แตกต่างกันมีอยู่ใน หน้าสาธิต !

วิธีการ "ธีมอัตโนมัติ" ทำงานอย่างไร

ไฟล์ Main water.css จะสลับระหว่างโหมดแสงและมืดโดยอัตโนมัติขึ้นอยู่กับการตั้งค่าระบบของอุปกรณ์ของผู้ใช้ การตรวจจับนี้เกิดขึ้นได้ผ่านการสืบค้นสื่อ CSS ที่เรียกว่า prefers-color-scheme ในเบราว์เซอร์ที่ไม่สามารถตรวจพบการตั้งค่าได้ water.css จะติดกับธีมแสง

หากคุณต้องการหลีกเลี่ยงพฤติกรรมนี้ให้ใช้ dark.css หรือ light.css

สนับสนุน Internet Explorer

การแจกแจงทั้งสามของ Water.css รองรับ Internet Explorer 11 แต่ไฟล์ Main water.css ไม่เคารพโทนสีของผู้ใช้ และจะถูกล็อคเข้าสู่โหมดแสงเนื่องจากขาดการสนับสนุน prefers-color-scheme

โปรดทราบว่า IE ยังไม่สนับสนุนการใช้งานรันไทม์และจะใช้ค่าทางเลือกคงที่ หากคุณต้องการแทนที่ชุดรูปแบบของ Water.css ในแบบที่เข้ากันได้กับ IE เราขอแนะนำให้คุณรวบรวมธีมของคุณเอง

การสร้างที่ไม่มีการระบุ

ทุกรุ่นยังมีรูปแบบที่ไม่ผ่านการระบุซึ่งมีประโยชน์ในระหว่างการพัฒนา
เพียงลบ .min ออกจากชื่อไฟล์

การสร้างธีม

คุณต้องการทำการปรับเปลี่ยนหรือสร้างธีมของคุณเองแตกต่างอย่างสิ้นเชิงจากธีมมืดหรือแสงอย่างเป็นทางการหรือไม่? เนื่องจาก Water.css ถูกสร้างขึ้นด้วยตัวแปร CSS นี่เป็นเรื่องง่ายมากที่จะทำ! นี่คือรายการรายการของตัวแปรทั้งหมดที่คุณสามารถเปลี่ยนเป็นความชอบของคุณ:

  • --background-body
  • --background
  • --background-alt
  • --selection
  • --text-main
  • --text-bright
  • --text-muted
  • --links
  • --focus
  • --border
  • --code
  • --animation-duration
  • --button-hover
  • --scrollbar-thumb
  • --scrollbar-thumb-hover
  • --form-placeholder
  • --form-text
  • --variable
  • --highlight
  • --select-arrow

รันไทม์ธีม

หากคุณใช้เวอร์ชันที่มีการสนับสนุนสำหรับเบราว์เซอร์ดั้งเดิมเช่น Internet Explorer ให้ข้ามเพื่อรวบรวมธีมของคุณเอง!

Water.css ใช้คุณสมบัติที่กำหนดเอง ( "ตัวแปร CSS" ) เพื่อกำหนดรูปแบบพื้นฐานเช่นสี สิ่งเหล่านี้สามารถเปลี่ยนแปลงและเขียนทับได้ถูกต้องในเบราว์เซอร์

ด้วยเหตุนี้คุณสามารถเพิ่มสไตล์ชีทของคุณเองลงในหน้าและตั้งค่าตัวแปร CSS ของคุณเองที่นั่น ตราบใดที่สไตล์ชีทของคุณมาหลังจากน้ำ css ใน HTML ค่าของคุณจะแทนที่ค่าเริ่มต้นและธีมของคุณจะถูกนำไปใช้!

ตัวอย่างสั้น ๆ นี้จะใช้ water.css แต่สีทั้งหมดลิงก์สีแดง: 

 < link rel =" stylesheet " href =" https://cdn.jsdelivr.net/water.css@2/out/water.min.css " />
< style >
  :root {
    --links: red;
  }
</ style >

หากคุณต้องการเปลี่ยนค่าสำหรับโหมดมืดหรือแสงเท่านั้นให้ใช้แบบสอบถามสื่อเช่นนี้: 

 < style >
  :root {
    --links: blue; /* Always applied */
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --links: yellow; /* Only applied in dark mode (overrides blue) */
    }
  }
</ style >

รวบรวมธีมของคุณเอง

หากคุณกำลังกำหนดเป้าหมายเบราว์เซอร์โดยไม่สนับสนุนคุณสมบัติที่กำหนดเอง CSS เช่น Internet Explorer การเรียกใช้งานรันไทม์ไม่ใช่ตัวเลือก ในการใช้ธีมของคุณเองคุณจะต้องทำการเปลี่ยนแปลงในไฟล์ต้นฉบับของคุณเองจากนั้นรวบรวมไฟล์ CSS อีกครั้ง สิ่งนี้ใช้ได้ผลเช่นนี้:

  • โคลนพื้นที่เก็บข้อมูลไปยังเครื่องของคุณ
  • เรียกใช้ yarn เพื่อติดตั้งการพึ่งพา
  • ทำการเปลี่ยนแปลงรูปแบบที่คุณต้องการใน src/variables-*.css
  • เรียกใช้ yarn build เพื่อรวบรวมไฟล์ CSS
  • ใช้ไฟล์ที่รวบรวมใน out/ ไดเรกทอรีบนเว็บไซต์ของคุณ

คุณอาจต้องการตรวจสอบคู่มือการสนับสนุนเนื่องจากมีข้อมูลเพิ่มเติมเกี่ยวกับการตั้งค่าการสร้าง

การบริจาค

Water.css จะดีขึ้นสำหรับทุกคนเมื่อคนอย่างคุณช่วยให้ดีขึ้น!

ตรวจสอบคู่มือการสนับสนุนของเราเพื่อเรียนรู้วิธีเริ่มต้น
และขอบคุณที่สละเวลามีส่วนร่วม! -

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด