Jakie style kafelków?

Lista frameworków wciąż powstaje. Osobiście pracowałem tylko z jednym z nich, jest to Metro UI CSS . Ich autorem jest Sergey Pimenov z Ukrainy. Framework ten powstał do tej pory w 3 wersjach. Kod można pobrać z oficjalnej strony internetowej (specjalnie przygotowany wcześniej master) lub z github. Dokumentacja jest dostępna dla wersji 2 i 3 frameworku.

MetroUICSSv3

Chcąc łatwo zmienić wygląd aplikacji zabrałem się za integrację. Dodałem odniesienie do metro.min.js i metro.min.css dla wersji 3 (cdn można skopiować z github ). I zajarzałem do dokumentacji kafelków . Tam, dowiadujemy się, że wszystkie kafelki:

  1. mają określony rozmiar w pikselach
  2. znajdują się w kontenerze z klasą tile-container

Ostatni punkt to nie problem, można dodać tą klasę do div'a z klasą grid-stack. Punkt pierwszy wymaga już dodania styli, które pozwolą gridstackowi robić swoje: 

 	 		.metro .tile{
 			height: auto;
 		}

Zostało jeszcze do diva z klasą grid-stack-item dodać klasę tile , a do diva z klasą grid-stack-item-content dodać klasę item-content . Dla smaczku dodałem zawartość kafelka, czyli labelkę i badge. Na zdjęciu wynik pracy:

Coś jest nie tak, kafelki najeżdżają na siebie, chociaż ich zawartość jest pokazywana prawidłowo. Nie o to mi chodziło. Próbowałem jeszcze zagnieździć diva w grid-stack-item-content , dać mu klasę tile i dopiero wtedy umieścić tam zawartość kafelka, ale wtedy z kolei nie był widoczny tekst ani liczba. Szybkie sprawdzenie DOM pokazuje, że są one gdzieś poza krawędzią ekranu...

Podsumowanie

Metro UI CSS, a przynajmniej ta wersja, odpada. Spróbuję jeszcze z wersją v2, która, pomimo swoich dziwactw, bardzo mi się przydała podczas tworzenia aplikacji na platformę SharePoint. Pozdrawiam