responsive-modular-scale.css v0.3.0-rc.1
responsive-modular-scale.css
Responsive typography using CSS variables
This implements a basic Modular Scale system using CSS variables. Use this with postcss-cssnext and postcss-import.
Installation
# using Yarn
yarn add --exact responsive-modular-scale.css
# using npm
npm install --save --save-exact responsive-modular-scale.css
Usage
responsive-modular-scale.css
can be used in 3 different ways:
Functional selectors (postcss-extend-rule
)
See § Usage as functional selectors.
.title {
@extend %ms-font-size-2;
}
Property sets (postcss-apply
)
.title {
@apply --ms-font-size-2;
}
CSS modules
.title {
composes: msFontSize2 from 'responsive-modular-scale.css/modularscale.module.css';
}
How it works
To use it, use any of the provided --font-size-#
custom property sets:
div {
@apply --font-size-4;
}
This applies a font-size: 2.0736rem
declaration for desktops—the default ratio is 1.2, so that's 1rem * 1.2 ^ 4
. For mobiles and tablets, it will use a different ratio (1.15 and 1.17 by default).
div {
font-size: 1.74901rem;
}
@media (min-width: 481px) {
div {
font-size: 1.87389rem;
}
}
@media (min-width: 769px) {
div {
font-size: 2.0736rem;
}
}
Configuring settings
Set up a variables.css
with your configuration. Consider placing this wherever you put your common variables (eg, color palettes and font names). See: defaults.css
.
:root {
--ms-ratio-sm: 1.15;
--ms-ratio-md: 1.17;
--ms-ratio-lg: 1.2;
--ms-base: 1rem;
--ms-base-sm: var(--ms-base);
--ms-base-md: var(--ms-base-sm);
--ms-base-lg: var(--ms-base-md);
}
@custom-media --ms-viewport-md (width > 480px);
@custom-media --ms-viewport-lg (width > 768px);
Usage as functional selectors
To use this as functional selectors (ie, @extend
), you'll need these PostCSS plugins:
Configure PostCSS to load these plugins and import your variables. Here's an example config:
/* postcss.config.js */
module.exports = ctx => {
return {
plugins: [
// ...
require('postcss-prepend-imports')({
files: [
require.resolve(
'responsive-modular-scale.css/responsive-modular-scale.css'
)
]
}),
require('postcss-extend-rule')(),
require('postcss-preset-env')({
importFrom: [require.resolve('./your/path/to/variables.css')]
})
// ...
]
}
}
You'll then be able to use them with @extend
in your CSS.
.title {
@extend %ms-font-size-2;
}
These selectors will become available:
@extend %ms-font-size--1
(negative 1)@extend %ms-font-size-0
(applies the base font size)@extend %ms-font-size-1
@extend %ms-font-size-2
- ...
@extend %ms-font-size-20
Usage as property sets
You can also apply modular scale font sizes using CSS property sets (aka, @apply
). You'll need these PostCSS plugins:
Configure PostCSS to load these plugins and import your variables. Here's an example config:
/* postcss.config.js */
module.exports = ctx => {
return {
plugins: [
// ...
require('postcss-prepend-imports')({
files: [
require.resolve(
'responsive-modular-scale.css/responsive-modular-scale.css'
)
]
}),
require('postcss-extend-rule')(),
require('postcss-preset-env')({
importFrom: [require.resolve('./your/path/to/variables.css')]
})
// ...
]
}
}
You'll then be able to use them with @apply
in your CSS.
.title {
@apply --ms-font-size-2;
}
These property sets will become available:
@apply --font-size--1
(negative 1)@apply --font-size-0
(applies the base font size)@apply --font-size-1
@apply --font-size-2
- ...
@apply --font-size-20
Usage as a CSS module
:warning: Experimental
- You can apply modular scale font sizes using CSS modules.
To use this as functional selectors (ie, @extend
), you'll need these PostCSS plugins:
Configure PostCSS to load these plugins and import your variables. Here's an example config:
/* postcss.config.js */
module.exports = ctx => {
return {
plugins: [
// ...
require('postcss-preset-env')({
importFrom: [require.resolve('./your/path/to/variables.css')]
})
// ...
]
}
}
You'll then be able to use them with composes
in your CSS.
.myButton {
composes: msFontSize2 from 'responsive-modular-scale.css/modularscale.module.css';
}
These CSS classes are available:
msFontSizeMinus1
(negative 1)msFontSize0
(applies the base font size)msFontSize1
msFontSize2
- ...
msFontSize20
Learn more about the composes:
property from the CSS modules documentation.
Prior art
postcss-modular-scale is a PostCSS plugin. However, it doesn't support responsive ratios, and the syntax is non-standard CSS.
modularscale-sass is, in my opinion, the gold standard modular scale implementation. It only supports Sass, however.
Also see
- PostCSS - CSS transformation tool.
- cssnext - use tomorrow's CSS syntax today.
- cssnext custom properties documentation
Thanks
responsive-modular-scale.css © 2019, Rico Sta. Cruz. Released under the MIT License. Authored and maintained by Rico Sta. Cruz with help from contributors (list).
ricostacruz.com · GitHub @rstacruz · Twitter @rstacruz