CSSans.ProダウンロードCSSans.Proソースコードのダウンロード

CSSans.Pro

フォントのダウンロード

1.0.0

ダウンロード

CSSANS Pro-カラフルで生意気なCSSフォント

CSSANS Proは、Andronache IzabelaとCodrin PavelによるちょうどファンCSSプロジェクトです。

概要 - すべての文字とCSSクラス
クイックスタート-CSSANSProを数秒で稼働させる
クイックスタート-JavaScriptバージョン-JSに執筆をさせてください
オプション
- 色
- 文字間隔
- 単語間隔
- ラインハイト
- イタリック（傾斜テキスト）
- アライメント：センター
- アライメント：右
ブラウザのサポート - CSS変数なしでの使用方法
アクセシビリティ - 超、非常に重要
インストール - このリポジトリをローカルに実行するための手順

概要

大文字

a -z

小文字

a -z

数字

0-9

シンボル

！〜、。*（）？@：; ' - +=/＆$＃_

脱出したシンボル

` 
^ 
％ 
[ 
] 
{ 
} 
" 
<< 
> 

|

クイックスタート

リポジトリからマイニフィングされた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 >

... 利益！

これが簡単な故障です：

各キャラクターは、cssanのクラスを持つ単一の要素ですcssans:CHAR
個々の単語は、 .cssans__wordコンテナ内に入ります。これにより、すべてのテキストが適切に間隔を空けていることを確認します。
アクセシビリティを改善するには、 .cssans__accessibleコンテナに元のテキストを追加する必要があります。間違いなくこれを読んでください
CSSANS Proは、 .cssans--centerなどのいくつかのオプションと組み込みのヘルパークラスを提供します。その他のオプションをご覧ください

クイックスタート-JavaScriptバージョン

リポジトリからMINIFIED 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（）関数をつかんで、そこで何が起こっているのかを確認できます。何も、本当に、自分で作ってください。

オプション

色

カラーパレットは--cssans-**WHICHCOLOR**: **R**, **G**, **B**として記述された5つのCSS変数によって制御されます。

この表記は、 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 ;

align：センター

cssans--centerクラス。

このクラスは、すべての単語が親コンテナの中央に適切に整列することを確認します。

単にtext-align:center;単語はマージンで区切られているため、あまり役に立たない。

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

align：右

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カスタムプロパティをサポートしていない古いブラウザで動作できます。それを行ういくつかの方法があります、最適なものを選んでください：

CSSANS Pro /dist/cssans.min.ie.cssの事前に構築されたIE互換バージョンを使用します - このファイルにはCSS変数が含まれていません。すべてのコードは通常のCSSプロパティに事前縮小されます。カスタマイズしたいすべての色と間隔を見つけて交換してください。
レポをローカルにインストールし、 cssans.min.ie.cssの独自のバージョンを構築するか...
CSS-Vars-PonyFillなどのポリフィルを使用します

アクセシビリティ

CSSans() JavaScript関数を使用する場合、これを読む必要はありません。

CSSANS Proは、スクリーンリーダーやその他の支援技術が特定できないCSS形状で作られています。

サイトにアクセスできるようにするには、組み込みの.cssans__accessibleクラスを使用してください。本当に簡単です、見てください：

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

インストール

作業するJekyll環境とNPMマシンにインストールされる必要があります。 NPMをインストールしたら、 npm install -g gulpをまだ使用していない場合は、 gulpグローバルルートディレクトリにインストールする必要があります。これらが進む前にシステムで動作していることを確認してください。
レポをクローンします
npm installで依存関係をインストールします
gulpを実行します

この時点で、browsersyncはhttp://localhost:3000で新しいブラウザタブを開く必要があります。

リポジトリには、 CSSANS Proのすべてのファイルとプレゼンテーションサイトが含まれています。

フォントファイルは_src/cssans/sass/の下にあります。すべてのCSSカスタムプロパティは、 _common.scssに設定されています。

distディレクトリは、ファイルを更新する際にオンザフライを更新する必要があるため、編集が終了したらすぐに_distフォルダーからマイニングファイルをつかむことができます。

楽しむ！

拡大する

追加情報