md-in-js
Material Design constants (animation curves & durations, breakpoints, colors, shadows, etc…) all defined in JS.
What is it?
md-in-js is an assortment of js constants and values used in material design. It's not a framework or a replacement for material components, material design lite, material-ui, et al.
Why?
The frameworks listed above are opionated. They mostly use sass but they ALL declare their constants in css. You won't be able to access any of their values in your js components, your js animations, or in your css written in js (Styled Components, JSS, etc.)
The frameworks also try to simplify a broad and detailed specification. As a result, they end up omitting various parts of the spec. Good luck trying to use the dense
and tall
typographical styles outlined in the docs.
Moreover, md-in-js incorporates the Android Wearable specification which, you'd be hard pressed to find in any of the other frameworks.
Examples
css in js:
/css/typography.css.js
import {
colorBlackHsl,
colorLightBlue500Hsl,
colorWhiteHsl,
fontFileRoboto400NormalLatin,
fontUnicodeRangeLatin,
typographyOpacityBody1Dark,
typographyOpacityBody1Light,
typographyLeadingEnLikeBody1Dark,
typographyLeadingEnLikeBody1Light,
typographySizeEnLikeBody1Desktop,
typographySizeEnLikeBody1Device,
} from 'md-in-js';
export default {
'@font-face': [{
'font-family': 'Roboto',
'src': `local('Roboto'), url(fontFileRoboto400NormalLatin)`,
'unicode-range': fontUnicodeRangeLatin,
}],
'.en': {
'font-family': 'Roboto',
},
'.en .text': {
'line-height': typographyLeadingEnLikeBody1,
},
'.en.desktop .text': {
'font-size': typographySizeEnLikeBody1Desktop,
},
'.en.mobile .text': {
'font-size': typographySizeEnLikeBody1Device,
},
'.dark .text': {
'color': `hsl(${colorWhiteHsl})`,
'opacity': typographyOpacityBody1Dark,
},
'.light .text': {
'color': `hsl(${colorBlackHsl})`,
'opacity': typographyOpacityBody1Light,
},
'.link': {
'color': `hsl(${colorLightBlue500Hsl})`,
},
};
React:
/components/TimeRangeEn.jsx
import { createElement } from 'react';
import {
formatDateAliasHourMidnightEn as aliasMidnight,
formatDateAliasHourNoonEn as aliasNoon,
formatDateOptionsWeekdayHourMinShort as options,
formatDateRangeString,
} from 'md-in-js';
// values [{ hour: 16 }, { hour: 0 }]
// render <time>4 PM–Midnight</time>
export default ({ values }) => {
const locales = ['en'];
const ltr = true;
const aliases = [aliasNoon, aliasMidnight];
return (
<time>
{{formatDateRangeString(
options, locales, ltr, aliases, values[0], values[1]
)}}
</time>
);
};