Skip to content
This repository has been archived by the owner on Mar 28, 2021. It is now read-only.
/ remarkability Public archive

A compact CSS library for a pleasant reading experience on the web

License

Notifications You must be signed in to change notification settings

Microflash/remarkability

Repository files navigation

Remarkability

RETIRED
Remarkability has been retired and no longer maintained. You can continue to use the latest version or switch to wysiwyg.css or github-markdown-css for similar functionality. Please feel free to fork this repo for further development.

— A compact CSS library for a pleasant reading experience on the web

npm (scoped) GitHub release (latest by date) npm bundle size (scoped) GitHub last commit GitHub

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/remarkability

This 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 $root variable to body using 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 start to bring up the documentation site which contains an example page.
  • Use yarn dist to generate a CSS build.
  • Use yarn docs to 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.