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
To install, run
npx @tessl/cli install tessl/npm-materialize-css@1.0.00
# Materialize CSS
1
2
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.
3
4
## Package Information
5
6
- **Package Name**: materialize-css
7
- **Package Type**: npm
8
- **Language**: JavaScript/CSS/SASS
9
- **Installation**: `npm install materialize-css`
10
11
## Core Imports
12
13
### CSS-Only Usage
14
15
```html
16
<!-- Include CSS file for styling only -->
17
<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
18
```
19
20
### Full Framework (CSS + JavaScript)
21
22
```html
23
<!-- Include both CSS and JavaScript -->
24
<link rel="stylesheet" href="node_modules/materialize-css/dist/css/materialize.min.css">
25
<script src="node_modules/materialize-css/dist/js/materialize.min.js"></script>
26
```
27
28
### Module Import (ES6/CommonJS)
29
30
```javascript
31
// ES6 import
32
import M from 'materialize-css';
33
34
// CommonJS require
35
const M = require('materialize-css');
36
```
37
38
### CDN Usage
39
40
```html
41
<!-- Compiled and minified CSS -->
42
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
43
44
<!-- Compiled and minified JavaScript -->
45
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
46
```
47
48
## Basic Usage
49
50
```html
51
<!-- Basic HTML structure with Materialize -->
52
<!DOCTYPE html>
53
<html>
54
<head>
55
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
56
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
57
</head>
58
<body>
59
<!-- Navigation -->
60
<nav>
61
<div class="nav-wrapper">
62
<a href="#" class="brand-logo">Logo</a>
63
<ul id="nav-mobile" class="right hide-on-med-and-down">
64
<li><a href="#">Home</a></li>
65
<li><a href="#">About</a></li>
66
</ul>
67
</div>
68
</nav>
69
70
<!-- Main content with grid -->
71
<div class="container">
72
<div class="row">
73
<div class="col s12 m6">
74
<div class="card">
75
<div class="card-content">
76
<span class="card-title">Card Title</span>
77
<p>Card content goes here.</p>
78
</div>
79
<div class="card-action">
80
<a href="#" class="btn waves-effect">Action</a>
81
</div>
82
</div>
83
</div>
84
</div>
85
</div>
86
87
<!-- JavaScript initialization -->
88
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
89
<script>
90
// Auto-initialize all components
91
M.AutoInit();
92
93
// Or initialize specific components
94
const elems = document.querySelectorAll('.modal');
95
const instances = M.Modal.init(elems, {
96
opacity: 0.5,
97
dismissible: true
98
});
99
</script>
100
</body>
101
</html>
102
```
103
104
## Architecture
105
106
Materialize CSS is built around several key architectural components:
107
108
- **CSS Framework**: Complete styling system based on Material Design guidelines with responsive grid, typography, and component styles
109
- **JavaScript Components**: Interactive elements like modals, dropdowns, and form controls with consistent APIs
110
- **Global M Object**: Centralized namespace containing all JavaScript functionality and utilities
111
- **Component Lifecycle**: Standardized initialization, configuration, and destruction patterns across all components
112
- **Auto-initialization**: Automatic component setup via CSS classes and data attributes
113
- **SASS Integration**: Customizable SASS variables and mixins for theming and customization
114
- **jQuery Compatibility**: Optional jQuery wrapper generation for seamless integration with jQuery-based projects
115
116
## Capabilities
117
118
### CSS Framework and Grid System
119
120
Complete Material Design styling system with responsive 12-column grid, typography, colors, and utility classes for layout and styling.
121
122
```css
123
/* Grid classes */
124
.container { /* Responsive container */ }
125
.row { /* Grid row */ }
126
.col { /* Grid column base */ }
127
.s1-s12 { /* Small screen column sizes */ }
128
.m1-m12 { /* Medium screen column sizes */ }
129
.l1-l12 { /* Large screen column sizes */ }
130
131
/* Utility classes */
132
.hide-on-small-only { /* Responsive visibility */ }
133
.center-align { /* Text alignment */ }
134
.waves-effect { /* Ripple effect */ }
135
```
136
137
[CSS Framework and Grid](./css-framework.md)
138
139
### Navigation Components
140
141
Navigation bars, side navigation, breadcrumbs, and scroll-based navigation highlighting for application navigation and structure.
142
143
```javascript
144
// Sidenav initialization
145
const elems = document.querySelectorAll('.sidenav');
146
const instances = M.Sidenav.init(elems, {
147
edge: 'left',
148
draggable: true
149
});
150
151
// ScrollSpy for navigation highlighting
152
const sections = document.querySelectorAll('.scrollspy');
153
const scrollInstances = M.ScrollSpy.init(sections, {
154
scrollOffset: 100
155
});
156
```
157
158
[Navigation Components](./navigation.md)
159
160
### Form Components
161
162
Enhanced form controls including text inputs, selects, date pickers, time pickers, autocomplete, and validation.
163
164
```javascript
165
// Datepicker initialization
166
const elems = document.querySelectorAll('.datepicker');
167
const instances = M.Datepicker.init(elems, {
168
format: 'yyyy-mm-dd',
169
autoClose: true
170
});
171
```
172
173
[Form Components](./forms.md)
174
175
### Layout Components
176
177
Cards, collections, grid system, and other layout building blocks for structuring content.
178
179
```html
180
<!-- Material card -->
181
<div class="card">
182
<div class="card-content">
183
<span class="card-title">Card Title</span>
184
<p>Card content</p>
185
</div>
186
<div class="card-action">
187
<a href="#">Action</a>
188
</div>
189
</div>
190
```
191
192
[Layout Components](./layout.md)
193
194
### Interactive Components
195
196
Modal dialogs, dropdowns, tabs, collapsibles, sticky positioning, feature discovery, and other interactive UI elements.
197
198
```javascript { .api }
199
// Modal component
200
interface ModalOptions {
201
opacity?: number;
202
inDuration?: number;
203
outDuration?: number;
204
onOpenStart?: () => void;
205
onOpenEnd?: () => void;
206
onCloseStart?: () => void;
207
onCloseEnd?: () => void;
208
preventScrolling?: boolean;
209
dismissible?: boolean;
210
startingTop?: string;
211
endingTop?: string;
212
}
213
214
class Modal {
215
constructor(el: Element, options?: ModalOptions);
216
static init(els: Element | NodeList, options?: ModalOptions): Modal | Modal[];
217
static getInstance(el: Element): Modal;
218
open(trigger?: Element): void;
219
close(): void;
220
destroy(): void;
221
isOpen: boolean;
222
}
223
```
224
225
[Interactive Components](./interactive.md)
226
227
### Media Components
228
229
Components for handling images, videos, and media content including materialbox lightbox and carousel.
230
231
```javascript
232
// Carousel initialization
233
const elems = document.querySelectorAll('.carousel');
234
const instances = M.Carousel.init(elems, {
235
fullWidth: true,
236
indicators: true
237
});
238
```
239
240
[Media Components](./media.md)
241
242
### Utility Functions and Global API
243
244
Core utilities, helper functions, Material Design ripple effects, and the global M object providing framework-wide functionality.
245
246
```javascript { .api }
247
// Global M object utilities
248
interface M {
249
version: string;
250
AutoInit(context?: Element): void;
251
updateTextFields(): void;
252
textareaAutoResize(textarea: Element): void;
253
toast(options: ToastOptions): Toast;
254
255
// Utility functions
256
guid(): string;
257
escapeHash(hash: string): string;
258
getDocumentScrollTop(): number;
259
getDocumentScrollLeft(): number;
260
throttle(func: Function, wait: number, options?: object): Function;
261
}
262
```
263
264
[Utilities and Global API](./utilities.md)
265
266
## Common Component Patterns
267
268
All JavaScript components in Materialize follow consistent patterns:
269
270
### Initialization
271
```javascript
272
// Auto-initialization (recommended)
273
M.AutoInit();
274
275
// Manual initialization
276
const elems = document.querySelectorAll('.component-selector');
277
const instances = M.ComponentName.init(elems, options);
278
279
// Individual instance
280
const instance = new M.ComponentName(element, options);
281
```
282
283
### Configuration
284
```javascript
285
const instance = M.ComponentName.init(element, {
286
// Standard animation options
287
inDuration: 300,
288
outDuration: 200,
289
290
// Callback functions
291
onOpenStart: () => console.log('Opening...'),
292
onOpenEnd: () => console.log('Opened'),
293
onCloseStart: () => console.log('Closing...'),
294
onCloseEnd: () => console.log('Closed'),
295
296
// Component-specific options
297
dismissible: true,
298
opacity: 0.5
299
});
300
```
301
302
### Instance Management
303
```javascript
304
// Get existing instance
305
const instance = M.ComponentName.getInstance(element);
306
307
// Check if component is open/active
308
if (instance.isOpen) {
309
instance.close();
310
}
311
312
// Cleanup when no longer needed
313
instance.destroy();
314
```
315
316
## Types
317
318
```javascript { .api }
319
// Base component interface
320
interface Component {
321
el: Element;
322
options: object;
323
destroy(): void;
324
}
325
326
// Common callback types
327
type CallbackFunction = () => void;
328
329
// Animation duration type
330
type Duration = number; // milliseconds
331
332
// Standard component options
333
interface BaseComponentOptions {
334
inDuration?: Duration;
335
outDuration?: Duration;
336
onOpenStart?: CallbackFunction;
337
onOpenEnd?: CallbackFunction;
338
onCloseStart?: CallbackFunction;
339
onCloseEnd?: CallbackFunction;
340
}
341
```