or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

css-framework.mdforms.mdindex.mdinteractive.mdlayout.mdmedia.mdnavigation.mdutilities.md
tile.json

tessl/npm-materialize-css

Material Design CSS framework with interactive JavaScript components for building responsive web applications

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/materialize-css@1.0.x

To install, run

npx @tessl/cli install tessl/npm-materialize-css@1.0.0

index.mddocs/

Materialize CSS

Materialize CSS is a modern responsive CSS framework based on Google's Material Design principles. It provides comprehensive CSS styling and interactive JavaScript components for building professional web applications with consistent Material Design aesthetics, mobile-first responsive design, and extensive browser compatibility.

Package Information

  • Package Name: materialize-css
  • Package Type: npm
  • Language: JavaScript/CSS/SASS
  • Installation: npm install materialize-css

Core Imports

CSS-Only Usage

<!-- Include CSS file for styling only -->
<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">

Full Framework (CSS + JavaScript)

<!-- Include both CSS and JavaScript -->
<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
<script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>

Module Import (ES6/CommonJS)

// ES6 import
import M from 'materialize-css';

// CommonJS require
const M = require('materialize-css');

CDN Usage

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Basic Usage

<!-- Basic HTML structure with Materialize -->
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <!-- Navigation -->
  <nav>
    <div class="nav-wrapper">
      <a href="#" class="brand-logo">Logo</a>
      <ul id="nav-mobile" class="right hide-on-med-and-down">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
      </ul>
    </div>
  </nav>

  <!-- Main content with grid -->
  <div class="container">
    <div class="row">
      <div class="col s12 m6">
        <div class="card">
          <div class="card-content">
            <span class="card-title">Card Title</span>
            <p>Card content goes here.</p>
          </div>
          <div class="card-action">
            <a href="#" class="btn waves-effect">Action</a>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- JavaScript initialization -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
  <script>
    // Auto-initialize all components
    M.AutoInit();
    
    // Or initialize specific components
    const elems = document.querySelectorAll('.modal');
    const instances = M.Modal.init(elems, {
      opacity: 0.5,
      dismissible: true
    });
  </script>
</body>
</html>

Architecture

Materialize CSS is built around several key architectural components:

  • CSS Framework: Complete styling system based on Material Design guidelines with responsive grid, typography, and component styles
  • JavaScript Components: Interactive elements like modals, dropdowns, and form controls with consistent APIs
  • Global M Object: Centralized namespace containing all JavaScript functionality and utilities
  • Component Lifecycle: Standardized initialization, configuration, and destruction patterns across all components
  • Auto-initialization: Automatic component setup via CSS classes and data attributes
  • SASS Integration: Customizable SASS variables and mixins for theming and customization
  • jQuery Compatibility: Optional jQuery wrapper generation for seamless integration with jQuery-based projects

Capabilities

CSS Framework and Grid System

Complete Material Design styling system with responsive 12-column grid, typography, colors, and utility classes for layout and styling.

/* Grid classes */
.container { /* Responsive container */ }
.row { /* Grid row */ }
.col { /* Grid column base */ }
.s1-s12 { /* Small screen column sizes */ }
.m1-m12 { /* Medium screen column sizes */ }
.l1-l12 { /* Large screen column sizes */ }

/* Utility classes */
.hide-on-small-only { /* Responsive visibility */ }
.center-align { /* Text alignment */ }
.waves-effect { /* Ripple effect */ }

CSS Framework and Grid

Navigation Components

Navigation bars, side navigation, breadcrumbs, and scroll-based navigation highlighting for application navigation and structure.

// Sidenav initialization
const elems = document.querySelectorAll('.sidenav');
const instances = M.Sidenav.init(elems, {
  edge: 'left',
  draggable: true
});

// ScrollSpy for navigation highlighting
const sections = document.querySelectorAll('.scrollspy');
const scrollInstances = M.ScrollSpy.init(sections, {
  scrollOffset: 100
});

Navigation Components

Form Components

Enhanced form controls including text inputs, selects, date pickers, time pickers, autocomplete, and validation.

// Datepicker initialization
const elems = document.querySelectorAll('.datepicker');
const instances = M.Datepicker.init(elems, {
  format: 'yyyy-mm-dd',
  autoClose: true
});

Form Components

Layout Components

Cards, collections, grid system, and other layout building blocks for structuring content.

<!-- Material card -->
<div class="card">
  <div class="card-content">
    <span class="card-title">Card Title</span>
    <p>Card content</p>
  </div>
  <div class="card-action">
    <a href="#">Action</a>
  </div>
</div>

Layout Components

Interactive Components

Modal dialogs, dropdowns, tabs, collapsibles, sticky positioning, feature discovery, and other interactive UI elements.

// Modal component
interface ModalOptions {
  opacity?: number;
  inDuration?: number;
  outDuration?: number;
  onOpenStart?: () => void;
  onOpenEnd?: () => void;
  onCloseStart?: () => void;
  onCloseEnd?: () => void;
  preventScrolling?: boolean;
  dismissible?: boolean;
  startingTop?: string;
  endingTop?: string;
}

class Modal {
  constructor(el: Element, options?: ModalOptions);
  static init(els: Element | NodeList, options?: ModalOptions): Modal | Modal[];
  static getInstance(el: Element): Modal;
  open(trigger?: Element): void;
  close(): void;
  destroy(): void;
  isOpen: boolean;
}

Interactive Components

Media Components

Components for handling images, videos, and media content including materialbox lightbox and carousel.

// Carousel initialization
const elems = document.querySelectorAll('.carousel');
const instances = M.Carousel.init(elems, {
  fullWidth: true,
  indicators: true
});

Media Components

Utility Functions and Global API

Core utilities, helper functions, Material Design ripple effects, and the global M object providing framework-wide functionality.

// Global M object utilities
interface M {
  version: string;
  AutoInit(context?: Element): void;
  updateTextFields(): void;
  textareaAutoResize(textarea: Element): void;
  toast(options: ToastOptions): Toast;
  
  // Utility functions
  guid(): string;
  escapeHash(hash: string): string;
  getDocumentScrollTop(): number;
  getDocumentScrollLeft(): number;
  throttle(func: Function, wait: number, options?: object): Function;
}

Utilities and Global API

Common Component Patterns

All JavaScript components in Materialize follow consistent patterns:

Initialization

// Auto-initialization (recommended)
M.AutoInit();

// Manual initialization
const elems = document.querySelectorAll('.component-selector');
const instances = M.ComponentName.init(elems, options);

// Individual instance
const instance = new M.ComponentName(element, options);

Configuration

const instance = M.ComponentName.init(element, {
  // Standard animation options
  inDuration: 300,
  outDuration: 200,
  
  // Callback functions
  onOpenStart: () => console.log('Opening...'),
  onOpenEnd: () => console.log('Opened'),
  onCloseStart: () => console.log('Closing...'),
  onCloseEnd: () => console.log('Closed'),
  
  // Component-specific options
  dismissible: true,
  opacity: 0.5
});

Instance Management

// Get existing instance
const instance = M.ComponentName.getInstance(element);

// Check if component is open/active
if (instance.isOpen) {
  instance.close();
}

// Cleanup when no longer needed
instance.destroy();

Types

// Base component interface
interface Component {
  el: Element;
  options: object;
  destroy(): void;
}

// Common callback types
type CallbackFunction = () => void;

// Animation duration type
type Duration = number; // milliseconds

// Standard component options
interface BaseComponentOptions {
  inDuration?: Duration;
  outDuration?: Duration;
  onOpenStart?: CallbackFunction;
  onOpenEnd?: CallbackFunction;
  onCloseStart?: CallbackFunction;
  onCloseEnd?: CallbackFunction;
}