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

layout.mddocs/

Layout Components

Layout building blocks including cards, collections, grid system, and structural elements for organizing and presenting content with Material Design styling and responsive behavior.

Capabilities

Cards

Flexible content containers with shadows, actions, and various content layouts.

<!-- Basic card -->
<div class="card">
  <div class="card-content">
    <span class="card-title">Card Title</span>
    <p>I am a very simple card. I am good at containing small bits of information.</p>
  </div>
  <div class="card-action">
    <a href="#">This is a link</a>
    <a href="#">This is a link</a>
  </div>
</div>

<!-- Card with image -->
<div class="card">
  <div class="card-image">
    <img src="images/sample-1.jpg">
    <span class="card-title">Card Title</span>
    <a class="btn-floating halfway-fab waves-effect waves-light red">
      <i class="material-icons">add</i>
    </a>
  </div>
  <div class="card-content">
    <p>I am a very simple card.</p>
  </div>
  <div class="card-action">
    <a href="#">This is a link</a>
  </div>
</div>

<!-- Horizontal card -->
<div class="card horizontal">
  <div class="card-image">
    <img src="images/sample-1.jpg">
  </div>
  <div class="card-stacked">
    <div class="card-content">
      <p>I am a very simple card.</p>
    </div>
    <div class="card-action">
      <a href="#">This is a link</a>
    </div>
  </div>
</div>

<!-- Card with reveal -->
<div class="card">
  <div class="card-image waves-effect waves-block waves-light">
    <img class="activator" src="images/office.jpg">
  </div>
  <div class="card-content">
    <span class="card-title activator grey-text text-darken-4">
      Card Title<i class="material-icons right">more_vert</i>
    </span>
    <p><a href="#">This is a link</a></p>
  </div>
  <div class="card-reveal">
    <span class="card-title grey-text text-darken-4">
      Card Title<i class="material-icons right">close</i>
    </span>
    <p>Here is some more information about this product that is only revealed once clicked on.</p>
  </div>
</div>

CSS Classes:

/* Card classes */
.card {
  /* Main card container */
  position: relative;
  margin: 0.5rem 0 1rem 0;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,0.14);
}

.card-content {
  /* Card content area */
  padding: 24px;
  border-radius: 0 0 2px 2px;
}

.card-title {
  /* Card title styling */
  font-size: 24px;
  font-weight: 300;
  line-height: 32px;
  margin-bottom: 8px;
}

.card-action {
  /* Card action area */
  background-color: inherit;
  border-top: 1px solid rgba(160,160,160,0.2);
  position: relative;
  padding: 16px 24px;
}

.card-image {
  /* Card image area */
  position: relative;
}

.card-image img {
  /* Card images */
  display: block;
  border-radius: 2px 2px 0 0;
  position: relative;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
}

.card-reveal {
  /* Card reveal overlay */
  padding: 24px;
  position: absolute;
  background-color: #fff;
  width: 100%;
  overflow-y: auto;
  left: 0;
  top: 100%;
  height: 100%;
  z-index: 3;
  display: none;
}

/* Card variations */
.card.small { height: 300px; }
.card.medium { height: 400px; }
.card.large { height: 500px; }

.card.horizontal {
  /* Horizontal card layout */
  display: flex;
}

.card.sticky-action .card-action {
  /* Sticky action area */
  z-index: 2;
}

.card-panel {
  /* Simple card without structured content */
  transition: box-shadow 0.25s;
  padding: 24px;
  margin: 0.5rem 0 1rem 0;
  border-radius: 2px;
  background-color: #fff;
}

Collections

Lists and collections for displaying sets of related items.

<!-- Basic collection -->
<ul class="collection">
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
</ul>

<!-- Collection with links -->
<div class="collection">
  <a href="#!" class="collection-item">Alvin</a>
  <a href="#!" class="collection-item active">Alvin</a>
  <a href="#!" class="collection-item">Alvin</a>
  <a href="#!" class="collection-item">Alvin</a>
</div>

<!-- Collection with headers -->
<ul class="collection with-header">
  <li class="collection-header"><h4>First Names</h4></li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
  <li class="collection-item">Alvin</li>
</ul>

<!-- Collection with secondary content -->
<ul class="collection">
  <li class="collection-item">
    <div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
  </li>
  <li class="collection-item">
    <div>Alvin<a href="#!" class="secondary-content"><i class="material-icons">send</i></a></div>
  </li>
</ul>

<!-- Avatar collection -->
<ul class="collection">
  <li class="collection-item avatar">
    <img src="images/yuna.jpg" alt="" class="circle">
    <span class="title">Title</span>
    <p>First Line <br> Second Line</p>
    <a href="#!" class="secondary-content"><i class="material-icons">grade</i></a>
  </li>
</ul>

CSS Classes:

/* Collection classes */
.collection {
  /* Collection container */
  margin: 0.5rem 0 1rem 0;
  border: 1px solid #e0e0e0;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}

.collection-item {
  /* Individual collection item */
  background-color: #fff;
  line-height: 1.5rem;
  padding: 10px 20px;
  margin: 0;
  border-bottom: 1px solid #e0e0e0;
}

.collection-item.active {
  /* Active collection item */
  background-color: #26a69a;
  color: #eafaf9;
}

.collection-header {
  /* Collection header */
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 10px 20px;
}

.collection-item.avatar {
  /* Avatar collection item */
  min-height: 84px;
  padding-left: 72px;
  position: relative;
}

.collection-item.avatar img.circle {
  /* Avatar image */
  position: absolute;
  width: 42px;
  height: 42px;
  overflow: hidden;
  left: 15px;
  display: inline-block;
  vertical-align: middle;
}

.collection-item .title {
  /* Collection item title */
  font-size: 16px;
  font-weight: 500;
  color: #212121;
  display: block;
  margin: 0;
}

.collection-item p {
  /* Collection item description */
  margin: 0;
  color: #424242;
}

.secondary-content {
  /* Secondary content (icons, actions) */
  float: right;
  color: #26a69a;
}

Tables

Responsive tables with Material Design styling.

<!-- Basic table -->
<table>
  <thead>
    <tr>
        <th>Name</th>
        <th>Item Name</th>
        <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alvin</td>
      <td>Eclair</td>
      <td>$0.87</td>
    </tr>
    <tr>
      <td>Alan</td>
      <td>Jellybean</td>
      <td>$3.76</td>
    </tr>
  </tbody>
</table>

<!-- Striped table -->
<table class="striped">
  <thead>
    <tr>
        <th>Name</th>
        <th>Item Name</th>
        <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alvin</td>
      <td>Eclair</td>
      <td>$0.87</td>
    </tr>
  </tbody>
</table>

<!-- Highlighted table -->
<table class="highlight">
  <thead>
    <tr>
        <th>Name</th>
        <th>Item Name</th>
        <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alvin</td>
      <td>Eclair</td>
      <td>$0.87</td>
    </tr>
  </tbody>
</table>

<!-- Centered table -->
<table class="centered">
  <thead>
    <tr>
        <th>Name</th>
        <th>Item Name</th>
        <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alvin</td>
      <td>Eclair</td>
      <td>$0.87</td>
    </tr>
  </tbody>
</table>

<!-- Responsive table -->
<table class="responsive-table">
  <thead>
    <tr>
        <th>Name</th>
        <th>Item Name</th>
        <th>Item Price</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Alvin</td>
      <td>Eclair</td>
      <td>$0.87</td>
    </tr>
  </tbody>
</table>

CSS Classes:

/* Table classes */
table {
  /* Basic table styling */
  width: 100%;
  display: table;
  border-collapse: collapse;
  border-spacing: 0;
}

table.striped > tbody > tr:nth-child(odd) {
  /* Striped table rows */
  background-color: rgba(242, 242, 242, 0.5);
}

table.striped > tbody > tr > td {
  /* Striped table cells */
  border-radius: 0;
}

table.highlight > tbody > tr {
  /* Highlighted table rows */
  transition: background-color 0.25s ease;
}

table.highlight > tbody > tr:hover {
  /* Highlighted table hover */
  background-color: rgba(242, 242, 242, 0.5);
}

table.centered thead tr th,
table.centered tbody tr td {
  /* Centered table content */
  text-align: center;
}

.responsive-table {
  /* Responsive table wrapper */
  display: block;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

/* Table elements */
thead {
  /* Table header */
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

td, th {
  /* Table cells */
  padding: 15px 5px;
  display: table-cell;
  text-align: left;
  vertical-align: middle;
  border-radius: 2px;
}

th {
  /* Table headers */
  font-weight: 500;
  color: #757575;
}

td {
  /* Table data cells */
  color: rgba(0,0,0,0.87);
  border-bottom: 1px solid rgba(0,0,0,0.12);
}

Badges

Small status indicators and notification badges.

<!-- Basic badges -->
<span class="badge">1</span>
<span class="new badge">4</span>
<span class="badge blue">New</span>

<!-- Badges in collections -->
<ul class="collection">
  <li class="collection-item">Inbox<span class="badge">12</span></li>
  <li class="collection-item">Unread<span class="new badge">4</span></li>
  <li class="collection-item">Sent<span class="badge">0</span></li>
</ul>

<!-- Badges in navigation -->
<ul class="collection">
  <li class="collection-item">
    <span class="badge new">New</span>
    First Item
  </li>
</ul>

CSS Classes:

/* Badge classes */
.badge {
  /* Basic badge */
  min-width: 3rem;
  padding: 0 6px;
  margin-left: 14px;
  text-align: center;
  font-size: 1rem;
  line-height: 22px;
  height: 22px;
  color: #757575;
  float: right;
  box-sizing: border-box;
}

.badge.new {
  /* New badge with emphasis */
  font-weight: 300;
  font-size: 0.8rem;
  color: #fff;
  background-color: #26a69a;
  border-radius: 2px;
}

.badge.new:after {
  /* New badge indicator */
  content: " new";
}

/* Badge colors */
.badge.red { background-color: #F44336; color: #fff; }
.badge.pink { background-color: #E91E63; color: #fff; }
.badge.purple { background-color: #9C27B0; color: #fff; }
.badge.blue { background-color: #2196F3; color: #fff; }
.badge.cyan { background-color: #00BCD4; color: #fff; }
.badge.teal { background-color: #009688; color: #fff; }
.badge.green { background-color: #4CAF50; color: #fff; }
.badge.yellow { background-color: #FFEB3B; color: #000; }
.badge.orange { background-color: #FF9800; color: #fff; }

Dividers

Visual separators for organizing content sections.

<!-- Basic divider -->
<div class="divider"></div>

<!-- Section divider -->
<div class="section">
  <h5>Section 1</h5>
  <p>Content goes here</p>
</div>
<div class="divider"></div>
<div class="section">
  <h5>Section 2</h5>
  <p>Content goes here</p>
</div>

<!-- Divider in collections -->
<ul class="collection">
  <li class="collection-item">Item 1</li>
  <li class="divider"></li>
  <li class="collection-item">Item 2</li>
</ul>

CSS Classes:

/* Divider classes */
.divider {
  /* Horizontal divider line */
  height: 1px;
  overflow: hidden;
  background-color: #e0e0e0;
}

.section {
  /* Content section */
  padding-top: 1rem;
  padding-bottom: 1rem;
}

/* Collection dividers */
.collection .divider {
  /* Divider in collections */
  border-bottom: none;
  height: 1px;
  background-color: #e0e0e0;
  margin: 0;
}

Footers

Page footers with links, copyright, and additional information.

<!-- Basic footer -->
<footer class="page-footer">
  <div class="container">
    <div class="row">
      <div class="col l6 s12">
        <h5 class="white-text">Footer Content</h5>
        <p class="grey-text text-lighten-4">You can use rows and columns here to organize your footer content.</p>
      </div>
      <div class="col l4 offset-l2 s12">
        <h5 class="white-text">Links</h5>
        <ul>
          <li><a class="grey-text text-lighten-3" href="#!">Link 1</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 2</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 3</a></li>
          <li><a class="grey-text text-lighten-3" href="#!">Link 4</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="footer-copyright">
    <div class="container">
      © 2014 Copyright Text
      <a class="grey-text text-lighten-4 right" href="#!">More Links</a>
    </div>
  </div>
</footer>

<!-- Sticky footer -->
<body>
  <main>
    <!-- Main content -->
  </main>
  <footer class="page-footer">
    <!-- Footer content -->
  </footer>
</body>

CSS Classes:

/* Footer classes */
.page-footer {
  /* Main footer container */
  background-color: #ee6e73;
  padding-top: 20px;
  color: #fff;
}

.footer-copyright {
  /* Copyright section */
  font-weight: 300;
  overflow: hidden;
  background-color: rgba(51, 51, 51, 0.08);
  padding: 10px 0px;
}

/* Sticky footer layout */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

Responsive Layout Patterns

Container Widths

/* Container responsive widths */
.container {
  margin: 0 auto;
  max-width: 1280px;
  width: 90%;
}

@media only screen and (min-width: 601px) {
  .container {
    width: 85%;
  }
}

@media only screen and (min-width: 993px) {
  .container {
    width: 70%;
  }
}

Section Spacing

/* Section spacing utilities */
.section {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.section.no-pad {
  /* Remove section padding */
  padding: 0;
}

.section.no-pad-bot {
  /* Remove bottom padding */
  padding-bottom: 0;
}

.section.no-pad-top {
  /* Remove top padding */
  padding-top: 0;
}

Card Layouts

<!-- Card grid layout -->
<div class="row">
  <div class="col s12 m6 l4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Card 1</span>
        <p>Content for card 1</p>
      </div>
    </div>
  </div>
  <div class="col s12 m6 l4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Card 2</span>
        <p>Content for card 2</p>
      </div>
    </div>
  </div>
  <div class="col s12 m6 l4">
    <div class="card">
      <div class="card-content">
        <span class="card-title">Card 3</span>
        <p>Content for card 3</p>
      </div>
    </div>
  </div>
</div>

docs

css-framework.md

forms.md

index.md

interactive.md

layout.md

media.md

navigation.md

utilities.md

tile.json