Skip to content
A minimal css to improve the readability of a webpage
Branch: master
Clone or download
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples add table style Nov 8, 2017
scss add table style Nov 8, 2017
.gitignore first commit Nov 2, 2017
Gulpfile.js rename to scss Nov 6, 2017
LICENSE Create LICENSE Nov 9, 2017 add readme Nov 9, 2017
package.json update package.json license Nov 9, 2017
yarn.lock add reset-css Nov 3, 2017

Readable CSS

a self contained ready to use css package to improve the readability of your contents.


The package is available on npm

npm install --save readable-css
yarn add readable-css

If you prefer to use it with a CDN

<link href="" rel="stylesheet" />


Just add the readable-content class to the portion of page you want to be readable.


The package has the following structure

- css               # compiled Sass
- examples          # example pages
- scss
  - modules         # contains all the submodules, like lists, headers, etc.
    - headers
    - lists
    - tables
    - etc.
  - main            # imports all the submodules to wrap them in the `.readable-content` scope
  - mixins          # mixins that will be used by modules
  - variables       # variables definitions, you can easily override them
  - readable        # index file that imports all the others


You can easily modify the library to behave how you prefer. Create a SASS file after installing the library with npm.

$max-width: 40em;
$baseFontSize: 1em;

@import 'node_modules/readable-css/scss/readable';

The library uses em as default unit for width, margins, paddings. You can use also different measure unit (px or rem), but it's not suggested.

Check to _variables.scss file for the available variables.


The library doesn't ship with all the use cases defined, so if you need to add custom behaviours just extend it.

$max-width: 40em;
$baseFontSize: 1em;

@import 'node_modules/readable-css/scss/readable';

.readable-content {
  span {
    font-familiy: sans;
    text-decoration: underline;

Remember to scope your changes inside the readable-content class

You can’t perform that action at this time.