Ag tosú

Faigheann aipeanna rastrillo é seo ar fad ón gcéad lá, ach is féidir le haon duine an córas dearaidh a úsáid. Feabhsaithe go céimnitheach le JavaScript, ach níl JavaScript riachtanach.

Na stílbhileoga

Is é tokens.css an struchtúr: aicmí na gcomhpháirteanna, an leagan amach, agus na scálaí don chló, don spásáil agus don gha. Is tagairtí iad na luachanna, socraithe in áit eile. Is é themes/<name>.css an dath, an teaghlach cló agus an chruth: bloc :root amháin ina bhfógraítear gach dath uair amháin mar phéire light-dark().

Na scripteanna

Is é rastrillo.js an seim feabhsúcháin de réir a chéile: blúirí á vótáil, díbhe éadrom, tarraingt an lasc. Is é busy.js an riail ghnóthach. Coinníonn anchor.js roghchláir anuas ar an scáileán áit nach féidir le CSS. Is feabhsúcháin iad select.js agus datetime.js, gach ceann acu marbh go dtí go roghnaíonn rialtán isteach, agus gach ceann acu inscriosta leis féin.

Meáchan gach comhaid

Méideanna in KiB. Is é an leagan gzipáilte a íoslódálann cuairteoir.

• tokens.cssStruchtúr: gach aicme comhpháirte, gach scála, agus gan dath litriúil ar bith. An comhad céanna faoi gach téama.281 mar atá sé scríofa · 73 gzipáilte · 21 gzipáilte gan nótaí tráchta
• theme-day.cssDath, teaghlach cló agus cruth don téama day: bloc :root amháin ina bhfógraítear gach dath uair amháin mar phéire light-dark().27 mar atá sé scríofa · 7.3 gzipáilte · 1.7 gzipáilte gan nótaí tráchta
• theme-plain.cssDath, teaghlach cló agus cruth don téama plain: bloc :root amháin ina bhfógraítear gach dath uair amháin mar phéire light-dark().18 mar atá sé scríofa · 4.2 gzipáilte · 1.1 gzipáilte gan nótaí tráchta
• theme-signal.cssDath, teaghlach cló agus cruth don téama signal: bloc :root amháin ina bhfógraítear gach dath uair amháin mar phéire light-dark().18 mar atá sé scríofa · 4.6 gzipáilte · 1.2 gzipáilte gan nótaí tráchta
• shell.cssAn sleamhnán idir leathanaigh ar fhón, do na blaoscanna sidebar agus console. Inscriosta in éineacht le shell.js.4.2 mar atá sé scríofa · 1.1 gzipáilte · 0.5 gzipáilte gan nótaí tráchta
• rastrillo.jsAn seim feabhsúcháin de réir a chéile: blúirí á vótáil, díbhe éadrom agus tarraingt an lasc. Faigheann gach aip scafallaithe é.19 mar atá sé scríofa · 7.2 gzipáilte · 2.6 gzipáilte gan nótaí tráchta
• busy.jsAn riail ghnóthach: fad a sheolann foirm, taispeánann a cnaipe roth casta ar feadh 650ms ar a laghad agus diúltaíonn sé don dara seoladh, agus tugann Siar ar ais é. Faigheann gach aip scafallaithe é.15 mar atá sé scríofa · 5.3 gzipáilte · 1.3 gzipáilte gan nótaí tráchta
• live.jsLeathanaigh bheo: ranna a nuashonraíonn nuair a deir an freastalaí gur athraigh a gcuid sonraí, agus foirmeacha a shábhálann ina n-áit féin. Marbh go dtí go n-iompraíonn leathanach an meta-chlib rastrillo-live, agus inscriosta leis féin.29 mar atá sé scríofa · 10.0 gzipáilte · 5.0 gzipáilte gan nótaí tráchta
• light.jsAn solas a léann na stíleanna doimhneachta: scáthanna lasta de réir na huaire, agus loinnir ar an gcnaipe faoin bpointeoir. Scrios é don dearadh socair.11 mar atá sé scríofa · 4.1 gzipáilte · 2.1 gzipáilte gan nótaí tráchta
• anchor.jsCoinníonn sé roghchlár anuas ar an scáileán i mbrabhsálaithe gan suíomh ancaire CSS. Ní dhéanann sé faic áit a bhfuil sé acu: scrios é nuair a bheidh sé ag gach brabhsálaí a dtacaíonn tú leis.3.2 mar atá sé scríofa · 1.4 gzipáilte · 0.6 gzipáilte gan nótaí tráchta
• shell.jsNascleanúint fóin do na blaoscanna sidebar agus console: an sleamhnán idir leathanaigh, Siar a athúsáideann an stair, agus an fócas ar ais ar an rannán a d'fhág tú. Inscriosta leis féin.8.0 mar atá sé scríofa · 3.2 gzipáilte · 1.4 gzipáilte gan nótaí tráchta
• transition.jsCuireann sé cosc ar earráid a logáil nuair a scipeáiltear trasdul leathanaigh ar leathanaigh column, stage agus topbar. Níl sé de dhíth ar leathanaigh sidebar ná console.0.9 mar atá sé scríofa · 0.4 gzipáilte · 0.4 gzipáilte gan nótaí tráchta
• select.jsBosca teaglama inchuardaithe field-select. Marbh go dtí go roghnaíonn select isteach le data-rst-select, agus inscriosta leis féin.55 mar atá sé scríofa · 18 gzipáilte · 8.0 gzipáilte gan nótaí tráchta
• datetime.jsIonchur gnáththeanga na réimsí dáta. Marbh go dtí go roghnaíonn réimse isteach le data-rst-date nó data-rst-time, agus inscriosta leis féin.76 mar atá sé scríofa · 24 gzipáilte · 11 gzipáilte gan nótaí tráchta
• calendar.jsAn eangach míosa a osclaíonn cnaipe féilire an réimse sin. Marbh go dtí go n-iarrann datetime.js painéal air, agus inscriosta leis féin: gan é, filleann an cnaipe ar roghnóir an bhrabhsálaí féin.22 mar atá sé scríofa · 7.1 gzipáilte · 3.1 gzipáilte gan nótaí tráchta

Faigheann aip nua 542 KiB de CSS agus JavaScript mar atá sé scríofa, 159 KiB gzipáilte: tokens.css, téama amháin, agus na scripteanna.

In aip nua rastrillo

Scríobhann rastrillo new iad seo isteach i gcomhadlann static na haipe agus nascann iad ón leagan amach, tokens.css ar dtús. Is leat iad ón bpointe sin: cuir eagar orthu, nó scrios an rud nach n-úsáideann tú.

rastrillo new --theme=plain myapp

Tá an téama pionnáilte faoi dhó. Socraíonn --theme cé acu de na téamaí seolta a chóipeáiltear go static/theme.css, agus taifeadtar é agus an aip á giniúint.

const vendoredTheme = "plain"

É a úsáid gan an creatlach

Is naisc iad na hainmneacha thuas. Tóg tokens.css agus téama amháin agus tá an córas amhairc iomlán agat: tréithe ar ghnáth-HTML, gan chéim tógála.

Nasc iad san ord seo, tokens.css ar dtús:

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="theme-plain.css">

Uasghrádú

An gaiste is fiú a bheith ar eolas sula gcosnaíonn sé tráthnóna ort: cóipeáiltear tokens.css isteach i gcomhadlann static na haipe agus í á scafall agus reoitear ansin é, fad is a leanann na páirteanna a stílíonn sé de bheith á n-uasghrádú leis an modúl. Is féidir le haip marcáil nua a rith i gcoinne CSS sean gan focal a rá. Athchóipeáil tokens.css nuair a dhéanann tú uasghrádú, agus an téama agus na scripteanna leis.

Cuirfidh rastrillo doctor comhaid reoite aipe i gcomparáid le cinn an mhodúil agus tairgfidh sé iad a athchóipeáil.