unitscss

Einheiten

Einfacher und schöner Komponentensatz.

https://unitscss.com/

Dokumentieren

Englisch / 日本語

Besonderheit

Einheiten ist ein einfaches und schönes Komponentensatz. Sie müssen lediglich CSS -Dateien laden, Snippets kopieren und einfügen, so einfach, dass jeder verwenden kann.

• Schnell benutzen
  Alles, was Sie tun müssen, ist nur Einheiten.css zu setzen. Es wurden bereits mehrere Komponenten erstellt und Sie können Komponenten auswählen, die Sie verwenden möchten, und sie auf Ihrer Website anwenden.

• Einfach und schön
  Jede Komponenten sind wunderschön gestaltet. Das Design wird regelmäßig aktualisiert, wir werden keine großen Änderungen anwenden, sondern nur kleine Änderungen anwenden, z. B. die Anpassung der Margen.

• Unterstützen Sie den modernen Browser
  Einheiten werden optimiert, um auf dem modernen Browser wie Microsoft Edge, Google Chrome, Firefox, Safari, wie mit alten Browsern verwendet zu werden? ... Es tut mir Leid.

• Responsive Webdesign
  Wir verwenden Responsive Webdesign -Ansätze, um ein optimiertes Design auf allen Geräten anzuzeigen.

• Periodisches Update
  Einheiten sind immer noch eine Beta -Version, die regelmäßig auf eine Hauptversion aktualisiert wird. Unitil Die Hauptversion werden neue Komponenten hinzufügen, die Quellcodes optimieren und ihr Design anpassen.

• Japanisch unterstützen
  Weil die Entwickler Japaner sind, die wir auf Japanisch unterstützen können. Wir haben Webseiten optimiert und Dokumente auf Japanisch aktualisiert.

Installation

Einheiten selbst können durch Klonen oder als ZIP -Format aus GitHub heruntergeladen werden, oder Sie können es über NPM herunterladen.

$ git clone https://github.com/kokushin/unitscss.git

$ npm install unitscss --save

Laden wir die erforderlichen Dateien.

 < link rel =" stylesheet " href =" https://fonts.googleapis.com/css?family=Roboto:400,700 " >
< link rel =" stylesheet " href =" path/to/units.min.css " >

< script src =" path/to/units.min.js " > </ script > 

Verwendung

Schreiben Sie genaue HTML-Snippets und geben Sie ihm die richtigen Klassen, beginnend mit uc- . Beispielsweise können Sie in der unten stehenden Beispiele eine Kartenkomponente mit abgedeckten Bild anbringen.

 < div class =" uc-card _float " >
  < div class =" uc-card-image " style =" background-image:url(https://source.unsplash.com/random) " > </ div >
  < h3 class =" uc-card-title " > Sample card </ h3 >
  < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur, et. </ p >
  < div class =" uc-btn _primary " > < a href =" # " > Button </ a > </ div >
</ div >

Es wird auf dem Browser wie folgt angezeigt:

Demo

https://unitscss.com/themes/

Ausschnitte

Bitte überprüfen Sie Codepen.

Herunterladen

Download Reißverschluss

Github

https://github.com/kokushin/units

Mitwirkender

@kokushin

Lizenz

Code und Dokumentation Copyright 2017 von Kokushin. Code, der unter der MIT -Lizenz veröffentlicht wurde.