CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-materialize-css

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

—

Pending
Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

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;
}
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/materialize-css@1.0.x
Publish Source
CLI
Badge
tessl/npm-materialize-css badge