solids
v0.2.8
Published
CSS-only Material Design Primitives
Downloads
42
Maintainers
stijndewittReadme
solids
CSS-only Material Design Primitives
.
Install
npm install --save solidsUse
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.
Issues
Add an issue in the issue tracker to let me know of any problems you find, or questions you may have.
Credits
Credits go to:
- The Material Design and MDC teams at Google
- Ben Mildren for inspiring the world with Surface.
- Jason Miller for building Preact
- Prateek Bhatnagar for building preact-material-components
Copyright
© 2019 by Stijn de Witt. Some rights reserved.
License
Licensed under the MIT Open Source license.