{"id":13423956,"url":"https://github.com/susam/spcss","last_synced_at":"2025-05-14T23:15:49.330Z","repository":{"id":44356102,"uuid":"317007455","full_name":"susam/spcss","owner":"susam","description":"A simple, minimal, classless stylesheet for simple HTML pages","archived":false,"fork":false,"pushed_at":"2024-01-08T11:37:14.000Z","size":38,"stargazers_count":950,"open_issues_count":7,"forks_count":34,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-15T23:43:48.208Z","etag":null,"topics":["boilerplate","css","dark-color-theme","minimalist","stylesheet"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/susam.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGES.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"custom":["https://www.buymeacoffee.com/susam"]}},"created_at":"2020-11-29T17:40:13.000Z","updated_at":"2025-04-15T09:32:15.000Z","dependencies_parsed_at":"2023-01-21T23:16:45.917Z","dependency_job_id":"f4a6c50b-a919-4595-9012-13d2a1dbeb55","html_url":"https://github.com/susam/spcss","commit_stats":{"total_commits":56,"total_committers":4,"mean_commits":14.0,"dds":0.1071428571428571,"last_synced_commit":"7e05512d95343f090ccbd2f8fd73af38b7d62b85"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susam%2Fspcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susam%2Fspcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susam%2Fspcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/susam%2Fspcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/susam","download_url":"https://codeload.github.com/susam/spcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254243314,"owners_count":22038048,"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":["boilerplate","css","dark-color-theme","minimalist","stylesheet"],"created_at":"2024-07-31T00:00:45.716Z","updated_at":"2025-05-14T23:15:49.310Z","avatar_url":"https://github.com/susam.png","language":"CSS","funding_links":["https://www.buymeacoffee.com/susam"],"categories":["CSS","Frameworks / Resources"],"sub_categories":["S"],"readme":"SPCSS\n=====\n\nSPCSS is a simple and plain stylesheet for simple text-based websites.\n\n[![View Demo][Demo SVG]][Demo URL]\n[![View CSS][CSS SVG]][CSS URL]\n[![NPM Version][Version SVG]][NPM URL]\n[![JSDelivr Hits][JSDelivr SVG]][JSDelivr URL]\n[![MIT License][License SVG]][L]\n[![Twitter][Twitter SVG]][Twitter URL]\n\n[Demo SVG]: https://img.shields.io/badge/view-demo-brightgreen.svg\n[Demo URL]: https://susam.github.io/spcss/\n\n[CSS SVG]: https://img.shields.io/badge/view-sp.css-brightgreen.svg\n[CSS URL]: https://susam.github.io/spcss/sp.css\n\n[Version SVG]: https://img.shields.io/npm/v/spcss.svg\n[NPM URL]: https://www.npmjs.com/package/spcss\n\n[JSDelivr SVG]: https://data.jsdelivr.com/v1/package/npm/spcss/badge?style=rounded\n[JSDelivr URL]: https://www.jsdelivr.com/package/npm/spcss\n\n[License SVG]: https://img.shields.io/badge/license-MIT-%233ea639\n[L]: LICENSE.md\n\n[Twitter SVG]: https://img.shields.io/badge/twitter-%40susam-%231da1f2\n[Twitter URL]: https://twitter.com/susam\n\n\nContents\n--------\n\n* [Demo](#demo)\n* [Use SPCSS](#use-spcss)\n* [CDN URLs](#cdn-urls)\n* [Why SPCSS?](#why-spcss)\n* [Features](#features)\n* [License](#license)\n* [Support](#support)\n\n\nDemo\n----\n\nCheck this [demo page][Demo URL] to see how SPCSS styles a simple HTML\npage.\n\nSPCSS supports systems and web browsers with dark color theme too, so\nhow the page looks depends on the color theme selected on your system or\nbrowser.\n\nIf you are unable to change your desktop or browser theme right now,\nhere are some screenshots to see what the output looks like with both\nthemes:\n\n\u003ca href=\"https://i.imgur.com/aeDsWc7.png\"\u003e\u003cimg alt=\"Demo of SPCSS light theme\"\n    src=\"https://i.imgur.com/aeDsWc7.png\" width=\"48%\"\u003e\u003c/a\u003e\n\u003ca href=\"https://i.imgur.com/eoaJ3Pi.png\"\u003e\u003cimg alt=\"Demo of SPCSS dark theme\"\n    src=\"https://i.imgur.com/eoaJ3Pi.png\" width=\"48%\"\u003e\u003c/a\u003e\n\n\nUse SPCSS\n---------\n\nTo use SPCSS, merely add this line of code to the `\u003chead\u003e` element of\nyour HTML file:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/spcss@0.9.0\"\u003e\n```\n\nAlternatively, download the CSS file from [here][DL], edit and customize\nit as per your requirements, and use it in your project. You are also\nwelcome to [fork this repository][fork] and customize it to maintain\nyour own copy of [sp.css](sp.css) with styles you frequently need.\n\n[DL]: https://cdn.jsdelivr.net/npm/spcss@0.9.0/sp.css\n[fork]: https://github.com/susam/spcss/fork\n\n\nCDN URLs\n--------\n\nUse the following URL in the `\u003clink\u003e` tag to load version 0.9.0 (the\ncurrent version at this time) of SPCSS:\n\n```\nhttps://cdn.jsdelivr.net/npm/spcss@0.9.0\n```\n\nUse the following URL in the `\u003clink\u003e` tag to always load the latest\nversion of SPCSS:\n\n```\nhttps://cdn.jsdelivr.net/npm/spcss\n```\n\nIf you need something really easy to remember, use this URL to load the\nlatest version of SPCSS:\n\n```\nhttps://unpkg.com/spcss\n```\n\n\nWhy SPCSS?\n----------\n\nI often develop primarily text-based websites and webpages. The default\nstyle chosen by the web browsers while decent leaves a bit to be\ndesired, so I often add a minimal stylesheet to improve the apperance of\nthe document, hyperlinks, code blocks, blockquotes, tables, etc. This\nproject shares the minimal stylesheet that I often rely on for styling\nsimple websites and webpages.\n\nYou are welcome to [fork this repository][fork] and customize it to\nmaintain your own copy of [sp.css](sp.css) with styles that you\nfrequently need.\n\n\nFeatures\n--------\n\nHere is a summary of the style changes provided by SPCSS:\n\n- Support for dark color theme (`prefers-color-scheme: dark`).\n- Maximum width for the `\u003cbody\u003e` element to prevent the lines from being\n  too long. Shorter lines make it easier for our eyes to gauge the\n  beginning and end of the lines.\n- Dark gray (`#333`) text color instead of black (`#000`) in light mode.\n- Increased line-height to add more room around the lines.\n- More margin above headings to separate them more conspicuously from\n  preceding content.\n- Less margin below headings as well as less `line-height` for margins\n  to associate them more tightly with succeeding content.\n- Support for heading anchor links to facilitate sharing direct links to\n  sections of a page.\n- Support for special styling of keyboard input (`\u003ckbd\u003e`) within code\n  blocks (`\u003cpre\u003e`).\n- Ensure width of images do not exceed the maximum width for the\n  `\u003cbody\u003e` element.\n- Simple styling for `\u003cfigure\u003e` and `\u003cfigcaption\u003e` elements such as\n  margins aligned with the margins of text paragraphs, centered\n  captions, reduced font size for captions.\n- Light gray background for code blocks and blockquotes.\n- Prevent very long lines of code from overflowing outside the gray box\n  for code blocks. Instead, make the code block scrollable when the code\n  overflows the gray box.\n- Light borders for table cells.\n\nSee [this example page][Demo URL] for a quick demonstration of some of\nthese features.\n\n\nLicense\n-------\n\nThis is free and open source software. You can use, copy, modify,\nmerge, publish, distribute, sublicense, and/or sell copies of it,\nunder the terms of the MIT License. See [LICENSE.md][L] for details.\n\nThis software is provided \"AS IS\", WITHOUT WARRANTY OF ANY KIND,\nexpress or implied. See [LICENSE.md][L] for details.\n\n[L]: LICENSE.md\n\n\nSupport\n-------\n\nTo report bugs, suggest improvements, or ask questions,\n[create issues][ISSUES].\n\n[ISSUES]: https://github.com/susam/spcss/issues\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsusam%2Fspcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsusam%2Fspcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsusam%2Fspcss/lists"}