CLI-verkøyet til Punkt, et designsystem laget av Oslo Origo
npm install @oslokommune/punkt-cliOBS! Denne pakken er veldig utdatert og det er ingen situasjoner hvor du skulle trenge å bruke den.
Punkt har fått et kommandolinjeverktøy; punkt 🥳 for bruk i
terminalen eller scripts.
OBS: Denne pakken er utdatert og vi anbefaler å heller bruke manuelle prosesser og CDN som beskrevet på våre nettsider.
Node >= 20.19.1 installert
``sh`
npm install -g @oslokommune/punkt-cli
- punkt gir deg en oversikt over kommandoene og options.punkt init
- initierer designsystemet for bruk i din applikasjon.pkt.config.json
Lager også en fil basert på valg som tas i oppsettet.punkt svg sprite
- generer svg sprites basert på punkt.config.json.
Denne kommandoen initierer designsystemet.
Fordeler
- Oppretter konfig-filen for deg.
- Gir deg muligheten til å installere andre pakker i designsystemet.
- Legger til grunnleggende SVG-ikoner i appen din, om du ønsker.
- Gir deg personaliserte tips basert på dine svar og package.json i applikasjonen
din.
punkt.config.json kan eksempelvis se slik ut:
`json`
{
"svgsprite": {
"files": [
/ SVG-filer i svgsprite / "../assets/src/icons/check.svg",
"../assets/src/icons/24h.svg",
"../assets/src/icons/share.svg"
],
"output": {
"fileType": "html" / html|svg /,
"filePath": "./index.html" / sti til destinasjonsfilen /
}
}
}
Komponentbibliotekene i Punkt designsystem forutsetter at en såkalt SVG Sprite eller
SVG Symbols er tilgjengelig på siden. Det kan du lese mer om her:
Multi-Colored SVG Symbol Icons with CSS Variables.
Denne kommandoen genererer en slik svgsprite for deg. Den trenger at
designsystemet er initiert.
Kommandoen er avhengig av følgende verdier i konfig:
- svgsprite.files --> Array med stier til SVG ikoner.svgsprite.output.fileType
- --> Streng bestående av en av disse verdiene:html
- - svgsprite inlines i et element i en html-fil (se under).svg
- - svgsprite skrives i en SVG-fil.svgsprite.output.filePath
- --> Streng bestående av sti til output-filen.
MERK! Om du velger å inline i en HTML-fil skal du legge til dette elementet«:
`html`
Når brukes denne kommandoen? Hver gang du legger til eller tar bort en SVG.
Hvis du har importert inn alert-information kan du nå ta den i bruk slik:
`html`
Bruk dette tekstfeltet til å skrive en kort varsling.
Punkt bruker Semantic Versioning 2.0.0 for versjonering av pakkene.
Punkt` er distribuert under MIT-lisens for åpen kildekode.