Solids NPM | npm.io

solids

CSS-only Material Design Primitives

installs

logo

Install

npm install --save solids

Use

To use solids styles in your app, I recommend webpack with the sass-loader. Make sure to import the required solids sass files in your code. Always import the base styles from solids/solids and any additional styles for the components you are using.

Import

You can import the solids styles from some sass file in your project:

index.scss

@import "solids/solids";
@import 'solids/appbar';

/* your own styles */

Alternatively, you can import the solids styles from some JS file in your project:

index.js

import "solids/solids";
import 'solids/appbar';

/* your javascript code */

Render markup

Allmost all the markup for solids is static. Meaning you render it once and from there on it stays the same. This is unline in MDC-web, where all sorts of behaviors are triggered by toggling CSS class names on the component. In solids, we only use CSS class names to configure the component, but not to manage its state.

Make sure to render your components within an element with class="solids":

<!DOCTYPE html>
<html>
  <head>
    <title>Example</title>
  </head>
  <body>
    <!-- establish a `solids` context -->
    <div class="solids">
      <!-- render `solids` components -->
      <header class="appbar">
        <!-- ... -->
      </header>

      <!-- ... -->
    </div>
  </body>
</html>

To keep the markup simple and CSS class names short, all solids CSS classes are combined with the .solids class so they are scoped to only work within the class="solids" context element. For example, the appbar styles selectors look like:

.solids .appbar {
  /* only targets elements with class="appbar" within elements with class="solids"
}

Using with Preact

If you are using Preact, check out preact-solids which can render the markup for you.

Using with CSS Modules

If you are using the CSS Modules loader, you need to use the correct class names as transformed by the CSS Modules loader when rendering the HTML. To facilitate building components that support both forms, with and without CSS modules, each solids component publishes a JS file in addition to the SASS files which contains an object in the same format as produced by CSS Modules with the default class names used in the component. For example, for the AppBar component, we have solids/appbar/classes.js:

solids/appbar/classes.js

module.exports = {
	appbar: 'appbar',
	fixed: 'fixed',
	dense: 'dense',
	prominent: 'prominent',
	short: 'short',
	collapsed: 'collapsed',
	has_action: 'has_action',
	shrink: 'shrink',
	floating: 'floating',
	start: 'start',
	end: 'end',
	reserve: 'reserve',
	title: 'title',
	icon: 'icon',
	action: 'action',
	tactile: 'tactile',
};

You can use this object as a public interface for rendering your markup:

import classes from 'solids/appbar/classes'

function render() {
  return `
    <header class="${classes.appbar}">
      <!-- ... -->
    </header>
  `
}

When using CSS Modules, you would import the classes directly from the styles:

import classes from 'solids/appbar'

function render() {
  return `
    <header class="${classes.appbar}">
      <!-- ... -->
    </header>
  `
}

You can even combine this with preact-context or something similar to create components that support both CSS Modules or unscoped class names or even a mix at the same time! Have a look at how preact-solids implements this with its preact-solids/theme component.