Avatar
Riccardo Debellini

Material Components (Legacy)

Benvenuti nel museo dei miei inizi.

Questa repository risale ai miei primissimi giorni di programmazione: il picco della curva Dunning-Kruger. In quel periodo, ero convinto di poter "salvare il mondo" e ricreare l'intero Design System di Google con 4 file CSS e un po' di speranza.

Spoiler: non ci sono riuscito.

Quello che troverete qui sono classi CSS da comporre in maniere a volte astruse, usate nel mio primo portfolio. Guardare questo codice oggi mi ricorda quanta strada ho fatto (e quanto complicavo le cose semplici).

Come funzionava

Se per qualche motivo masochistico voleste vedere come era strutturato:

  1. Clonare la repo.
  2. Inserirla nella cartella CSS.
  3. Importare materialstyle.css usando @import.
  4. Pregare che le classi non vadano in conflitto.
./
┣━━ css/
┃   ┣━━ materialcomponents/
┃   ┃   ┣━━ colours/
┃   ┃   ┣━━ components/
┃   ┃   ┣━━ fonts/
┃   ┃   ┗━━ MaterialStyle.css
┃   ┗━━ Style.css
┗━━ index.html

Componenti Inclusi

Tentativi di replicare il Material You 3:

  • Navbar
  • FAB (Floating Action Button)
  • Typography
  • Text Card