{"id":13722380,"url":"https://github.com/nicokant/readable-css","last_synced_at":"2025-05-07T15:30:34.049Z","repository":{"id":96090110,"uuid":"109296462","full_name":"nicokant/readable-css","owner":"nicokant","description":"A minimal css to improve the readability of a webpage","archived":false,"fork":false,"pushed_at":"2017-11-09T08:01:26.000Z","size":131,"stargazers_count":9,"open_issues_count":0,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-11-14T11:40:02.486Z","etag":null,"topics":["readability","sass","typography"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"gpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nicokant.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2017-11-02T17:19:28.000Z","updated_at":"2024-08-24T12:43:18.000Z","dependencies_parsed_at":null,"dependency_job_id":"dec0ab67-6edf-4c8e-a6ca-0eba2ff3f510","html_url":"https://github.com/nicokant/readable-css","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicokant%2Freadable-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicokant%2Freadable-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicokant%2Freadable-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nicokant%2Freadable-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nicokant","download_url":"https://codeload.github.com/nicokant/readable-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252905516,"owners_count":21822819,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["readability","sass","typography"],"created_at":"2024-08-03T01:01:28.038Z","updated_at":"2025-05-07T15:30:33.720Z","avatar_url":"https://github.com/nicokant.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"# Readable CSS\na self contained ready to use css package to improve the readability of your contents.\n\n## Install\nThe package is available on `npm`\n\n```\nnpm install --save readable-css\nyarn add readable-css\n```\n\nIf you prefer to use it with a CDN\n```\n\u003clink href=\"https://unpkg.com/readable-css/css/readable.css\" rel=\"stylesheet\" /\u003e\n```\n\n## Usage\nJust add the `readable-content` class to the portion of page you want to be readable.\n\n## Structure\nThe package has the following structure\n\n```\n- css               # compiled Sass\n- examples          # example pages\n- scss\n  - modules         # contains all the submodules, like lists, headers, etc.\n    - headers\n    - lists\n    - tables\n    - etc.\n  - main            # imports all the submodules to wrap them in the `.readable-content` scope\n  - mixins          # mixins that will be used by modules\n  - variables       # variables definitions, you can easily override them\n  - readable        # index file that imports all the others\n```\n\n## Customize\nYou can easily modify the library to behave how you prefer.\nCreate a `SASS` file after installing the library with `npm`.\n\n```scss\n$max-width: 40em;\n$baseFontSize: 1em;\n\n@import 'node_modules/readable-css/scss/readable';\n```\n\nThe 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.\n\nCheck to `_variables.scss` file for the available variables.\n\n## Extend\nThe library doesn't ship with all the use cases defined, so if you need to add custom behaviours just extend it.\n\n```scss\n$max-width: 40em;\n$baseFontSize: 1em;\n\n@import 'node_modules/readable-css/scss/readable';\n\n.readable-content {\n  span {\n    font-familiy: sans;\n    text-decoration: underline;\n  }\n}\n```\n\nRemember to scope your changes inside the `readable-content` class\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicokant%2Freadable-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnicokant%2Freadable-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnicokant%2Freadable-css/lists"}