Mega Material

Making Elements Great Again — Material Style!

Summary

An attempt at a material-design component library using custom Elements without wrapping the light-dom / BEM-styled official library. In theory they should be small and usable by any framework.

Sizes

Individual gzipped component sizes are shown below which includes both JS and CSS (all embedded in a web component). An additional 6.7Kb of "common" code contains the base element (lit-element) and the templating library (lit-html) used by all components. If your app is built using these then they won't add anything extra to the payload.

Button Raised, flat and outlined buttons 1.5 Kb FAB (Floating Action Button) The primary action in an application 1.5 Kb Card Content and actions about a single subject 1.3 Kb Checkbox Multi-selection controls 2.0 Kb Dialog Modal dialog boxes 1.9 Kb Drawer Dismissable side panels 1.8 Kb Elevation Shadow and elevation styling Icon Material design icons 647 b Icon Button Icon-only buttons 931 b Linear Progress Fills from 0% to 100%, represented by bars 1.7 Kb List Lists and multiple selections 1.7 Kb Ripple Animated touch interaction effects 2.5 Kb Slider Slider value selectors 2.6 Kb Snackbar Popup toast notifications 1.5 Kb Switch On / off toggle switches 1.1 Kb Tabs Tabs with support for icon and text labels 1.9 Kb Text Field Textfield with outline and floating labels 1.9 Kb Top-Nav-Bar Main application navigation 1.8 Kb Typography Text styling

NOTE: Some of these components are more complete than others and the sizes for those that aren't may grow a little as features are added, but the aim is to keep things as small as possible. It makes no sense ti include styles intended for use without JS and support for IE and RTL text is low priority.