Skip to content

Latest commit

 

History

History
183 lines (121 loc) · 9.33 KB

README.de.md

File metadata and controls

183 lines (121 loc) · 9.33 KB

Mirrorful Mirrorful

Erstellen Sie die Bausteine für Ihre Anwendung mit einem einfachen und Open-Source-Designsystem.

Slack | Website | NPM Package |

Mirrorful is released under the MIT license. PRs welcome! git commit activity Mirrorful downloads Slack community channel Mirrorful Twitter

Mirrorful Dashboard

Mirrorful ist ein einfaches, Open-Source-Designsystem. Installieren Sie Mirrorful, um Farben und andere Design-Token für Ihr Projekt zu generieren. Importieren Sie diese Tokens dann direkt in Ihre App als CSS-Variablen oder JSON. Nehmen Sie sich heute 5 Minuten Zeit und gestalten Sie für Langlebigkeit und Skalierbarkeit.

Erstellen Sie die Bausteine für eine schnelle Frontend-Entwicklung!

  • Starte neue Projekte mit einer Single Source of Truth
  • Ändere visuell dein Theme
  • Generiere Farben
  • 🔜 Theme-Vorlagen
  • 🔜 Lightweight Headless Komponenten Bibliothek
  • 🔜 Eslint-Regeln
  • 🔜 Teile Tokens zwischen Projekten
  • 🔜 Figma-Integration

Und mehr...

🎨 Warum sollte ich Mirrorful nutzen?

Designsysteme sind die Bausteine Ihrer App, aber viele Projekte setzen sie erst ein, wenn es schon zu spät ist, da sie schwer richtig einzurichten sind. Mit Mirrorful können Sie ein grundlegendes Designsystem in wenigen Minuten einrichten und gleichzeitig Flexibilität für spätere Anpassungen bewahren. Es ist leicht und denkbar einfach.

Wir haben es uns zur Aufgabe gemacht, Ihr Projekt so schön wie möglich zu gestalten. Die Messlatte für hochwertiges Design wird immer höher gelegt. Wir möchten allen dabei helfen, neue (und bestehende!) Projekte mit einfachen Designmerkmalen zu versehen.

Einfache Designsysteme beschleunigen auch die Entwicklung - selbst bei Projekten im Frühstadium! Einem Bericht zufolge ist es 47 % schneller, ein einfaches Online-Formular mit einem Designsystem zu erstellen. Ein Designsystem ist nützlich für Ingenieure, Designer und vor allem für Ihre Kunden, damit es nicht für jede Schaltfläche in Ihrer App eine zufällige Farbe gibt.

🚀 Los geht's

Mirrorful ist ein NPM-Paket, das als devDependency installiert werden sollte.

npm install mirrorful -D

oder

yarn add mirrorful --dev

✨ Nutzung

Die folgenden Befehle starten einen lokalen Editor unter localhost:5050.

yarn run mirrorful

or

npx mirrorful

💿 Formate exportieren

Nachdem Sie Ihr Theme im Editor konfiguriert haben, können Sie es exportieren, um es in Ihrer Anwendung zu verwenden.

Wir exportieren derzeit in folgende Dateitformate: .js, .ts, .css, .scss, .json

Sie können dann entweder Ihre neuen Token als CSS-Variablen oder JavaScript-Konstanten verwenden!

Verwenden von CSS-Variablen

Beispiel:

.primary-button {
  background-color: var(--color-primary);
}

.primary-button:hover {
  background-color: var(--color-primary-hover);
}

JavaScript-Konstanten verwenden

Beispiel:

<button backgroundColor={{ Tokens.primary.base }}>Click here</button>

🤝 Agnostische Komponentenbibliothek

Wir bemühen uns, unabhängig von Komponentenbibliotheken zu sein. Ganz gleich, ob Sie Material UI, Chakra UI, Tailwind, Ant Design oder sogar Ihre eigene Bibliothek verwenden, Mirrorful fügt sich nahtlos ein.

⚠️ create-react-app warnt möglicherweise, dass Sie versuchen, von außerhalb des src-Verzeichnisses zu importieren. Wir arbeiten an einer langfristigen Lösung, aber im Moment würden wir empfehlen, eine Kopie des Ordners .mirrorful in Ihrem src-Verzeichnis zu erstellen.

Schauen Sie sich die Beispiele an:

Suchen Sie ein konkretes Beispiel? Fragen Sie hier eines an!

❤️ Community & Unterstützung

  • Slack - für Live-Diskussionen mit der Community und dem Mirrorful-Team.
  • GitHub Discussions - für Hilfe bei der Erstellung und tiefergehende Gespräche über Funktionen.
  • GitHub Issues - für alle Bugs und Fehler, auf die Sie bei Mirrorful stoßen.
  • Twitter - Bleiben Sie auf dem Laufenden über die neuesten Produktaktualisierungen. Teilen Sie Ihre Memes!

🏘 Open-Source vs. Bezahlt

Dieses Repo ist vollständig MIT-lizenziert, mit Ausnahme derjenigen, die unter dem ee-Verzeichnis liegen und Premium-Unternehmensfunktionen enthalten, die eine Mirrorful-Lizenz erfordern. Wir konzentrieren uns derzeit zunächst auf die Entwicklung von Nicht-Unternehmensangeboten, die für die meisten Anwendungsfälle geeignet sein sollten.

Wir arbeiten hart daran, Mirrorful noch umfangreicher zu machen. Benötigen Sie Integrationen oder wollen Sie ein neues Feature? Fühlen Sie sich frei ein Issue zu erstellen oder tragen Sie direkt zum Repository bei. (Der erste Entwurf dieser README wurde von einem Mitwirkenden erstellt!)

🛡 Sicherheit

Mirrorful nimmt Sicherheitsfragen sehr ernst. Wenn Sie Bedenken bezüglich Mirrorful haben oder glauben, eine Sicherheitslücke entdeckt zu haben, wenden Sie sich bitte an die folgende E-Mail-Adresse support@mirrorful.io. Versuchen Sie in der Nachricht, das Problem zu beschreiben und es im Idealfall zu reproduzieren. Das Team wird sich unverzüglich mit Ihnen in Verbindung setzen.

Bitte reichen Sie keine GitHub-Probleme ein und posten Sie keine Sicherheitslücken in unserem öffentlichen Forum, da diese öffentlich sind.

⭐ Bleiben Sie auf dem Laufenden

Es gibt eine Menge neuer Funktionen, die sehr häufig erscheinen. Geben Sie diesem Repo eine Stern, um auf dem Laufenden zu bleiben.

Bauen

🛠️ Mitwirken

Ob groß oder klein, wir lieben Beiträge. Die Betreuer dieses Repos haben schon früher Open-Source-Projekte aufgebaut und lieben es. Herzlich willkommen!

Sie wissen nicht, wo Sie anfangen sollen? Sie können:

Unabhängig von dem PR werden alle GitHub-Avatare der Mitwirkenden mit deren Erlaubnis in die README von Mirrorful aufgenommen.

🪞 Mitwirkende

🌎 Übersetzungen

Mirrorful ist derzeit auf Englisch, Deutsch und demnächst auch auf Spanisch verfügbar. Helfen Sie uns, unsere Dokumentation und Benutzeroberfläche in Ihre Sprache zu übersetzen!

Alle Informationen finden Sie unter diesem Issue.