Framework 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?

Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej. Więcej informacji

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close