En hurtig introduktion til Material Design ved hjælp af Materialize

Hvad er materialedesign?

Material Design er et designsprog oprettet af Google. Ifølge material.io har Material Design til formål at kombinere:

… Klassiske principper for godt design med innovation og mulighed for teknologi og videnskab. Det sigter mod at udvikle et enkelt underliggende system, der muliggør en samlet oplevelse på tværs af platforme og enhedsstørrelser. Mobil forskrifter er grundlæggende, men berøring, stemme, mus og tastatur er alle første klasses inputmetoder.

Hvorfor bruge materialedesign?

Material Design giver en problemfri brugeroplevelse på tværs af alle enheder. Responsive overgange og animationer sammen med polstring og dybdeeffekter som skygger og lyn gør det til at føles elegant og brugervenligt. Google bruger Material Design på næsten alle sine apps (som Keep og Calendar).

Hvordan kan du bruge Material Design i dine webapps?

Materialize er et responsivt frontend-komponentbibliotek, der ligner Bootstrap. Det tilbyder alt, hvad Bootstrap har at tilbyde, men forskellen er, at Materialize følger materialedesignprincipper. Her er en eksempelskabelon.

Her er en liste over funktioner, som Materialize tilbyder:

  • Gitter
  • Tabeller
  • Badges, knapper, brødkrummer
  • Kort, chips, samlinger
  • Sidefod, formularer
  • Navbar
  • Og meget mere!

Sådan kommer du i gang

I modsætning til Bootstrap kræver Materialize ikke popper.js. Det kræver kun jQuery. Dette er alt hvad du behøver for at komme i gang. Føj dette til din HTML, så er du klar!

Farver

Ved hjælp af Materialize kan du ændre farven på ethvert HTML-element ved blot at give det et klassenavn på den farve, du ønsker. For eksempel, hvis du vil give dit afsnitskode farven rød, gør du følgende:

Lorem Ipsum

Derudover kan du også gøre en lysere eller mørkere farve ved at give den et andet klassenavn lighten-1eller darken-1. For eksempel,

Sample Text

. 1 kan erstattes med tal op til 5 for lysere og op til 4 for mørkere. Højere tal vil anvende lysere eller mørkere nuancer af farven.

Knapper

For at materialisere en knap skal du blot give den klassens navn btn. Du kan også tilføje en cool animation til den ved at give den en anden klasse waves-effect. Hvis du har brug for en større knap, btn-largekan klassen bruges. For eksempel:

 Click    Click    Click  

Skygge

I materialedesign skal alt have en vis z-dybde, der bestemmer, hvor langt hævet eller tæt på siden elementet er.

For at anvende en skyggeeffekt på et element kan z-depth-2klassen bruges (2 kan erstattes med tal 1–5). For eksempel:

Konklusion

Jeg har kun ridset overfladen her. Der er meget mere tilgængeligt i Materialize (som overgange, kort, karrusel og modeller). Du kan lære, hvordan du bruger alle komponenterne i docs. Klassenavne er meget enkle, og gitteret er virkelig nyttigt at oprette responsive kolonner hurtigt. Jeg ønsker dig held og lykke!