CSSans.Pro скачать - CSSans.Pro исходный код скачать

CSSans.Pro

Загрузка шрифта

1.0.0

Скачать

Cssans Pro - красочный, нахальный, CSS Font

CSSANS Pro -это только что For-Fun CSS-проект от Andronache Izabela и Codrin Pavel.

Обзор - Все персонажи и классы CSS
Quick Start - Получите CSSANS PRO и работает за считанные секунды
Quick Start - javascript версия - пусть JS сделает написание
Параметры
- Цвета
- СКАЖИ САМ
- СКАЖИ СЛОВА
- Линейная высота
- Курсив (наклонный текст)
- Выравнивание: центр
- Выравнивание: верно
Поддержка браузера - как использовать без переменных CSS
Доступность - супер, очень важный
Установка - Инструкции по запуску этого репо локально

Обзор

Пропусков

A - z

Нижний регистр

a - z

Числа

0 - 9

Символы

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

Сбежали символы

` 
^ 
% 
[ 
] 
{ 
} 
" 
<< 
> 

|

Быстрый старт

Возьмите минимизированный файл CSS из репо:

/dist/cssans.min.css

Добавьте в какой -то пример 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 >

... выгода!

Вот быстрый срыв:

Каждый символ - это единственный элемент с классом cssans:CHAR
Каждое отдельное слово заходит в контейнер .cssans__word . Это убедится, что весь текст будет расположен должным образом.
Для улучшения доступности вы должны добавить исходный текст в .cssans__accessible . Определенно прочитайте это
CSSANS Pro предоставляет некоторые варианты и встроенные помощники, такие как .cssans--center . Смотрите больше вариантов

Quick Start - javascript версия

Возьмите минимизированные файлы CSS и JS из репо:

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

Добавьте в какой -то пример HTML Markup:

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

Вызовите CSSans(element, text)

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

Вы можете воспользоваться неизменной функцией cssans () от /_src/cssans/js/cssans.js чтобы увидеть, что там происходит. Ничего особенного, на самом деле, не стесняйтесь сделать свой собственный.

Параметры

Цвета

Цветная паллета контролируется 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 класс на контейнере, который удерживает наценку шрифта, чтобы придать шрифту курсивый вид.

Примечание: этот класс буквально добавляет transform: skew(-15deg); каждому .cssans__word . Не стесняйтесь экспериментировать?

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

Поддержка браузера

CSSANS Pro может работать над более старыми браузерами, которые не поддерживают пользовательские свойства CSS. Вот несколько способов сделать это, выберите тот, который лучше всего подходит:

Используйте предварительную совместимую версию IE CSSANS PRO /dist/cssans.min.ie.css - Этот файл не содержит переменных CSS, весь код предварительно скоптирован по нормальным свойствам CSS. Не стесняйтесь находить/заменить все цвета и расстояния, которые вы хотели бы настроить.
Установите репо локально и создайте свою собственную версию cssans.min.ie.css или ...
Используйте полифил, такой как CSS-VARS-PonyFill

Доступность

Вам не нужно читать это, если вы используете функцию JavaScript CSSans() .

CSSANS PRO изготавливается из форм CSS, которые читатели экрана и другие вспомогательные технологии не могут идентифицировать.

Чтобы держать ваш сайт доступным, используйте встроенный класс .cssans__accessible ____. Это действительно легко, смотри:

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

Установка

Вам понадобится работающая среда Jekyll и NPM , установленная на вашей машине. После того, как вы установили NPM, вам нужно будет установить gulp в свой глобальный корневый каталог, если вы еще не с помощью npm install -g gulp . Убедитесь, что они работают над вашей системой, прежде чем продолжить.
Клонировать репо
Установить зависимости с npm install
gulp

На этом этапе BrowserSync должна открыть новую вкладку браузера по адресу http://localhost:3000 , и все готово!

Репозиторий содержит все файлы для CSSans Pro , а также сайт презентации.

Вы можете найти файлы шрифтов в _src/cssans/sass/ . Все пользовательские свойства CSS устанавливаются в _common.scss .

Справочник dist должен обновлять на лету при обновлении файлов, поэтому вы можете взять минимизированные файлы из папки _dist , как только закончите редактирование.

Веселиться!

Расширять

Дополнительная информация