Materialize

Skapat och designat av Google

Kort om Materialize

Materialize är ett ramverk skapat av fyra studenter från Carnegie Mellon University och är ett relativt nytt ramverk.[1] Det släpptes 2015 och det finns väldigt lite information om det mer än det lilla som står på deras egen webbplats och på [3].

Materialize responsiva ramverk har som utgångspunkt från papper och penna enligt dem själva där ramverket ska skapa kreativitet genom att allt känns familjärt genom visuell igenkänning [1]. Materialize består precis som Bootstrap av ett grid system där man använder sig av lite annan syntax. Om man använt sig av Googles tjänster tidigar så kommer man att känna igen sig i hur allt är uppbyggt rent visuellt.


Hur fungerar Materialize?

Precis som med Bootstrap så använder man gridsystem med kolumner och att man lägger allt innehåll inom en container-klass där man senare kan skapa "row"-class för att dela upp innehållet i kolumner som i Bootstrap. Man kan välja att antingen ladda ner hela paketet med Materializes källkod eller så väljer man att använda sig av CDN. Utan att ha satt mig in 100% i syntaxen så verkar det som att Materialize är lite lättare att förstå vid första anblick där man lättare förstår informationen om hur vissa syntax ska skrivas. Det jag tänker på framför allt är om man vill placera kolumner från en viss kant så skriver man helt enkelt t.ex. "div class="col s6 offset-s6" " Vilket innebär att kolumnen förskjuts sex kolumner från vänster kant [4]. Materialize är även kompatibelt med flera olika webbläsare vilket också varit deras ambitition från början.

Egen åsikt angående Materialize är att det verkar vara lite lättare än Bootstrap samt att det finns en del färdiga mallar likt den som kan ses till höger som gör att utseendet blir lite roligare att titta på samt för den som inte har så bra fantasi (läs: jag) så hjälper det till att ge idéer. Informationen på sidan om just Materialize är också mer kortfattad och koncis om HUR du ska göra vilket är mycket bättre än Bootstrap.


Källor

  1. Om Materialize
  2. Länk till källa för logga i header
  3. CSS Framework Wiki.
  4. Grid i Materialize