Share
Ik heb het gevoel dat CodePen de komende maanden absoluut gevuld zal worden met Material Design. Waarom? Omdat Google zojuist hun langverwachte Material Design Lite (MDL) heeft onthuld. Met deze front-end componentenbibliotheek kunnen webmensen de Material Design-specificatie van Google implementeren met behulp van vanilla HTML, CSS en JavaScript. Het is een lichtgewicht implementatie van de Material Design-specificatie (enkele afhankelijkheden, lage overheadkosten, zeer gefocust) en daarom wordt het 'Lite' genoemd.
Bij het uitbrengen van MDL heeft Google een zeer voor de hand liggende vraag beantwoord. Ze hebben kennis genomen van het feit dat er inspanningen zijn geleverd door de community om Material Design-geïnspireerde frameworks te ontwikkelen, zoals Bootstrap Material Design, Materialise en Material UI om er maar een paar te noemen. Met MDL, gebouwd in nauwe samenwerking met het Chrome UX-team, heeft Google een standaard vastgelegd voor hoe Material Design op websites moet worden geïmplementeerd.
Laten we eens kijken naar wat MDL heeft gebracht aan de tafel met zijn eerste release!
In tegenstelling tot de Polymer Material Design Elements (ook bekend als Paper Elements) die zijn ontwikkeld voor zeer interactieve, datagedreven websites en apps, richt MDL zich vooral op websites met eenvoudigere inhoud, zoals blogs, marketing- en bestemmingspagina's..
In deze eerste release wordt MDL geleverd met een handvol componenten, waaronder:
Het lay-outonderdeel bevat een aantal bouwstenen voor het samenstellen van pagina's. Bijvoorbeeld het raster: een fundamenteel kenmerk van elk front-end framework. Het raster van MDL is gebouwd met Flexbox en een beetje hulp van CSS's calc (). Het heeft twaalf kolommen voor grote viewports, acht kolommen voor wat u tablet-sized viewports zou kunnen noemen, en vier kolommen voor kleinere viewports.
Het lay-outonderdeel van MDL omvat ook navigatie, tabbladen en voetteksten, die elk zijn geoptimaliseerd voor variërende viewport-grootten.
Volgens de Material Design-principes zijn er verschillende visuele knoppen, waarvan sommige:
Elke knop kan worden verbeterd met het bekende rimpeleffect.
Een kaart is een container voor het weergeven van inhoud, zoals tekst en afbeeldingen, die meestal een soort actie bevordert. Bijvoorbeeld een afbeelding met een "like" of "share" knop, een lijst met muziek met de "play" knop, of misschien een notitie met een "Save" knop.
Een badge is een kleine cirkel, geplaatst in de buurt van een UI-element, meestal met een nummer (misschien om nieuwe ongelezen berichten of inkomende chats aan te geven) of een pictogram. Tegenwoordig, waar informatie eindeloos over onze apparaten stroomt, kan een "badge" als een zeer belangrijk UI-element in elk ontwerp worden beschouwd.
Andere essentiële functies die u in MDL aantreft, zijn invoervelden, schuifregelaars, schakelaars, menu's, knopinfo en pictogrammen voor materiaalontwerp.
Maak kennis met de componentenVerder biedt Google ook een aantal sjablonen waarmee u snel aan de slag kunt, met de juiste lay-outstructuur. Er zijn vijf soorten sjablonen in deze eerste release:
De vrij smakelijke sjabloonlay-out voor MDL-blogsMDL-stijlen zijn gestructureerd met Sass en de BEM-methodologie. Stijlen kunnen op verschillende manieren worden aangepast, zelfs voordat u uw framework-pakket downloadt. Eén manier is met het kleurenwiel op de pagina Aanpassen. Met het kleurenwiel kunt u kleuraccenten selecteren op basis van de primaire kleurselectie. De aanpasser genereert vervolgens het stijlblad, dat u kunt downloaden, of een koppeling naar rechtstreeks vanuit het CDN van Google.
Het voorbeeld van de MDL-thema-bouwerHet resulterende material.min.css-bestand is vrij klein (17,6 kB gzipped), maar voor degenen die volledige controle nodig hebben om alles tot het uiterste te kraken, is de broncode beschikbaar in de Github-repository.
Omdat de meeste componenten in MDL zijn gebouwd met de meest geavanceerde webtechnieken, zoals calc (), Flexbox, querySelector, en classlist, MDL werkt alleen volmaakt in de moderne altijdgroene browsers: Chrome, Firefox, Opera, Microsoft Edge. MDL degradeert degelijk in oudere browsers, zoals IE9, door alleen de CSS-versie te gebruiken. De interactieve elementen (zoals het rimpeleffect in de knop, bijvoorbeeld) zijn niet aanwezig.
Dat gezegd hebbende, de UI is nog steeds opmerkelijk toonbaar in IE8. Bekijk bijvoorbeeld de knoppen en het tabelelement:
Het zou je vergeven zijn te denken dat we nu een extra front-end framework hebben om in onze toolbox naast Bootstrap en Foundation te plaatsen. MDL is echter niet van plan om de opvolger van Bootstrap te vervangen of te worden. Material Design maakt deel uit van de missie van Google om ervoor te zorgen dat de gebruikersinterfaces, evenals de ervaringen in hun productopstellingen consistent, uniform en overwogen zijn.
Laten we even stilstaan bij het kernidee:
"We daagden ons uit om een visuele taal voor onze gebruikers te creëren die de klassieke principes van goed ontwerp combineert met de innovatie en de mogelijkheid van technologie en wetenschap." - Google Material Design Introductie
Onthoud dus dat MDL goed past bij Google-producten, maar mogelijk niet in de juiste context is wanneer het wordt geïmplementeerd in een website die niets met Google te maken heeft. Zoals we net hebben ontdekt, biedt Google echter volledige controle over de broncode, zodat we deze tot in het kleinste detail kunnen aanpassen. En daar gaan we het in het volgende artikel over hebben. Blijf dus op de hoogte!
Accentsconagua