Unduh CSSans.Pro - CSSans.Pro Kode Sumber Unduh

CSSans.Pro

Pengunduhan font

1.0.0

Unduh

CSSANS Pro - Font yang penuh warna, Sassy, CSS

CSSANS Pro adalah proyek CSS yang hanya menyenangkan oleh Andronache Izabela dan Codrin Pavel.

Daftar isi

Tinjauan Umum - Semua Karakter & Kelas CSS
Mulai Cepat - Dapatkan CSSANS Pro dan Berjalan dalam hitungan detik
Mulai Cepat - Versi JavaScript - Biarkan JS melakukan tulisan
Opsi
- Warna
- Spasi surat
- Spasi-kata
- Tinggi garis
- Miring (teks miring)
- Alignment: Center
- Alignment: Benar
Dukungan Browser - Cara menggunakan tanpa variabel CSS
Aksesibilitas - super, super penting
Instalasi - Instruksi untuk menjalankan repo ini secara lokal

Ringkasan

Huruf besar

A - z

Huruf kecil

a - z

Angka

0 - 9

Simbol

! ~ ,.*()?@:; '-+=/& $#_

Simbol yang lolos

` 
^ 
% 
[ 
] 
{ 
} 
" 
<< 
> 

|

Awal yang cepat

Raih file CSS yang diminifikasi dari repo:

/dist/cssans.min.css

Tambahkan beberapa contoh HTML markup:

 < 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 >

... laba!

Inilah gangguan cepat:

Setiap karakter adalah elemen tunggal dengan kelas cssans:CHAR
Setiap kata individu masuk ke dalam wadah .cssans__word . Ini akan memastikan semua teks sedang ditempatkan dengan benar.
Untuk aksesibilitas yang lebih baik, Anda harus menambahkan teks asli dalam wadah .cssans__accessible . Baca ini pasti
CSSANS Pro menyediakan beberapa opsi dan kelas pembantu bawaan seperti .cssans--center . Lihat lebih banyak opsi

Mulai Cepat - Versi JavaScript

Raih file CSS dan JS yang diminifikasi dari repo:

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

Tambahkan beberapa contoh HTML markup:

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

Hubungi CSSans(element, text)

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

Anda dapat mengambil fungsi cssans () yang tidak dikenali dari /_src/cssans/js/cssans.js untuk melihat apa yang terjadi di sana. Tidak banyak, sungguh, jangan ragu untuk membuat sendiri.

Opsi

Warna

Palet warna dikendalikan oleh 5 variabel CSS yang ditulis sebagai --cssans-**WHICHCOLOR**: **R**, **G**, **B** .

Notasi ini hanya menggunakan nilai warna, tanpa sintaks 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

Spasi surat

 --cssans-letter-spacing : 0.1 em ;

Spasi-kata

 --cssans-word-spacing : 1 em ;

Tinggi garis

 --cssans-line-height : 1.1 em ;

Align: Center

Gunakan kelas cssans--center pada wadah yang menahan markup font Anda.

Kelas ini akan memastikan semua kata sejajar dengan benar di tengah wadah induk.

Cukup mengatur text-align:center; Tidak akan melakukannya dengan baik karena kata -kata dipisahkan oleh margin.

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

Align: Benar

Gunakan cssans--right pada wadah yang menahan markup font Anda.

Kelas ini akan membantu Anda menyelaraskan teks dengan benar ke sisi kanan wadah induk.

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

Miring (miring)

Gunakan cssans--slanted pada wadah yang memegang markup font Anda untuk memberikan font tampilan yang dicetak miring .

CATATAN: Kelas ini secara harfiah menambahkan transform: skew(-15deg); untuk setiap .cssans__word . Jangan ragu untuk bereksperimen?

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

Dukungan Browser

CSSANS Pro dapat bekerja pada browser yang lebih lama yang tidak mendukung properti khusus CSS. Berikut beberapa cara untuk melakukan itu, pilih satu yang paling cocok:

Gunakan versi kompatibel Prebuilt IE dari CSSANS Pro /dist/cssans.min.ie.css - file ini tidak mengandung variabel CSS, semua kode dikompilasi ke properti CSS normal. Jangan ragu untuk menemukan/mengganti semua warna dan jarak yang ingin Anda sesuaikan.
Instal repo secara lokal dan bangun versi Anda sendiri dari cssans.min.ie.css atau ...
Gunakan polyfil, seperti css-vars-ponyfill

Aksesibilitas

Anda tidak perlu membaca ini jika Anda menggunakan fungsi javascript CSSans() .

CSSANS Pro terbuat dari bentuk CSS yang tidak dapat diidentifikasi oleh pembaca bantu dan teknologi bantuan lainnya.

Agar dapat menjaga situs Anda dapat diakses, silakan gunakan kelas .cssans__accessible yang dapat diakses. Sangat mudah, lihat:

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

Instalasi

Anda akan membutuhkan lingkungan Jekyll yang berfungsi dan NPM yang diinstal pada mesin Anda. Setelah Anda menginstal NPM, Anda harus menginstal gulp ke Direktori Root Global Anda jika Anda belum melakukannya dengan npm install -g gulp . Pastikan ini bekerja pada sistem Anda sebelum melanjutkan.
Kloning repo
Instal dependensi dengan npm install
Jalankan gulp

Pada titik ini, Browsersync harus membuka tab browser baru di http://localhost:3000 dan Anda siap berangkat!

Repositori berisi semua file untuk CSSANS Pro , serta situs presentasi.

Anda dapat menemukan file font di bawah _src/cssans/sass/ . Semua properti kustom CSS diatur dalam _common.scss .

Distory dist harus memperbarui secara online saat Anda memperbarui file, sehingga Anda dapat mengambil file yang lebih banyak dari folder _dist segera setelah Anda selesai mengedit.

Selamat bersenang-senang!

Memperluas

Informasi Tambahan