CSSans.Pro

CSSANS PRO-五顏六色，野蠻的CSS字體

CSSANS PRO是Andronache Izabela和Codrin Pavel的恰好競爭CSS項目。

目錄

• 概述 - 所有角色和CSS課程
• 快速啟動 - 在幾秒鐘內啟動並運行CSSANS Pro
• 快速啟動 - JavaScript版本 - 讓JS進行寫作
• 選項
  • 顏色
  • 信件間隔
  • 單詞間隔
  • 線高
  • 斜體（傾斜文本）
  • 對準：中心
  • 對準：對
• 瀏覽器支持 - 如何在沒有CSS變量的情況下使用
• 可訪問性 - 超級重要
• 安裝 - 本地運行此存儲庫的說明

概述

大寫

• 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文件：

• /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文件：

• /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 ) ;

您可以從/_src/cssans/js/cssans.js獲取未啟動的CSSANS（）函數，以查看其中發生了什麼。實際上，沒有什麼可以隨意製作自己的。

選項

顏色

顏色pallete由5個CSS變量控制為--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 CSSANS，可容納您的字體標記，以使字體具有斜體化的外觀。

注意：此類實際上添加了transform: skew(-15deg);每個.cssans__word 。可以隨意實驗嗎？

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

瀏覽器支持

CSSANS PRO可以處理不支持CSS自定義屬性的較舊瀏覽器。這是做這件事的幾種方法，請選擇最適合的方法：

• 使用cssans pro /dist/cssans.min.ie.css的預構建的IE兼容版本 - 此文件中沒有CSS變量，所有代碼都將預編譯為普通的CSS屬性。可以隨意找到/更換您要自定義的所有顏色和間距。

• 在本地安裝倉庫，並構建您自己的cssans.min.ie.css或...

• 使用polyfil，例如CSS-VARS-PONYFILL

可訪問性

如果使用CSSans() JavaScript函數，則無需閱讀此內容。

CSSANS Pro是由CSS形狀製成的，屏幕讀取器和其他輔助技術無法識別。

為了使您的網站可訪問，請使用內置的.cssans__accessible accessss class。真的很容易，看：

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

安裝

1. 您將需要工作的Jekyll環境，並在計算機上安裝了NPM 。安裝了NPM後，如果尚未使用npm install -g gulp則需要將gulp安裝到全局根目錄中。在繼續之前，請確保它們在系統上工作。

2. 克隆倉庫

3. 使用npm install安裝依賴項

4. 運行gulp

在這一點上，瀏覽器應在http://localhost:3000打開一個新的瀏覽器選項卡，您很高興！

存儲庫包含CSSANS PRO的所有文件以及演示站點。

您可以在_src/cssans/sass/下找到字體文件。所有CSS自定義屬性均在_common.scss中設置。

dist目錄應在更新文件時立即更新，因此您可以在完成編輯後立即從_dist文件夾中獲取縮小文件。

玩得開心！