Materialize - struktura CSS do projektowania materiałów
Google Wygląd materiału ma na celu dobrą pracę w sieci, a także w aplikacjach mobilnych. Zwiększa się popularność wśród programistów, a jeśli chcesz ją również zaadoptować, istnieje wiele sposobów wdrożenia Material Design na swojej stronie. Możesz użyć Polymer lub Angular, lub możesz użyć Materialise.
Materialise to a Ramy CSS oparte na zasadach projektowania materiałów z obsługą Sass dla lepszego rozwoju. Nosi domyślną stylizację dla łatwego użycia i zawiera szczegółową dokumentację.
Możesz znaleźć wiele przydatnych elementów w: oknie dialogowym, modalnym, selektorze daty, przyciskach materiałów, paralaksie, kartach i innych. Posiada również wiele opcji nawigacji, z których można wybierać, takich jak menu rozwijane, menu slajdów i zakładki. Materialise również używa a System 12-siatkowy z 3 domyślnymi zapytaniami dotyczącymi rozmiaru ekranu: maksymalna szerokość 600px to urządzenie mobilne, tablet 992px i więcej niż 992px jest uważane za urządzenie stacjonarne.
Rozpoczęcie pracy
Istnieją dwa sposoby rozpoczęcia pracy z Materialise: use standardowy CSS lub Sass. Oba źródła można pobrać tutaj. Możesz je także zdobyć za pomocą altany za pomocą następującego polecenia:
zmaterializować instalację altany
Po pobraniu źródeł upewnij się, że odpowiednio łączysz je w pliku projektu lub skompiluj źródło, jeśli używasz wersji Sass.
funkcje
W tej sekcji wyjaśnię niektóre funkcje, które oferuje Materialise.
1. Sass Mixins
Ta struktura zawiera Sass Mixins, które automatycznie dodają wszystkie prefiksy przeglądarki podczas pisania pewnych właściwości CSS. To świetna funkcja, którą należy zapewnić kompatybilność we wszystkich przeglądarkach, z tak małym zamieszaniem i kodem, jak to możliwe.
Spójrz na następujące właściwości animacji:
-animacja webkit: 0.5s; -moz-animation: 0.5s; -o-animacja: 0.5s; -ms-animation: 0.5s; animacja: 0,5s;
Te linie kodu można przepisać za pomocą pojedynczej linii Sass mixin w następujący sposób:
@include animacja (.5s);
Istnieje około 19 głównych mieszanek dostępny. Aby zobaczyć pełną listę, przejdź do kategorii Sass w MIESZANKI patka.
2. Przepływ tekstu
Podczas gdy inne frameworki używają stałego tekstu, Materialise implementuje prawdziwie responsywny tekst. Rozmiar tekstu i wysokość linii są również skalowane w celu zachowania czytelności. Jeśli chodzi o mniejsze ekrany, wysokość linii jest większa.
Aby użyć Flow Text, możesz po prostu dodać tekst przepływowy klasa na żądany tekst. Na przykład:
To jest Flow Text.
Sprawdź demo tutaj w sekcji Flow Text.
3. Efekt falowania z falami
Material Design zawiera również interaktywną informację zwrotną, jednym z godnych uwagi przykładów jest efekt falowania. W Materialise ten efekt jest wywoływany Fale. Zasadniczo, gdy użytkownik kliknie lub dotknie / dotknie przycisku, karty lub dowolnego innego elementu, pojawi się efekt. Fale można łatwo utworzyć, dodając efekt fal klasa na twoje elementy.
Ten fragment daje efekt fal.
Zatwierdź
Domyślnie zmarszczki są szare. Ale w sytuacji, gdy masz ciemne tło, możesz zmienić kolor. Aby dodać inny kolor, po prostu dodaj fale- (kolor) do elementu. Zastąp „(kolor)” nazwą koloru.
Zatwierdź
Możesz wybierać spośród 7 kolorów: jasny, czerwony, żółty, pomarańczowy, fioletowy, zielony i turkusowy. Zawsze możesz tworzyć lub dostosowywać własne kolory, jeśli te kolory nie pasują do Twoich potrzeb.
4. Cień
Aby zapewnić relacje między elementami, Material Design zaleca stosowanie elewacji na powierzchniach. Materialise realizuje tę zasadę z-depth- (liczba) klasa. Możesz określić głębokość cienia, zmieniając (liczbę) od 1 do 5:
Głębokość cienia 3
Wszystkie głębokości cienia są pokazane na poniższym obrazku.
5. Przyciski i ikony
W Material Design są trzy główne typy przycisków: przycisk podniesiony, fab (pływający przycisk akcji) i płaski przycisk.
(1) Przycisk podniesiony
Podniesiony przycisk jest przyciskiem domyślnym. Aby utworzyć ten przycisk, wystarczy dodać btn klasa do twoich elementów. Jeśli chcesz nadać efekt fali po kliknięciu lub naciśnięciu, przejdź do tego:
Przycisk
Alternatywnie, możesz także podać przycisk po lewej lub prawej stronie tekstu. W przypadku ikony musisz dodać niestandardowy znacznik z nazwą klasy i pozycją ikony. Na przykład:
Ściągnij
W powyższym fragmencie używamy plik mdi-file-download klasa dla ikony pobierania. Istnieje około 740 różnych ikon możesz użyć. Aby je zobaczyć, przejdź na stronę Sass na karcie Ikony.
(2) Pływający przycisk
Przycisk pływający można utworzyć, dołączając btn-pływające klasa i żądana ikona. Na przykład:
W projekcie materiałów często używany jest płaski przycisk w oknie dialogowym. Aby go utworzyć, wystarczy dodać btn-flat do twojego elementu tak:
Upadek
Dodatkowo przyciski można wyłączyć za pomocą wyłączone klasa i większe wykorzystanie btn-large klasa.
6. Siatka
Materialise używa standardu Siatka reagująca na 12 kolumn system. Reaktywność dzieli się na trzy części: małe (s) na komórkę, średnie (m) na tablet i duży (l) na pulpicie.
Aby utworzyć kolumny, użyj s, m lub l, aby wskazać rozmiar, a następnie numer siatki. Na przykład, jeśli chcesz utworzyć układ o połowie wielkości dla urządzenia mobilnego, powinieneś dołączyć s6 klasa do swojego układu. s6 oznacza mały-6 co oznacza 6 kolumn na małym urządzeniu.
Musisz także dołączyć przełęcz klasa w układzie, który tworzysz i umieść ją w elemencie, który ma rząd klasa. Tak więc układ może być prawidłowo umieszczony w kolumnach. Oto przykład:
Mam tutaj 12 kolumn lub pełną szerokość4 kolumny (jedna trzecia) tutaj4 kolumny (jedna trzecia) tutaj4 kolumny (jedna trzecia) tutaj
Oto wyniki:
Domyślnie, col s12 ma stały rozmiar i jest zoptymalizowany dla wszystkich rozmiarów ekranu, zasadniczo taki sam jak col s12 m12 l12. Ale jeśli chcesz określić rozmiar kolumn dla różnych urządzeń. Wszystko, co musisz zrobić, to wymienić dodatkowe rozmiary, takie jak:
Moja szerokość zawsze ma 12 kolumn wszędzieMam 12 kolumn na telefonie komórkowym, 6 na tablecie i 9 na pulpicie
Oto jak to wygląda:
To tylko kilka cech Materialise. Aby dowiedzieć się więcej o ich innych funkcjach, odwiedź stronę dokumentacji.
