CSSans.Pro
1.0.0
CSSans Pro ist ein Just-for-Fun-CSS-Projekt von Andronache Izabela und Codrin Pavel.
<b class="cssans:LETTER"></b> <b class="cssans:letter"></b> <b class="cssans:NUMBER"></b> <b class="cssans:CHARACTER"></b> <b class="cssans:%60"></b><b class="cssans:%5E"></b><b class="cssans:%25"></b><b class="cssans:%5B"></b><b class="cssans:%5D"></b><b class="cssans:%7B"></b><b class="cssans:%7D"></b><b class="cssans:%22"></b><b class="cssans:%3C"></b><b class="cssans:%3E"></b><b class="cssans:%5C"></b><b class="cssans:%7C"></b> Nehmen Sie die Minimified CSS -Datei aus dem Repo:
/dist/cssans.min.css Fügen Sie ein paar HTML -Markups hinzu:
< 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 >... Gewinn!
Hier ist ein kurzer Zusammenbruch:
cssans:CHAR.cssans__word -Container. Dadurch wird sichergestellt, dass der gesamte Text ordnungsgemäß verteilt ist..cssans__accessible Container hinzufügen. Lesen Sie das auf jeden Fall.cssans--center . Weitere Optionen sehen Sie Nehmen Sie die Minimified CSS- und JS -Dateien aus dem Repo:
/dist/cssans.min.css/dist/cssans.min.js Fügen Sie ein paar HTML -Markups hinzu:
< div id =" foo " > CSSans Pro </ div > Rufen Sie CSSans(element, text)
var element = document . getElementById ( 'foo' ) ;
var text = element . innerText ;
CSSans ( element , text ) ;Sie können die nicht mit
/_src/cssans/js/cssans.jsentzündete Funktion für unminifizierte cssans () greifen, um zu sehen, was dort vor sich geht. Nicht viel, wirklich, können Sie sich frei machen, Ihre eigenen zu machen.
Die Farbpallete wird durch 5 CSS-Variablen gesteuert, die als --cssans-**WHICHCOLOR**: **R**, **G**, **B** geschrieben wurden.
Diese Notation verwendet nur die Farbwerte ohne die rgb() -Syntax.
--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 ; Verwenden Sie die cssans--center -Klasse im Container, der Ihr Schriftart-Markup hält.
Diese Klasse sorgt dafür, dass alle Wörter in der Mitte des übergeordneten Containers richtig ausgerichtet sind.
Einfach
text-align:center;Wird nicht so gut abschneiden, da die Worte durch Ränder getrennt sind.
< div class =" cssans--center " >
< div class =" cssans__word " > ... </ div >
</ div > Verwenden Sie die cssans--right auf dem Container, in dem Ihr Schriftart-Markup hält.
Diese Klasse hilft Ihnen dabei, den Text ordnungsgemäß auf der rechten Seite des übergeordneten Containers auszurichten.
< div class =" cssans--right " >
< div class =" cssans__word " > ... </ div >
</ div > Verwenden Sie die cssans--slanted Klasse auf dem Container, in dem Ihr Schriftart-Markup hält, um der Schriftart einen kursiven Look zu verleihen.
HINWEIS: Diese Klasse fügt wörtlich transform: skew(-15deg); zu jedem .cssans__word . Fühlen Sie sich frei zu experimentieren?
< div class =" cssans--slanted " >
< div class =" cssans__word " > ... </ div >
</ div > CSSans Pro kann an älteren Browsern arbeiten, die keine CSS -benutzerdefinierten Eigenschaften unterstützen. Hier sind ein paar Möglichkeiten, dies zu tun. Wählen Sie das aus, das am besten passt:
Verwenden Sie die vorgefertigte IE -kompatible Version von CSSans pro /dist/cssans.min.ie.css - Diese Datei enthält keine CSS -Variablen, der gesamte Code wird den normalen CSS -Eigenschaften vorkompiliert. Fühlen Sie sich frei, alle Farben und Bereiche zu finden/zu ersetzen, die Sie anpassen möchten.
Installieren Sie das Repo lokal und erstellen Sie Ihre eigene Version von cssans.min.ie.css oder ...
Verwenden Sie ein Polyfil, wie CSS-Vars-PonyFill
Sie müssen dies nicht lesen, wenn Sie die JavaScript -Funktion
CSSans()verwenden.
CSSans Pro besteht aus CSS -Formen, die Screen -Leser und andere assistive Technologien nicht identifizieren können.
Um Ihre Website zugänglich zu halten, verwenden Sie bitte die integrierte .cssans__accessible -Klasse. Es ist wirklich einfach, schau:
< div class =" cssans__accessible " > I can be read by a screen reader, hurray! </ div > Sie benötigen eine funktionierende Jekyll -Umgebung und NPM auf Ihrem Computer. Sobald Sie NPM installiert haben, müssen Sie gulp in Ihr globales Root -Verzeichnis installieren, wenn Sie noch nicht mit npm install -g gulp noch nicht. Stellen Sie sicher, dass diese an Ihrem System arbeiten, bevor Sie fortfahren.
Klonen Sie das Repo
Installieren Sie Abhängigkeiten mit npm install
gulp ausführen
Zu diesem Zeitpunkt sollte BrowserSync unter http://localhost:3000 eine neue Browser -Registerkarte öffnen, und Sie können loslegen!
Das Repository enthält alle Dateien für CSSans Pro sowie die Präsentationsseite.
Sie finden die Schriftdateien unter _src/cssans/sass/ . Alle CSS -benutzerdefinierten Eigenschaften sind in _common.scss festgelegt.
Das dist -Verzeichnis sollte während der Aktualisierung der Dateien auf dem Laufenden aktualisieren, sodass Sie die Minimified Dateien aus dem Ordner _dist abrufen können, sobald Sie die Bearbeitung beendet haben.
Viel Spaß!
