CSSans.Pro Download - CSSans.Pro download do código -fonte

CSSans.Pro

Baixar fonte

1.0.0

Baixar

CSSANS Pro - a fonte colorida, atrevida, CSS

O CSSANS PRO é um projeto CSS Just-Por-Fun de Andronache Izabela e Codrin Pavel.

Índice

Visão geral - todas as classes de personagens e CSS
Início rápido - Obtenha o CSSANS Pro em funcionamento em segundos
Início rápido - versão JavaScript - deixe JS fazer a escrita
Opções
- Cores
- Espaçamento de cartas
- Espaçamento de palavras
- Altura da linha
- Itálico (texto inclinado)
- Alinhamento: centro
- Alinhamento: certo
Suporte ao navegador - Como usar sem variáveis CSS
Acessibilidade - super, super importante
Instalação - Instruções para executar este repositório localmente

Visão geral

Maiúsculas

A - z

Minúsculo

a - z

Números

0 - 9

Símbolos

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

Símbolos escapados

` 
^ 
% 
[ 
] 
{ 
} 
" 
<< 
> 

|

Início rápido

Pegue o arquivo CSS minificado do repositório:

/dist/cssans.min.css

Adicione um exemplo de marcação 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 >

... lucro!

Aqui está um colapso rápido:

Cada personagem é um único elemento com uma classe de cssans:CHAR
Cada palavra individual entra em um contêiner .cssans__word . Isso garantirá que todo o texto esteja sendo espaçado corretamente.
Para uma acessibilidade aprimorada, você deve adicionar o texto original em um contêiner .cssans__accessible . Definitivamente leia isso
O CSSANS Pro fornece algumas opções e classes de auxiliar embutidas, como .cssans--center . Veja mais opções

Início rápido - versão JavaScript

Pegue os arquivos Minified CSS e JS do repositório:

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

Adicione um exemplo de marcação HTML :

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

Ligue para CSSans(element, text)

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

Você pode pegar a função CSSANS () desnificada de /_src/cssans/js/cssans.js para ver o que está acontecendo lá. Nada muito, realmente, sinta -se à vontade para fazer o seu.

Opções

Cores

O palete de cores é controlado por 5 variáveis CSS escritas como --cssans-**WHICHCOLOR**: **R**, **G**, **B** .

Essa notação usa apenas os valores de cores, sem a sintaxe 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

Espaçamento de cartas

 --cssans-letter-spacing : 0.1 em ;

Espaçamento de palavras

 --cssans-word-spacing : 1 em ;

Altura da linha

 --cssans-line-height : 1.1 em ;

Alinhe: centro

Use a classe cssans--center no contêiner que mantém sua marcação de fonte.

Esta classe garantirá que todas as palavras se alinhem corretamente no meio do contêiner pai.

Simplesmente definindo text-align:center; Não vai se sair tão bem, pois as palavras são separadas por margens.

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

Alinhe: certo

Use o cssans--right no contêiner que mantém sua marcação de fonte.

Esta classe o ajudará a alinhar corretamente o texto ao lado direito do contêiner pai.

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

Itálico (inclinado)

Use o cssans--slanted no contêiner que mantém sua marcação de fonte para dar à fonte uma aparência em itálico .

Nota: Esta classe literalmente adiciona transform: skew(-15deg); para cada .cssans__word . Sinta -se à vontade para experimentar?

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

Suporte do navegador

O CSSANS Pro pode funcionar em navegadores mais antigos que não suportam propriedades personalizadas do CSS. Aqui estão algumas maneiras de fazer isso, escolha a que melhor se adapta:

Use a versão compatível pré -construída do CSSANS pro /dist/cssans.min.ie.css - Este arquivo não contém variáveis CSS, todo o código é pré -compilado para propriedades normais do CSS. Sinta -se à vontade para encontrar/substituir todas as cores e espaçamentos que você deseja personalizar.
Instale o repositório localmente e construa sua própria versão do cssans.min.ie.css ou ...
Use um polifil, como CSS-Vars-Ponyfill

Acessibilidade

Você não precisa ler isso se usar a função JavaScript CSSans() .

O CSSANS Pro é feito de formas de CSS que os leitores de tela e outras tecnologias de assistência não podem identificar.

Para manter o site acessível, use a classe .cssans__accessible acessível. É muito fácil, olhe:

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

Instalação

Você precisará de um ambiente Jekyll em funcionamento e NPM instalado em sua máquina. Depois de instalar o NPM, você precisará instalar gulp no seu diretório raiz global, se você ainda não o fez com npm install -g gulp . Verifique se eles estão funcionando no seu sistema antes de prosseguir.
Clone o repo
Instale dependências com npm install
Run gulp

Neste ponto, o BrowSerSync deve abrir uma nova guia do navegador em http://localhost:3000 e você está pronto para ir!

O repositório contém todos os arquivos para o CSSANS Pro , bem como o site de apresentação.

Você pode encontrar os arquivos de fonte em _src/cssans/sass/ . Todas as propriedades personalizadas do CSS estão definidas em _common.scss .

O diretório dist deve ser atualizado sobre a fly ao atualizar os arquivos, para que você possa pegar os arquivos minificados da pasta _dist assim que terminar de editar.

Divirta-se!

Expandir

Informações adicionais