En hurtig introduktion til Materialedesign ved hjælp af Materialize

Hvad er materiale design?

Materialedesign er et designsprog oprettet af Google. Ifølge material.io har Material Design som må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 giver mulighed for en samlet oplevelse på tværs af platforme og enhedsstørrelser. Mobil forord er grundlæggende, men touch, stemme, mus og tastatur er alle første klasses inputmetoder.

Hvorfor bruge materialedesign?

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

Hvordan kan du bruge Materialedesign i dine webapps?

Materialize er et responsivt front-end-komponentbibliotek, der ligner Bootstrap. Det tilbyder alt, hvad Bootstrap har at tilbyde, men forskellen er, at Materialize følger principperne om materialedesign. Her er et eksempelskabelon.

Her er en liste over funktioner, som Materialize tilbyder:

  • Grid
  • Borde
  • Badges, knapper, brødkrummer
  • Kort, chips, samlinger
  • Sidefod, former
  • 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 god til at gå!




farver

Ved hjælp af Materialize kan du ændre farven på ethvert HTML-element ved blot at give det et klassens navn på den ønskede farve. Hvis du f.eks. Vil give dit afsnitskode farven rød, gør du følgende:

Lorem Ipsum

Derudover kan du også lysne eller mørkere en farve ved at give den en anden klassens navn lysne-1 eller mørkere-1. For eksempel

Eksempeltekst

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

Knapper

For at materialisere en knap skal du bare give den klassens navn btn. Du kan også tilføje en cool animation til den ved at give den en anden klasse bølger-effekt. Hvis du har brug for en større knap, kan btn-large-klasse bruges. For eksempel:


  Klik
 

  Klik
 

  Klik
 

Skygge

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

For at anvende en skyggeeffekt på et element kan klassen z-dybde-2 bruges (2 kan erstattes med numrene 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 fra dokumenterne. Klassenavne er meget enkle, og gitteret er virkelig nyttigt at oprette responsive kolonner hurtigt. Jeg ønsker dig held og lykke!