{"id":15653858,"url":"https://github.com/waldyrious/downstyler","last_synced_at":"2025-04-30T22:22:01.142Z","repository":{"id":8677777,"uuid":"59332840","full_name":"waldyrious/downstyler","owner":"waldyrious","description":"A stylesheet and bookmarklet that trims webpage styles down to near-bare HTML.","archived":false,"fork":false,"pushed_at":"2025-02-14T00:30:04.000Z","size":161,"stargazers_count":34,"open_issues_count":26,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-30T20:33:05.357Z","etag":null,"topics":["classless-css","css","html","minimal","stylesheets"],"latest_commit_sha":null,"homepage":"http://waldyrious.net/downstyler","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"isc","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/waldyrious.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":{"github":"waldyrious","liberapay":"waldyrious","custom":["https://flattr.com/@waldyrious","https://paypal.me/waldyrious"]}},"created_at":"2016-05-20T23:56:18.000Z","updated_at":"2025-03-27T15:15:29.000Z","dependencies_parsed_at":"2023-10-16T08:37:19.700Z","dependency_job_id":"6494a728-89e3-4a8f-b288-ea3581b8f3c0","html_url":"https://github.com/waldyrious/downstyler","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/waldyrious%2Fdownstyler","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldyrious%2Fdownstyler/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldyrious%2Fdownstyler/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waldyrious%2Fdownstyler/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waldyrious","download_url":"https://codeload.github.com/waldyrious/downstyler/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251790211,"owners_count":21644181,"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":["classless-css","css","html","minimal","stylesheets"],"created_at":"2024-10-03T12:47:26.126Z","updated_at":"2025-04-30T22:22:01.120Z","avatar_url":"https://github.com/waldyrious.png","language":"HTML","readme":"# Downstyler\n\nA tool to fight CSS bloat.\n\n**Visit [the web page](https://waldyrious.github.io/downstyler)**\nfor a live demo and usage instructions.\n\n## Differences from existing tools\n\n**Downstyler** takes inspiration in pre-existing similar tools,\nbut fills a different niche:\n\n- The original [css reset](https://meyerweb.com/eric/tools/css/reset/)\n  completely wipes out all of the browser's default styles\n  to provide a clean slate upon which custom stylesheets can be built;\n- [normalize.css](https://necolas.github.io/normalize.css/)\n  is much less drastic, and focuses on ironing out cross-browser styling differences\n  and harmonizing them to provide consistent look and behavior everywhere;\n- [sanitize.css](https://jonathantneal.github.io/sanitize.css/)\n  is kind of a more comprehensive version of normalize.css, covering all HTML elements,\n  but using hand-picked default styles, rather than reset.css's nuclear approach.\n\n**Downstyler**, on the other hand, is intended as a stand-alone style\n— one that pays homage to HTML's natural readability and flexibility,\nand attempts to produce readable and visually pleasing output,\nwhile remaining faithful to the default look of unstyled HTML.\n\nIt follows the philosophy brilliantly championed by\n[Fluidity](https://web.archive.org/web/20180212152503/https://fluidity.sexy),\n[MotherfuckingWebsite.com](https://motherfuckingwebsite.com)\nand [BetterMotherfuckingWebsite.com](http://bettermotherfuckingwebsite.com),\nwhich (with various degrees of —ahem— enthusiasm)\npraise the merits of plain HTML as a format for rich documents.\n\nHere's a live comparison of how plain a variety of HTML markup looks with the various \"base\" stylesheets:\n- [no style (browser default)](https://waldyrious.github.io/downstyler/comparisons/demo-raw.xhtml)\n- [reset](https://waldyrious.github.io/downstyler/comparisons/demo-reset.xhtml)\n- [sanitize](https://waldyrious.github.io/downstyler/comparisons/demo-sanitize.xhtml)\n- [normalize](https://waldyrious.github.io/downstyler/comparisons/demo-normalize.xhtml)\n- [downstyler](https://waldyrious.github.io/downstyler/comparisons/demo-downstyler.xhtml)\n\nIt's also worth comparing the outputs of Downstyler\nand [BetterMotherfuckingWebsite](https://waldyrious.github.io/downstyler/comparisons/demo-bettermfwebsite.xhtml).\nParticularly, note the differences in the `\u003ctable\u003e`, `\u003cblockquote\u003e`, `\u003cpre\u003e` and `\u003cform\u003e` elements.\nThese demonstrate Downstyler's goal of providing a stand-alone stylesheet for 99% of HTML content,\nwhile remaining quite close to unstlyled HTML.\n\n\u003c!-- TODO: insert side-by-side screenshots here. --\u003e\n\n## Details of included CSS rules\n\n**Downstyler** combines elements from various simple rulesets\ncreated to demonstrate how only a few minor tweaks to the default HTML styling\ncan produce massive improvements in legibility and layout.\n\nThe origin and motivation of each ruleset is detailed below:\n\n- From **[Fluidity](https://web.archive.org/web/20180212152503/https://fluidity.sexy)**,\n  by Adam Morse ([@mrmrs](https://github.com/mrmrs)):  \n  Make HTML more responsive:\n  \u003e HTML is **almost** 100% responsive by default. These 247 bytes of css fix the 'almost' part.\n\n  ```css\n  img, canvas, iframe, video, svg, select, textarea { max-width: 100%; }\n  pre { overflow-x: auto; }\n  ```\n  These rules allow elements that don't adjust to the size of the container by default,\n  to behave like the rest of the basic HTML elements\n  like, say, paragraphs, which flow the text as the window resizes.\n\n- From **[CSS Tricks](https://css-tricks.com/box-sizing)**,\n  by Marie Mosley ([@mariemosley](https://github.com/mariemosley)):  \n  Adjust the box model to match [intuitive expectations]\n  (https://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug#Support_for_Internet_Explorer.27s_box_model).  \n  This ensures that when defining sizes of elements in CSS,\n  they correspond better to the mental model of a physical box,\n  whose dimensions normally refer to the box itself (outer size),\n  not to its content alone (inner size).\n  ```css\n  html { box-sizing: border-box; } *, *:before, *:after { box-sizing: inherit; }\n  ```\n\n- From **[CSS Tricks](https://css-tricks.com/molten-leading-css/)**,\n  by Chris Coyier ([@chriscoyier](https://github.com/chriscoyier))\n  from an original idea by Tim Brown ([@tbrown](https://github.com/tbrown)):  \n  Size text according to screen width\n  ```css\n  html { font-size: clamp(0.9rem, calc(13px + 0.5vw), 1.1rem); }\n  ```\n  These rules allow text to resize dynamically to adapt to the width of the container.\n  It's the same concept as [flowtype.js](https://simplefocus.com/flowtype/),\n  but implemented entirely in CSS.\n\n- From **[Better Motherfucking Website](http://bettermotherfuckingwebsite.com)**, by Drew McConville ([@drewmcc](https://github.com/drewmcc)):\n  Improve default typography:\n  \u003e **Let it breathe**  \n  \u003e Look at lines 1 and 2 of some shitty website you're building. Assuming they're not married they probably shouldn't be humping.\n  \u003e The defaults are trash -- pick a minimum line-height: 1.4 for body copy. Headings should be tighter. If you can't see that...piss off.\n\n  \u003e **A little less contrast**  \n  \u003e Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole. I would've even made this site's background a nice #EEEEEE if I wasn't so focused on keeping declarations to a lean 7 fucking lines.\n\n  \u003e **Line-width, motherfucker**  \n  \u003e Looking at an LCD screen is strainful enough. Don't make me read a line of text that's 200 fucking characters long. Keep it to a nice 60-80 and users might actually read more than one sentence of your worthless dribble.\n\n  ```css\n  h1, h2, h3, h4, h5, h6 { line-height: 1.2; }\n  body { line-height: 1.6; color: #444; margin: 1em auto; max-width: 35em; }\n  ```\n  Note: This is the set of rules that makes the biggest visual difference, even though it fits in a tweet.\n  It's quite opinionated, sure, and not right for every design -- but a much better default to start from.\n  The only rule not included here was the font size,\n  which is better handled by the responsive text sizing described in the CSS Tricks entry above.\n\n- From **[Skeleton](http://getskeleton.com)**, by Dave Gamache ([@dhg](https://github.com/dhg)):  \n  Clean table style:\n  ```css\n  table { border-collapse: collapse; font-family: sans-serif; font-size: 90%; }\n  th, td { padding: 0 .75em; text-align: left; border-bottom: 1px solid #ddd; }\n  th { border-bottom-color: #aaa; }\n  th:first-child, td:first-child { padding-left: 0; }\n  th:last-child, td:last-child { padding-right: 0; }\n  ```\n\n- Additional adjustments (my own)\n  ```css\n  a { text-decoration: none; } a:hover { text-decoration: underline; }\n  a { color: RoyalBlue; } a:visited { color: Indigo; }\n  pre, code, kbd, samp { padding: .2em .5em; background: #eee; border-radius: 4px; }\n  img { margin: .5em; }\n  textarea { vertical-align: text-top; }\n  ```\n","funding_links":["https://github.com/sponsors/waldyrious","https://liberapay.com/waldyrious","https://flattr.com/@waldyrious","https://paypal.me/waldyrious"],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaldyrious%2Fdownstyler","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaldyrious%2Fdownstyler","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaldyrious%2Fdownstyler/lists"}