Alla base della libreria, che viene rilasciata sotto licenza Open Source tramite GitHub, vi è un'interfaccia per la programmazione, la Rebass's props API, che funge da design system altamente configurabile per la creazione semplice e rapida di applicazioni responsive. Ciascun componente di Rebass è associato a diversi oggetti per la stilizzazione ("props") che permettono di gestire numerosi aspetti relativi alla formattazione degli elementi di pagina.

Si possono così gestire facilmente proprietà come le dimensioni dei container, i margini, gli spazi intorno ai contenuti dei box (padding), la grandezza e il colore delle componenti tipografiche così come di altre componenti di pagina. E' possibile personalizzare i componenti offerti da Rebass attraverso l'utilizzo della funzione styled che accetta come parametro l'elemento da stilizzare; lo snippet seguente mostra, ad esempio, la semplice procedura necessaria per la stilizzazione di un pulsante (button):

const CustomButton = styled(Button)`
	border: 1px solid rgba(0, 0, 0, .25);
	background-image: linear-gradient(transparent, rgba(0, 0, 0, .125));
	box-shadow: 0 0 4px rgba(0, 0, 0, .25)

const App = () => (
	
		Hello
	
)

render()

Allo stato attuale Rebass offre ben 45 componenti stilizzabili che vanno dagli elementi dei form (select, textarea, radio, checkbox, input..) ai testi (pre, text, blockquote..), fino alla navigazione, ai link e agli elementi multimediali.

E' bene precisare che Rebass è una libreria che contiene unicamente componenti di tipo presentazionale, si tratta quindi di uno strumento dedicato specificatamente alla gestione delle interfacce utente; presenta però il vantaggio di non richiedere alcuna dipendenza per il suo funzionamento e potrà essere integrata facilmente in qualsiasi progetto che preveda l'interazione server side.

Via Rebass

CommentaDi' la tua

Il tuo indirizzo email non sarà mostrato pubblicamente. I campi obbligatori sono contrassegnati da *