() translation by (you can also view the original English article)
Mam wrażenie, że CodePen zostanie całkowicie wypełniony Material Design w nadchodzących miesiącach. Czemu? Ponieważ Google właśnie ujawnił ich wyczekiwany Material Design Lite (MDL). Ta biblioteka komponentów front-end pozwala web folk do implementacji specyfikacji Material Design Google przy użyciu wanilii HTML, CSS i JavaScript. Jest to lekka implementacja specyfikacji Material Design (kilka zależności, niski narzut, bardzo skupiony), stąd nazwa "Lite".
Wydając MDL, Google odpowiedział na bardzo oczywiste zapotrzebowanie. Zauważyli, że władze podjęły wysiłki, aby stworzyć ramy inspirowane Material Design, takie jak Bootstrap Material Design, Materialize i Material UI, by wymienić tylko kilka. Dzięki MDL, opartemu na ścisłej współpracy z zespołem Chrome UX, firma Google ustanowiła standard, w jaki sposób należy wdrażać Material Design na stronach internetowych.
Spójrzmy na to, co MDL przyniósł do stołu wraz z pierwszą wersją!
Material Design Components
W odróżnieniu od elementów konstrukcyjnych Polymer z Material Design Elements (znanych również jako Paper Elements) opracowanych z myślą o wysoce interaktywnych witrynach i aplikacjach opartych na danych, MDL koncentruje się głównie na witrynach z prostszymi treściami, takimi jak blogi, strony marketingowe i strony docelowe.
W tej pierwszej wersji MDL zawiera kilka komponentów, w tym:
Układ
Komponent układu zawiera wiele bloków konstrukcyjnych do tworzenia stron. Na przykład siatka: podstawowa cecha dowolnego frameworka front-end. Siatka MDL jest zbudowana za pomocą Flexboksa i niewielkiej pomocy z calc() CSS. Ma dwanaście kolumn ustawionych dla dużych rzutni, osiem
kolumn dla widoków wielkości tabletu i cztery kolumny dla mniejszych rzutni.
Komponent Layout w MDL zawiera również nawigację, tabulatory i stopki, z których każda została zoptymalizowana pod kątem różnych rozmiarów rzutni.
Przyciski
Zgodnie z zasadami Material Design, istnieje kilka różnych wizualnych typów przycisków, z których niektóre są:
- Zwykły przycisk: podstawowy przycisk prostokąta z tłem odróżniającym się od koloru tekstu.
- Płaski przycisk: przycisk bez tła.
- Materialny własny przycisk Float Action (lub FAB): okrągły przycisk, który unosi się na interfejsie, zwykle przenosząc podstawowe działanie bieżącego ekranu lub, w tym przypadku, strony.
Każdy przycisk można poprawić dzięki znanemu efektowi marszczenia.
Karty
Karta jest kontenerem do wyświetlania treści, takich jak tekst i obrazy, co zwykle promuje pewne działania. Na przykład obraz z przyciskiem "lubię to" lub "udostępnij", listą muzyki za pomocą przycisku "odtwórz" lub notatką z przyciskiem "Zapisz".
Odznaki
Plakietka to małe kółko, umieszczone w pobliżu elementu interfejsu użytkownika, zwykle zawierające numer (może to oznaczać nowe nieprzeczytane wiadomości lub przychodzące rozmowy) lub ikonę. W dzisiejszych czasach, gdy informacje nieustannie przepływają przez nasze urządzenia, "znaczek" można uznać za bardzo ważny element interfejsu użytkownika w każdym projekcie.
I jest więcej
Inne podstawowe elementy, które znajdziesz w MDL, to pola wprowadzania, suwaki, przełączniki, menu, podpowiedzi i ikony Material Design.
Co więcej, Google udostępnia także kilka szablonów, które pomagają szybko rozpocząć pracę z odpowiednią strukturą układu. W pierwszej wersji dostępnych jest pięć typów szablonów:
- Blog
- Artykuł
- Aplikacja lub marketingowa strona docelowa
- Deska rozdzielcza
- Tekstowa strona internetowa
Dostosowywanie
MDL są oparte na metodologii Sass i BEM. Style można dostosowywać na wiele sposobów, nawet przed pobraniem pakietu frameworku. Jednym z takich sposobów jest kółko kolorów na stronie Dostosuj. Koło kolorów pozwala wybrać akcenty kolorystyczne w oparciu o podstawowy wybór koloru. Personalizator wygeneruje następnie arkusz stylów, który można pobrać lub połączyć bezpośrednio z Google CDN.
Powstały plik material.min.css jest dość mały (gnieciony na poziomie 17,6 kB), ale dla tych, którzy potrzebują pełnej kontroli, aby zmniejszyć to wszystko do maksimum, kod źródłowy jest dostępny w repozytorium Github.
Obsługa przeglądarki
Ponieważ większość komponentów MDL jest tworzonych za pomocą najnowocześniejszych technik internetowych, takich jak calc(), Flexbox, querySelector i classList, MDL będzie działał doskonale tylko w nowoczesnych przeglądarkach: Chrome, Firefox, Opera, Microsoft Edge. MDL ulegnie zniszczeniu w starszych przeglądarkach, takich jak IE9, udostępniając tylko wersję CSS. Elementy interaktywne (np. Efekt tętnienia w przycisku) nie będą obecne.
Mówiąc to, interfejs użytkownika jest nadal niezwykle reprezentacyjny w IE8. Na przykład spójrz na przyciski i element tabel:
Końcowe przemyślenia
Zostaniesz wybaczony za myślenie, że mamy teraz dodatkowy front-end, który można umieścić w naszym zestawie narzędzi obok Bootstrap i Foundation. Jednak MDL nie zamierza zastępować ani być następcą Bootstrapa. Projektowanie materiałów jest częścią misji Google, która ma zapewnić spójność, jednolitość i uwzględnienie interfejsów użytkownika, a także jego produktów.
Przypomnijmy sobie na chwilę podstawowy pomysł:
"Rzuciliśmy wyzwanie sobie, aby stworzyć wizualny język dla naszych użytkowników, który syntetyzuje klasyczne zasady dobrego projektowania z innowacją i możliwością zastosowania technologii i nauki." - Google Material Design Wprowadzenie
Pamiętaj, że chociaż MDL dobrze pasuje do produktów Google, może być poza kontekstem po zaimplementowaniu w witrynie, która nie ma nic wspólnego z Google. Jednak, jak właśnie odkryliśmy, Google zapewnia pełną kontrolę nad kodem źródłowym, umożliwiając dostosowanie go do najdrobniejszych szczegółów. I o tym właśnie będziemy mówić w następnym artykule. Bądźcie na bieżąco!
Dalsze zasoby
