Category: Responsive CSS Frameworks

Preloader with Materialize https://materializecss.com/preloader.html HTML <div class="progress"> <div class="indeterminate"></div> </div>

https://materializecss.com/modals.html HTML <!– Modal Trigger –> <a class="waves-effect waves-light btn modal-trigger" href="#modal1">Modal</a> <!– Modal Structure –> <div id="modal1" class="modal"> <div class="modal-content"> <h4>Modal Header</h4> <p>A bunch of text</p> </div> <div class="modal-footer"> <a href="#!" class="modal-close waves-effect waves-green btn-flat">Agree</a> </div> </div> JS document.addEventListener('DOMContentLoaded', function() { var elems = document.querySelectorAll('.modal'); var instances = M.Modal.init(elems, options); }); // Or with…

Basic Example https://materializecss.com/cards.html <div class="row"> <div class="col s12 m6"> <div class="card blue-grey darken-1"> <div class="card-content white-text"> <span class="card-title">Card Title</span> <p>I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.</p> </div> <div class="card-action"> <a href="#">This is a link</a> <a href="#">This…

https://materializecss.com/mobile.html The navbar is fully contained by an HTML5 Nav tag. Inside a recommended container div, there are 2 main parts of the navbar. A logo or brand link, and the navigations links. You can align these links to the left or right. Drag Out Menu This plugin includes several options for customizing the menu….

https://materializecss.com/getting-started.html Material Design Created and designed by Google, Material Design is a design language that combines the classic principles of successful design along with innovation and technology. Google’s goal is to develop a system of design that allows for a unified user experience across all their products on any platform. First of all create a…