Descargar CSSans.Pro - descarga de código fuente CSSans.Pro

CSSans.Pro

Descarga de fuentes

1.0.0

Descargar

CSSANS PRO - La fuente colorida, atrevida, CSS

CSSANS Pro es un proyecto CSS justo para el fun de Andronache Izabela y Codrin Pavel.

Tabla de contenido

Descripción general: todas las clases de caracteres y CSS
Inicio rápido: ponga en funcionamiento CSSans Pro en segundos
Inicio rápido - Versión de JavaScript - Deja que JS haga la escritura
Opción
- Bandera
- Espacio para cartas
- Espacios de palabras
- Altura de la línea
- Cursiva (texto inclinado)
- Alineación: centro
- Alineación: Correcto
Soporte del navegador: cómo usar sin variables CSS
Accesibilidad: super, super importante
Instalación: instrucciones para ejecutar este repositorio localmente

Descripción general

Mayúscula

A - Z

Minúscula

A - Z

Números

0 - 9

Símbolo

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

Símbolos escapados

` 
^ 
% 
[ 
] 
{ 
} 
" 
<< 
> 

|

Comienzo rápido

Tome el archivo CSS minificado del repositorio:

/dist/cssans.min.css

Agregue algún ejemplo de marcado 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 >

... ¡ganancia!

Aquí hay un desglose rápido:

Cada personaje es un solo elemento con una clase de cssans:CHAR
Cada palabra individual entra dentro de un contenedor .cssans__word . Esto se asegurará de que todo el texto esté espaciado correctamente.
Para mejorar la accesibilidad, debe agregar el texto original en un contenedor .cssans__accessible . Definitivamente lee esto
CSSANS PRO proporciona algunas opciones y clases auxiliares incorporadas como .cssans--center . Ver más opciones

Inicio rápido - Versión de JavaScript

Tome los archivos CSS y JS minificados del repositorio:

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

Agregue algún ejemplo de marcado HTML :

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

Llame CSSans(element, text)

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

Puede obtener la función CSSANS () sin minificaciones de /_src/cssans/js/cssans.js para ver qué está pasando allí. Nada, realmente, siéntete libre de hacer el tuyo.

Opción

Bandera

El palo de color está controlado por 5 variables CSS escritas como --cssans-**WHICHCOLOR**: **R**, **G**, **B** .

Esta notación usa solo los valores de color, sin la sintaxis 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

Espacio para cartas

 --cssans-letter-spacing : 0.1 em ;

Espacios de palabras

 --cssans-word-spacing : 1 em ;

Altura de la línea

 --cssans-line-height : 1.1 em ;

Alinear: Centro

Use la clase cssans--center en el contenedor que contiene el marcado de su fuente.

Esta clase se asegurará de que todas las palabras se alineen correctamente en el medio del contenedor principal.

Simplemente configurar text-align:center; No funcionará tan bien ya que las palabras están separadas por márgenes.

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

Alinear: Correcto

Use la clase cssans--right en el contenedor que contiene el marcado de su fuente.

Esta clase lo ayudará a alinear adecuadamente el texto con el lado derecho del contenedor principal.

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

Cursiva (inclinada)

Use la clase cssans--slanted en el contenedor que contiene el marcado de su fuente para darle a la fuente un aspecto en cursiva .

NOTA: Esta clase literalmente agrega transform: skew(-15deg); a cada .cssans__word . ¿Siéntete libre de experimentar?

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

Soporte del navegador

CSSANS Pro puede trabajar en navegadores más antiguos que no admiten propiedades personalizadas CSS. Aquí hay algunas maneras de hacerlo, elija el que mejor se adapte:

Utilice la versión compatible con IE prebuilt de CSSans Pro /dist/cssans.min.ie.css : este archivo no contiene variables CSS, todo el código está precompilado a las propiedades normales de CSS. Siéntase libre de encontrar/reemplazar todos los colores y espacios que desea personalizar.
Instale el repositorio localmente y cree su propia versión de cssans.min.ie.css o ...
Use un PolyFil, como CSS-Vars-Ponyfill

Accesibilidad

No necesita leer esto si usa la función JavaScript CSSans() .

CSSANS Pro está hecho de formas CSS que los lectores de pantalla y otras tecnologías de asistencia no pueden identificar.

Para mantener su sitio accesible, utilice la clase .cssans__accessible incorporada. Es realmente fácil, mira:

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

Instalación

Necesitará un entorno Jekyll en funcionamiento y NPM instalado en su máquina. Una vez que haya instalado NPM, deberá instalar gulp en su directorio de raíz global si aún no lo ha hecho con npm install -g gulp . Asegúrese de que estos funcionen en su sistema antes de continuar.
Clonar el repositorio
Instalar dependencias con npm install
gulp

En este punto, BrowserSync debería abrir una nueva pestaña del navegador en http://localhost:3000 y listo!

El repositorio contiene todos los archivos para CSSANS Pro , así como el sitio de presentación.

Puede encontrar los archivos de fuentes en _src/cssans/sass/ . Todas las propiedades personalizadas de CSS se establecen en _common.scss .

El directorio dist debe actualizar sobre la marcha mientras actualiza los archivos, para que pueda obtener los archivos minificados de la carpeta _dist tan pronto como termine de editar.

¡Divertirse!

Expandir

Información adicional