Page: Static Island
Component: SSRwHydration
Custom CSS Tester - user can update the head markup to bring in a custom CSS stylesheet:
Add the custom CSS stylesheets in Settings > Advanced > Head markup:
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Confirm if you see custom styles (col s12 m4) applied for the following sample data:
flash_on
Speeds up development
We did most of the heavy lifting for you to provide a default stylings that incorporate our custom components. Additionally, we refined animations and transitions to provide a smoother experience for developers.
group
User Experience Focused
By utilizing elements and principles of Material Design, we were able to create a framework that incorporates components and animations that provide more feedback to users. Additionally, a single underlying responsive system across all platforms allow for a more unified user experience.
settings
Easy to work with
We have provided detailed documentation as well as specific code examples to help new users get started. We are also always open to feedback and can answer any questions a user may have about Materialize.
Custom Font Tester - user can use custom branding fonts:
Add the new branding font ""Zhi Mang Xing"" by adding the following in Settings > Advanced > Head markup:
<link href="https://fonts.googleapis.com/css?family=Zhi+Mang+Xing&display=swap" rel="stylesheet">Confirm that "This is my custom font" below is styled with the new font:
This is my custom font