Framework Materialize

Logo Materialize

Wpis ten poświęcony jest frameworkowi CSS o nazwie Materialize.

Dokumetancja techniczna znajduje się pod adresem: https://materializecss.com/

Jako, że Twitter Bootstrap zaczął mi się już trochę nudzić, postanowiłem przetestować inne frameworki CSS. Jednym z nich był Materialize. Został on wykorzystany przy tworzeniu skryptu do stron z obrazkami i filmami Cuadro, demo skryptu pod adresem https://cuadro.wyremski.pl/

Jest to podobnie jak Twitter Bootstrap, zestaw stylów CSS i skryptów JavaScript, który ma za zadanie ułatwić i przyśpieszyć tworzenie stron www. Opiera się on na tzw. Material Design który został opracowany przez firmę Google. Zasady Material Design stosowane są w wielu miejscach, m.in. w aplikacjach na system Android.

To tyle wstępu. Poniżej przedstawiam podstawowe cechy tego frameworka:

  • Kilkadziesiąt klas CSS dla kolorów. Wystarczy dodać klasę np „indigo” aby otrzymać element z tłem koloru indigo. Dodatkowo odcień możemy dobierać dodając klasy „darken-1” – „darken-4”
  • System grid niestety nie jest na display:flex, a na przestarzałym float:right
  • Został dodany ciekawy efekt pulsujących przycisków: https://materializecss.com/pulse.html
  • Dzięki klasom „z-depth-1” do „z-depth-5” możemy w łatwy sposób ustawić cień do boksów
  • Waga zminimalizowanego pliku CSS to 138 KB a JS to 162 KB (wymaga jQuery). Dla porównania w Bootstrap 4.1.3 to odpowiednio 138 KB oraz 50KB
  • Domyślnie jest ustawiony ciekawy wygląd pól input, składa się ono tylko z dolnego obramowania, a etykiety są pisane małymi literami. Dodatkowo w łatwy sposób można włączyć licznik liter. Można to zobaczyć np. na https://cuadro.wyremski.pl/dodaj

Niestety, mimo że upłynęło już kilka miesięcy od kiedy stworzyłem skrypt oparty na Materialize, to nadal jest dostępna ta sama wersja: 1.0.0. Czyżby zrezygnowano już z aktualizacji tego frameworka?

Moim zdaniem to ciekawa alternatywa na małe projekty, żeby odróżnić się od reszty i nadać pewien klimat, jednak przy poważniejszych projektach jednak zostaję przy Bootstrap – jest on nowocześniejszy i cały czas aktualizowany. A co wy myślicie?