background preloader

Material Design for Bootstrap

Material Design for Bootstrap
Material Design for Bootstrap is a theme for Bootstrap 3 which lets you use the new Google Material Design in your favorite front-end framework. If you like this project you can support me by donating something on Gratipay, starring this repository, or reporting bugs and ideas. Read more about Material Design for Bootstrap at the Github page. If you want support the development of this project please consider donate something: Thanks to all the people that has donated on PayPal! Seems like you are using AdBlock to hide banners... Thanks! You can get this theme downloading the source from Bower or NPM: bower install bootstrap-material-design npm install bootstrap-material-design Download Install with NPM You can also install and manage Material Bootstrap using NPM Install with Bower You can also install and manage Material Bootstrap using Bower What's included Material Design for Bootstrap is downloadable in a two forms. Required Frameworks Bootstrap v3.0+ jQuery 1.9.1+ $.material.init() Input - Legacy

infomofo/chrome-angular-md-template Material Daemonite's Material UI is a fully responsive, cross-platform, front-end interface based on Google Material Design. This lightweight framework is built in HTML5 using Bootstrap, JS and CSS. A visual language for our users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. Have a play with this working prototype of Material, let us know what you think at the Daemon Labsopen_in_new forum. Components Below are components that have been defined by Material Design Guidelines. Extras These components have not been specifically defined by Material Design Guidelines, but are used in some Google apps and/or sites. Javascript Material includes several Bootstrap's Javascript plugins, affix, collapse, dropdown, modal & tab, to be specific. Sample Pages Here are some sample webpages built with Material.

Material CSS get material css view on github Desktop browsers not older than 2 years should be fully supported (as of 2014). Mobile browsers on the other hand are questionable. Works best with webkits. Download the .zip file if you haven't downloaded it yet. An index.html will be available as a template. Open it. Material CSS uses attributes to define styles for ease & simplicity. By default, index.html is incomplete. So, your first goal is to make the site complete so it can use Material CSS — by adding a material attribute to the body element. It is important to put md-js.js before the end of the body tag and not on the head. <body material fluid><div toolbar seamed bg-blue><header title>My First Material</header></div><div content> Content here... Try it. <! Check out the components (located at the left side) to learn more. Google Design Polymer Project Custom Elements Bootstrap Material Design Colors found here are all available for use as background and text colors. TEXT COLORfg-{colorname}{colorcode} fab

Playground By default, SplitView pane is partially visible in its closed state and it’s an overlay in its opened state. This scenario shows how to create a SplitView with the '.win-splitview-button' div that sits at the top left corner of the SplitView and toggles the state of the pane when clicked. The first element of SplitView will be part of the pane and the rest will be part of the content area. Developers can set the position of the pane relative to the content. This scenario shows how to change the display modes of the pane for its closed and opened states. This sample chooses to reconfigure the SplitView for different screen sizes as follows: Large screen option: Pane is partially visible in its closed state. This FlipView is created using a simple JSON array as a data source and a simple template to create the items. The following buttons can be used to change the orientation of the FlipView and set the spacing between items. The FlipView can host interactive HTML.

pixelyze/materialize-pixelyze Essence Material design with Polymer Edit on GitHub Material design is a unified system of visual, motion, and interaction design that adapts across different devices. Material design is inspired by tactile materials, such as paper and ink. Material surfaces interact in a shared space. Surfaces can have elevation (z-height) and cast shadows on other surfaces to convey relationships. Polymer’s paper elements collection implements material design for the web. For more detail on the material design philosophy and guidelines, see the Material design specification. For a sample of the material design patterns in use, see the Topeka sample app. For quick visual demos of many of the paper elements, see the Paper elements sampler. Application layout The Polymer core elements set includes several elements for application layout, including creating toolbars, app bars, tabs, and side nav consistent with the material design guidelines. See Layout elements for information on using these elements. Baseline grids Keylines Touch target size Icons

Paper Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater.

Related: