CSSans.Pro

CSSANS Pro - ตัวอักษร CSS สีสันสดใส, CSS, CSS

CSSANS Pro เป็นโครงการ CSS ที่ใช้งานได้ดีโดย Andronache Izabela และ Codrin Pavel

สารบัญ

• ภาพรวม - คลาสทั้งหมดและคลาส CSS
• เริ่มต้นอย่างรวดเร็ว - รับ CSSANS Pro และทำงานในไม่กี่วินาที
• เริ่มต้นอย่างรวดเร็ว - เวอร์ชัน JavaScript - ให้ JS เขียนการเขียน
• ตัวเลือก
  • สี
  • ระยะห่างจากตัวอักษร
  • การเว้นวรรคคำ
  • ความสูงของสาย
  • ตัวเอียง (ข้อความเอียง)
  • การจัดตำแหน่ง: ศูนย์
  • การจัดตำแหน่ง: ถูกต้อง
• การสนับสนุนเบราว์เซอร์ - วิธีการใช้โดยไม่มีตัวแปร CSS
• การเข้าถึง - สุดยอดสำคัญสุด ๆ
• การติดตั้ง - คำแนะนำสำหรับการเรียกใช้ repo นี้ในเครื่องนี้

ภาพรวม

ตัวพิมพ์ใหญ่

• A - Z <b class="cssans:LETTER"></b>

ตัวพิมพ์เล็ก

• A - Z <b class="cssans:letter"></b>

ตัวเลข

• 0 - 9 <b class="cssans:NUMBER"></b>

สัญลักษณ์

• ! ~,.*()?@:; '-+=/& & $#_ <b class="cssans:CHARACTER"></b>

สัญลักษณ์ที่หลบหนี

• ` <b class="cssans:%60"></b>
• ^ <b class="cssans:%5E"></b>
• % <b class="cssans:%25"></b>
• [ <b class="cssans:%5B"></b>
• ] <b class="cssans:%5D"></b>
• { <b class="cssans:%7B"></b>
• } <b class="cssans:%7D"></b>
• " <b class="cssans:%22"></b>
• << <b class="cssans:%3C"></b>
• > <b class="cssans:%3E"></b>
• <b class="cssans:%5C"></b>
• - <b class="cssans:%7C"></b>

เริ่มต้นอย่างรวดเร็ว

คว้าไฟล์ CSS ที่เล็กกว่าจาก repo:

• /dist/cssans.min.css

เพิ่มในตัวอย่างมาร์กอัป HTML :

 < div class =" cssans cssans--center " >
    < div class =" cssans__accessible " > CSSans Pro </ div >

    < div class =" cssans__word " >
        < b class =" cssans:C " > </ b >
        < b class =" cssans:S " > </ b >
        < b class =" cssans:S " > </ b >
        < b class =" cssans:a " > </ b >
        < b class =" cssans:n " > </ b >
        < b class =" cssans:s " > </ b >
    </ div >

    < div class =" cssans__word " >
        < b class =" cssans:P " > </ b >
        < b class =" cssans:r " > </ b >
        < b class =" cssans:o " > </ b >
    </ div >
</ div >

... กำไร!

นี่คือการแยกย่อยอย่างรวดเร็ว:

• ตัวละครแต่ละตัวเป็น องค์ประกอบเดียว ที่มีคลาสของ cssans:CHAR
• แต่ละคำจะอยู่ในคอนเทนเนอร์. .cssans__word สิ่งนี้จะทำให้แน่ใจว่าข้อความทั้งหมดเว้นระยะอย่างถูกต้อง
• สำหรับการปรับปรุงการเข้าถึงคุณควรเพิ่มข้อความต้นฉบับในคอนเทนเนอร์. .cssans__accessible อ่านสิ่งนี้อย่างแน่นอน
• CSSANS Pro มีตัวเลือกและคลาสผู้ช่วยในตัวเช่น .cssans--center ดูตัวเลือกเพิ่มเติม

เริ่มต้นอย่างรวดเร็ว - เวอร์ชัน JavaScript

คว้าไฟล์ CSS และ JS ที่เล็กกว่าจาก repo:

• /dist/cssans.min.css
• /dist/cssans.min.js

เพิ่มในตัวอย่างมาร์กอัป HTML :

 < div id =" foo " > CSSans Pro </ div >

โทร CSSans(element, text)

 var element = document . getElementById ( 'foo' ) ;
var text = element . innerText ;
CSSans ( element , text ) ;

คุณสามารถคว้าฟังก์ชั่น CSSANS () ที่ไม่ได้ระบุได้จาก /_src/cssans/js/cssans.js เพื่อดูว่าเกิดอะไรขึ้นในนั้น ไม่มีอะไรมากจริงๆอย่าลังเลที่จะทำเอง

ตัวเลือก

สี

แพลตสีถูกควบคุมโดยตัวแปร CSS 5 ตัวที่เขียนเป็น --cssans-**WHICHCOLOR**: **R**, **G**, **B**

สัญกรณ์นี้ใช้เฉพาะ ค่า สีโดยไม่มีไวยากรณ์ rgb()

 --cssans-primary : 31 , 51 , 104 ;    // blue
--cssans-secondary : 237 , 21 , 118 ; // pink
--cssans-accent1 : 43 , 208 , 247 ;   // light blue
--cssans-accent2 : 255 , 92 , 92 ;    // orange
--cssans-accent3 : 255 , 216 , 9 ;    // yellow

ระยะห่างจากตัวอักษร

 --cssans-letter-spacing : 0.1 em ;

การเว้นวรรคคำ

 --cssans-word-spacing : 1 em ;

ความสูงของสาย

 --cssans-line-height : 1.1 em ;

จัดแนว: ศูนย์

ใช้ cssans--center บนคอนเทนเนอร์ที่ถือมาร์กอัปแบบอักษรของคุณ

คลาสนี้จะทำให้แน่ใจว่าคำทั้งหมดจัดเรียงอย่างถูกต้องตรงกลางของคอนเทนเนอร์หลัก

เพียงแค่ตั้ง text-align:center; จะไม่ทำเช่นกันเนื่องจากคำพูดถูกคั่นด้วยระยะขอบ

 < div class =" cssans--center " >
    < div class =" cssans__word " > ... </ div >
</ div >

จัดตำแหน่ง: ขวา

ใช้ cssans--right บนคอนเทนเนอร์ที่ถือมาร์กอัปแบบอักษรของคุณ

คลาสนี้จะช่วยให้คุณจัดเรียงข้อความให้อยู่ทางด้านขวาของคอนเทนเนอร์พาเรนต์ได้อย่างถูกต้อง

 < div class =" cssans--right " >
    < div class =" cssans__word " > ... </ div >
</ div >

ตัวเอียง (เอียง)

ใช้ cssans--slanted บนคอนเทนเนอร์ที่ถือมาร์กอัปแบบอักษรของคุณเพื่อให้รูปแบบฟอนต์ เป็นตัวเอียง

หมายเหตุ: คลาสนี้เพิ่ม transform: skew(-15deg); สำหรับแต่ละ .cssans__word อย่าลังเลที่จะทดลอง?

 < div class =" cssans--slanted " >
    < div class =" cssans__word " > ... </ div >
</ div > 

การสนับสนุนเบราว์เซอร์

CSSANS Pro สามารถทำงานกับเบราว์เซอร์รุ่นเก่าที่ไม่รองรับคุณสมบัติที่กำหนดเอง CSS นี่คือวิธีการทำเช่นนั้นเลือกวิธีที่เหมาะสมที่สุด:

• ใช้ prebuilt IE ที่เข้ากันได้ของ CSSANS Pro /dist/cssans.min.ie.css - ไฟล์นี้ไม่มีตัวแปร CSS รหัสทั้งหมดจะถูกคอมไพล์กับคุณสมบัติ CSS ปกติ อย่าลังเลที่จะค้นหา/แทนที่ทุกสีและช่องว่างที่คุณต้องการปรับแต่ง

• ติดตั้ง repo ในพื้นที่และสร้าง cssans.min.ie.css เวอร์ชันของคุณเองหรือ ...

• ใช้ polyfil เช่น css-vars-ponyfill

การเข้าถึงได้

คุณไม่จำเป็นต้องอ่านสิ่งนี้หากคุณใช้ฟังก์ชั่น JavaScript CSSans()

CSSANS Pro ทำจากรูปร่าง CSS ที่หน้าจอผู้อ่านและเทคโนโลยีช่วยเหลืออื่น ๆ ไม่สามารถระบุได้

เพื่อให้เว็บไซต์ของคุณสามารถเข้าถึงได้ โปรด ใช้คลาส. .cssans__accessible ในตัว มันง่ายจริงๆดู:

 < div class =" cssans__accessible " > I can be read by a screen reader, hurray! </ div > 

การติดตั้ง

1. คุณจะต้องมีสภาพแวดล้อม Jekyll ที่ใช้งานได้และติดตั้ง NPM บนเครื่องของคุณ เมื่อคุณติดตั้ง NPM แล้วคุณจะต้องติดตั้ง gulp ลงในไดเรกทอรีรูททั่วโลกของคุณหากคุณยังไม่ได้ติดตั้ง npm install -g gulp ตรวจสอบให้แน่ใจว่าสิ่งเหล่านี้กำลังทำงานกับระบบของคุณก่อนดำเนินการต่อ

2. โคลน repo

3. ติดตั้งการพึ่งพาด้วย npm install

4. ใช้ gulp

ณ จุดนี้ Browsersync ควรเปิดแท็บเบราว์เซอร์ใหม่ที่ http://localhost:3000 และคุณพร้อมที่จะไป!

ที่เก็บมีไฟล์ทั้งหมดสำหรับ CSSANS Pro รวมถึงเว็บไซต์การนำเสนอ

คุณสามารถค้นหาไฟล์ตัวอักษรภายใต้ _src/cssans/sass/ คุณสมบัติที่กำหนดเอง CSS ทั้งหมดถูกตั้งค่าใน _common.scss

ไดเรกทอรี dist ควรอัปเดตทันทีในขณะที่คุณอัปเดตไฟล์เพื่อให้คุณสามารถคว้าไฟล์ minified จากโฟลเดอร์ _dist ได้ทันทีที่คุณแก้ไขเสร็จสิ้น

มีความสุข!