sitelo UI

sitelo-ui è una libreria di componenti per sitelo. Ogni componente è una funzione che restituisce una stringa di HTML, quindi si annida direttamente nella pagina che stai già scrivendo — nessun compilatore, nessun runtime, nessuna idratazione.

Ogni esempio di questa sezione è renderizzato dalla stessa build che renderizza la pagina attorno. Quello che vedi è ciò che il codice sotto ha prodotto, e segue i temi chiaro e scuro di questo sito perché sitelo-ui legge lo stesso attributo data-theme che legge la documentazione.

Layout

• centrata

  ContenitoreUna colonna di pagina centrata e limitata in larghezza.
• unoduetre

  PilaUna riga o colonna flex con un token di spaziatura per il gap.
• 1234

  GrigliaSistema quante più colonne ci stanno, senza media query.
• oppure

  DivisoreUna linea fra sezioni, con o senza etichetta.
• ProporzioniTieni un riquadro a una forma fissa, così niente si sposta al caricamento.

• Una scheda

  SchedaUna superficie per contenuti raggruppati, con intestazione, corpo e piè di pagina.

Tipografia

• Intestazione

  Didascalia

  TipografiaUna scala tipografica che sceglie da sé il proprio elemento.

• Un’intestazione

  E un paragrafo.

  ProsaDai stile a HTML grezzo che arriva da Markdown o da un CMS.

• Leggi la documentazione.

  CollegamentoUn’ancora con stile, con gli attributi che servono a un link esterno.
• Icone99 glifi su una griglia, dimensionati e colorati dal testo attorno.

Campi

• SalvaAnnulla

  PulsanteCinque varianti, cinque colori, tre dimensioni.
• UnoDue

  Gruppo di pulsantiPulsanti uniti in un unico controllo.
• Email

  Campo di testoEtichetta, controllo, testo di aiuto ed errore, già collegati.
• TemaChiaroScuro

  SelectUn select nativo, stilizzato per stare con gli altri.
• SitemapFeed RSS

  Casella di controlloUn input vero, stilizzato con il CSS invece che sostituito.
• freepro

  Gruppo di radioUna scelta fra diverse, come radio che condividono un nome.
• PubblicoBozze

  InterruttoreUn acceso/spento per un’impostazione che si applica subito.
• CursoreUn input range nativo, stilizzato per stare con gli altri.
• AccesoSpento

  Pulsante a due statiUn pulsante che resta premuto.
• abc

  Gruppo a due statiUn controllo segmentato, come pulsanti o come link.

Visualizzazione dati

• ALGHAT+1

  AvatarUn’immagine quando c’è, le iniziali quando non c’è.
• Posta12

  BadgeUn conteggio o un pallino appuntato a un angolo.
• superatastatico

  ChipUn tag, uno stato, un filtro.
• Passaci sopra

  TooltipUn suggerimento al passaggio del mouse e al focus, tutto in CSS.

• Pagina	Dimensione
  /	4,1 kB
  /docs	12,7 kB

  TabellaRighe e colonne dai dati, in un contenitore che scorre.
• • Routing

    Basato sui file

  ElencoRighe con qualcosa ai due lati.

• 

  FiguraUn’immagine e la sua didascalia, come un’unica figura.

Feedback

• Pubblicato.

  AvvisoUn messaggio la cui icona e il cui ruolo ARIA seguono il colore.

• Qui non c’è niente

  Stato vuotoChe aspetto ha un elenco prima che ci sia dentro qualcosa.
• AvanzamentoUna barra per un lavoro noto, una rotella per il resto.
• ScheletroUn segnaposto nella forma del contenuto in arrivo.
• Salvato.

  ToastUn messaggio passeggero, aggiunto da script.

Navigazione

• BreadcrumbLa scia di antenati che finisce su questa pagina.
• ImpaginazionePagine numerate, incorniciate, come link veri.
• UnoDue

  SchedeLink, una pagina per scheda — oppure pannelli che si scambiano sul posto.
• sitelo

  v2

  Barra applicazioneLa marca da un lato, navigazione e azioni dall’altro.
• Cambio temaChiaro e scuro, senza il lampo all’ingresso.

Sovrapposizioni

• Apri il modale

  ModaleUna finestra di dialogo sull’API popover — nessuno script.
• Apri il pannello

  Pannello lateraleUn pannello dal bordo, stessa meccanica popover.
• Azioni ▾

  MenuUn menu a tendina costruito su details, apertura e chiusura gratis.
• Una domanda

  FisarmonicaSezioni comprimibili, modalità esclusiva compresa.
• Mostra altro

  Nascosto finché non lo chiedi.

  ComprimibileUn solo “mostra altro”, senza la cornice della fisarmonica.

Sezioni

• Un titolo

  E una frase.

  HeroLa parte alta di una landing page: titolo, frase, azioni.
• DocumentazioneGuida · Componenti

  Piè di paginaColonne di link, e una riga sotto di esse.

• Pagine

  204

  +8

  StatisticaUn numero che vale la pena guardare, e cosa significa.
• 1. 1

     Installa

  2. 2

     Costruisci

  PassaggiUn percorso numerato, con ciò che è fatto segnato come fatto.

• 1. v2.7

     Sezioni

  CronologiaVoci in ordine, lungo una linea.
• sitelo.dev

  MockupUna schermata dentro un browser, una finestra, un telefono o un terminale.

Stile

• TemiOgni colore, raggio e carattere, da una sola chiamata.

Come si comincia

Due righe: importa i componenti, e metti styles() nella head. La pagina Componenti nella documentazione copre installazione, temi, convenzione di chiamata e runtime client facoltativo, ed elenca ogni export in un’unica tabella.

La cartella examples/ui nel repository renderizza tutto l’insieme su una sola pagina.

Extra

Non tutto sta in un unico foglio di stile. Ciò che è texture e decorazione — una grana da pellicola, per cominciare — vive sotto sitelo UI extras, un secondo punto di ingresso dove ogni componente porta un foglio suo, così una pagina collega solo ciò che usa.