Remarkability
— A compact CSS library for a pleasant reading experience on the web
Remarkability provides beautiful and accessible styles for the content generated by the rich-text editors in a CMS or from a markdown file. It comes with sensible defaults that can be customized using Sass.
Get started
Using NPM or Yarn
Add to your project with NPM or Yarn.
npm install @microflash/remarkability
yarn add @microflash/remarkabilityThis is the recommended way if you want to customize Remarkability using Sass.
Using CDN
Add one of the following <link> elements in the <head> of your HTML document.
<link rel="stylesheet" href="https://unpkg.com/@microflash/remarkability">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@microflash/remarkability">By default, these CDNs will serve the latest published version. Refer to the unpkg / jsDelivr docs for other possible ways to get Remarkability.
Download
You can also download the latest version or browse the previous releases on GitHub.
Usage
Just add .remarkability class to your container to style the elements within.
<article class="remarkability">
<!-- HTML content -->
</article>By default, Remarkability inherits colors and typography from the parent element but you can customize this behavior with Sass.
With v1.0.0, Remarkability deprecated the global variant. If needed, you can still build it by setting
$rootvariable tobodyusing Sass.
Import what you need
With v1.1.0, Remarkability provides you the flexibility to import what you need; you may choose to import the entire remarkability.scss file or pick the specific parts. The following parts are available for you to import individually.
@use 'node_modules/@microflash/remarkability/scss/variables';
@use 'node_modules/@microflash/remarkability/scss/root';
@use 'node_modules/@microflash/remarkability/scss/all';
@use 'node_modules/@microflash/remarkability/scss/inline';
@use 'node_modules/@microflash/remarkability/scss/media';
@use 'node_modules/@microflash/remarkability/scss/block';
@use 'node_modules/@microflash/remarkability/scss/headings';
@use 'node_modules/@microflash/remarkability/scss/lists';
@use 'node_modules/@microflash/remarkability/scss/form';
@use 'node_modules/@microflash/remarkability/scss/blockquote';
@use 'node_modules/@microflash/remarkability/scss/code';
@use 'node_modules/@microflash/remarkability/scss/table';Documentation
For more details and examples, check out the docs.
Development
- Execute
yarn startto bring up the documentation site which contains an example page. - Use
yarn distto generate a CSS build. - Use
yarn docsto generate the static version of the documentation.
License
Licensed under MIT.
Acknowledgements
Remarkability is built with the generous contributions from the open-source community. It would not have been possible without wysiwyg.css by Jeremy Thomas, github-markdown-css by Sindre Sorhus and the invaluable references on MDN. The typeface used in the logo is Maragsâ Display by John David Maza. The icons are from Octicons, a part of GitHub's Primer design system.