Skip to content

Latest commit

 

History

History
189 lines (131 loc) · 8.94 KB

README.sv.md

File metadata and controls

189 lines (131 loc) · 8.94 KB

Mirrorful Mirrorful

Skapa byggstenarna för din app med enkel och öppen källkods-designsystem-infrastruktur.

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 är en enkel och öppen källkods-designsystem-infrastruktur. Installera Mirrorful för att generera färger och andra design tokens för ditt projekt. Sedan, importera dessa token direkt in till din app som CSS variabler eller JSON. Tar 5 minuter per dag, designa i skala för evigt.

Skapa byggstenarna för snabb front-end utveckling!

  • Påbörja nya projekt med en sanningskälla
  • Modifiera ditt tema visuellt
  • Generera färger
  • 🔜 Tema Mallar
  • 🔜 Lättviktig bibliotek av huvudlösa komponenter
  • 🔜 Eslint regler
  • 🔜 Sprid tokens över projekt
  • 🔜 Figma integration

och mer...

🎨 Varför ska jag använda Mirrorful?

Designsystem är grundstenarna i din app, men många projekt tar inte upp dem förrän det är för sent eftersom de är svåra att sätta upp korrekt. Med Mirrorful kan du sätta upp ett grundläggande designsystem på några minuter samtidigt som du lämnar flexibilitet längre fram för anpassningar. Det är lättviktigt och väldigt enkelt.

Vi har som mål att hjälpa ditt projekt att vara så vackert som möjligt. Kraven på högkvalitativ design blir allt högre. Vi vill hjälpa alla att lägga till enkla designtokens till nya (och befintliga!) projekt.

Enkla designsystem ökar också utvecklingstakten - även för projekt i tidiga stadier! En rapport visar att det är 47% snabbare att bygga ett enkelt formulär med hjälp av ett designsystem. Det är användbart för ingenjörer, designers och framför allt dina kunder om det inte finns en slumpmässig färg för varje knapp i din app.

🚀 Kom igång

Mirrorful är ett NPM packet avsett att installeras som dev-dependency.

npm install mirrorful -D

eller

yarn add mirrorful -D

✨ Användning

Följande kommandon kommer att starta en lokal redigerare på localhost:5050

yarn run mirrorful

eller

npx mirrorful

💿 Exportera Format

Efter att ha konfigurerat ditt tema i redigeraren kan du exportera det för att använda det i din app.

För nuvarande exporterar vi till följande filtyper: .js, .ts, .css, .scss, .json

Använda CSS variabler

Exempel:

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

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

Använda JavaScript-konstanter

Exempel:

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

🤝 Komponentbibliotek-agnostisk

Vi strävar efter att vara komponentbiblioteksagnostiska. Oavsett om du använder Material UI, Chakra UI, Tailwind, Ant Design eller till och med ditt egna bibliotek, integrerar sig Mirrorful sömlöst.

⚠️ create-react-app kan varna för att du försöker importera från en plats utanför src-mappen. Vi arbetar på en långsiktig lösning, men för tillfället rekommenderar vi att du gör en kopia av .mirrorful-mappen i din src mapp

Titta på våra exempel:

Letar du efter ett specifikt exmepel? Begär en här!

❤️ Gemenskap & Support

  • Slack - för en levande diskussion med gemenskapen och Mirrorful-teamet.
  • GitHub Discussions - för hjälp med att bygga och djupare konversationer om funktioner.
  • GitHub Issues - för eventuella buggar och fel som du stöter på när du använder Mirrorful.
  • Twitter - håll dig uppdaterad med de senaste produktuppdateringarna. Dela dina memes!

🏘 Open-source vs. betald

Den här repo:en är helt licensierad under MIT-licensen, med undantag för eventuella filer under en ee katalog som innehåller företagsfunktioner s om kräver en Mirrorful-licens. För närvarande fokuserar vi på att utveckla icke-företagsmässiga erbjudanden som bör passa de flesta användningsfall.

Vi arbetar hårt för att göra Mirrorful mer omfattande. Behöver du några integreringar eller vill ha en ny funktion? Känn dig fri att skapa en issue eller bidra direkt till kodbasen. (Den första versionen av denna README gjordes av en bidragsgivare!)

🛡 Säkerhet

Mirrorful tar säkerhetsfrågor på stort allvar. Om du har några oro kring Mirrorful eller tror att du har upptäckt en sårbarhet, vänligen kontakta oss via e-postadressen [email protected]. Försök att ge en beskrivning av problemet och helst en metod för att återskapa det. Vårt team kommer att svara dig omedelbart.

⭐ Håll dig uppdaterad

Det finns många nya funktioner som kommer mycket frekvent. Klicka på stjärnan på det här projektet för att hålla dig uppdaterad.

Build

🛠️ Medverkan

Oavsett om det är stort eller litet, älskar vi bidrag. Underhållarna av den här repositoryn har tidigare byggt öppen källkod och älskar det. Välkommen!

Inte säker på var du ska börja? Du kan:

Oavsett PR kommer alla Github-avatars från bidragsgivare att läggas till i Mirrorful README med deras tillstånd.

🪞 Medverkande

🌎 Översättningar

Mirrorful finns för närvarande tillgängligt på Engelska, Tyska 🇩🇪 och Svenska 🇸🇪. Hjälp oss att översätta vår dokumentation och användargränssnitt till ditt språk!

All information finns i det här ärendet.