เซียร์ร่าเป็นคลังแสง UI มืดที่สวยงามที่สร้างขึ้นบน Sass

ในโลกที่เต็มไปด้วย กรอบส่วนหน้า, มันอาจเป็นเรื่องยากที่จะเรียงลำดับผ่านตัวเลือกทั้งหมด แต่ถ้าคุณเป็นคนรัก Sass ทิวเขา คือ เฟรมเวิร์ก UI ใหม่ที่ยอดเยี่ยมที่สุด เพื่อดู.

มันปรับแต่งได้อย่างเต็มที่และ ทำงานบนโค้ด SCSS ทั้งหมด. ซึ่งหมายความว่ามันมาพร้อมกับหลายสิบ SCSS partials และ ห้องสมุดที่เกี่ยวข้อง ที่รวมเข้าด้วยกันเป็นหนึ่งในไลบรารี UI ที่มีประสิทธิภาพ (และฟรี).

เมื่อนักพัฒนาได้ยินเกี่ยวกับห้องสมุด Sass ใหม่มักจะถือว่าเป็นชุดของมิกซ์อิน แต่เซียคือ มากกว่าแค่ตัวแปรและมิกซ์อิน. ไลบรารีนี้เป็นเฟรมเวิร์ก UI สีฟ้าจริงด้วย สไตล์ที่กำหนดเอง สำหรับ กริด, วิชาการพิมพ์, ตาราง, ปุ่ม, รูปแบบ, และทุกอย่างที่คุณต้องการในการออกแบบเว็บไซต์ก็คือ.

โดยรวมแล้วห้องสมุดมีน้ำหนัก ประมาณ 34kb ไม่มีการบีบอัด, ซึ่งสามารถดูใหญ่ แต่เมื่อพิจารณาทุกอย่างที่คุณได้รับมันมีขนาดที่ดีและอยู่ไกลจากสิ่งที่หายากที่สุด (สำหรับการอ้างอิง CSS ของ Bootstrap มีขนาดประมาณ 115kb ที่ไม่บีบอัด).

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

ไลบรารี UI มาพร้อมกับสไตล์ส่วนหน้ามากมาย สำหรับองค์ประกอบของหน้าทั่วไป:

• ย่อหน้าและส่วนหัว
• ปุ่ม
• อินพุตแบบฟอร์ม (ดร็อปดาวน์, วิทยุ, ฯลฯ )
• ตาราง
• การให้เลขหน้า
• การจัดแนวซ้าย / ขวา
• แถบโหลดแบบกำหนดเอง

องค์ประกอบทั้งหมดเหล่านี้สามารถเห็นได้ในหน้าสาธิตซึ่งใช้โทนสีเข้มขึ้น โดยค่าเริ่มต้นเซียเป็น ไลบรารี UI มืด แต่เนื่องจากสีทั้งหมดเปลี่ยนง่ายคุณจึงสามารถใช้งานได้กับเว็บไซต์ทุกรูปแบบ.

ข้อร้องเรียนเดียวของฉันคือ ไม่มีเอกสารที่เข้าถึงได้ง่าย. ปัจจุบัน Sierra อยู่ใน v2.0 แต่ถึงแม้ repo หลักจะกระจัดกระจายในคำแนะนำในการติดตั้งและปรับแต่ง.

โชคดีที่รายชื่อนักพัฒนาซอฟต์แวร์ ตัวแปรหลักทั้งหมด คุณสามารถเปลี่ยนใน _variables.scss ไฟล์. ตัวแปรเหล่านี้จะถูกนำเข้าสำหรับไฟล์ Sierra SCSS อื่น ๆ ทั้งหมดซึ่งหมายความว่าคุณ จำเป็นต้องเปลี่ยนสีในที่เดียวเท่านั้น เพื่อให้พวกเขาทำงานได้ทุกที่.

Sierra นั้นยังห่างไกลจากความสมบูรณ์แบบ แต่ก็เป็นหนึ่งในห้องสมุด UI แบบ Sass ไม่กี่แห่งบนเว็บ.

หากคุณต้องการลองทำดูที่เว็บไซต์หลัก การสาธิต & รายละเอียดเพิ่มเติม. และหากคุณติดขัดจริงๆคุณสามารถลองเปิดคำถามในหน้าปัญหา GitHub หรือส่งข้อความถึงผู้สร้าง Joan Claret สำหรับรายละเอียดเพิ่มเติม.