{"id":13760280,"url":"https://github.com/arp242/hello-css","last_synced_at":"2025-08-02T06:09:19.835Z","repository":{"id":63279119,"uuid":"166493844","full_name":"arp242/hello-css","owner":"arp242","description":"A CSS template focused on readability","archived":false,"fork":false,"pushed_at":"2022-11-22T09:35:09.000Z","size":422,"stargazers_count":190,"open_issues_count":2,"forks_count":11,"subscribers_count":6,"default_branch":"master","last_synced_at":"2025-04-02T05:03:52.266Z","etag":null,"topics":["css","css-template"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arp242.png","metadata":{"files":{"readme":"README.markdown","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"arp242"}},"created_at":"2019-01-19T01:34:28.000Z","updated_at":"2025-02-20T05:47:06.000Z","dependencies_parsed_at":"2023-01-23T09:01:22.530Z","dependency_job_id":null,"html_url":"https://github.com/arp242/hello-css","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/arp242/hello-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arp242%2Fhello-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arp242%2Fhello-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arp242%2Fhello-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arp242%2Fhello-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arp242","download_url":"https://codeload.github.com/arp242/hello-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arp242%2Fhello-css/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":268340186,"owners_count":24234678,"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","status":"online","status_checked_at":"2025-08-02T02:00:12.353Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","css-template"],"created_at":"2024-08-03T13:01:06.698Z","updated_at":"2025-08-02T06:09:19.623Z","avatar_url":"https://github.com/arp242.png","language":"CSS","readme":"Hello, CSS!\n===========\n\nHello, CSS! is a CSS template which styles most elements to neutral and\naesthetically pleasing defaults. I copy/pasted variants of this so often I\nfigured I might as well put a cleaned up and annotated version somewhere.\n\nI encourage you to pick ’n choose what you need, rather than insert everything.\n\nDesign principles\n-----------------\n\n\u003e Good typography can help your reader devote less attention to the mechanics of\n\u003e reading and more attention to your message. Conversely, bad typography can\n\u003e distract your reader and undermine your message.\n\u003e\n\u003e —Matthew Butterick, [*Practical Typography*](https://practicaltypography.com/)\n\n1. Pleasant defaults that should work well for most websites.\n2. Main focus is text and good typography.\n3. Simplicity matters: easy to extend or modify.\n4. Works on all browser, screen sizes, assistive technology, and when printed.\n\n### Example pages.\n\n\u003c!-- \u003caside\u003eEmail me if you’re using it and I’ll add your site.\u003c/aside\u003e --\u003e\n\n- [demo/README.html](https://arp242.github.io/hello-css/demo/README.html) (just base.css);\n  [demo/README-fancy.html](https://arp242.github.io/hello-css/demo/README-fancy.html) (all files).\n- My website, [arp242.net](https://arp242.net).\n- [GoatCounter](https://www.goatcounter.com) for both the public facing website\n  as well as the backend (with quite a few additions, but Hello, CSS! as the\n  base template).\n- I reformatted [The Art of Unix programming](https://arp242.net/the-art-of-unix-programming) with this template.\n- [My CV](https://arp242.net/cv/CV-MartinTournoij.pdf).\n\nUsage\n-----\n\nThere are several files, mix-and-match as you want.\n\nThere are only a few classes (see the table below); for the most part element\nselectors are used (e.g. `blockquote { .. }` instead of `.blockquote { .. }`).\n\nThe files are brief and well annotated, and a number of styles have\ncommented-out alternatives. I encourage you to read and modify to your\npreference, rather than blindly copy/paste.\u003c!--\u003csup\u003e\u003ca href=\"#fn-1\"\u003e[1]\u003c/a\u003e\u003c/sup\u003e --\u003e\n\nNot every last element is styled. For some things – such as \u0026lt;abbr\u0026gt; – it’s\nfine to rely on the browser defaults, small differences are okay. Feel free to\nopen an issue if you’re missing something in particular.\n\n### HTML example\n\nA typical HTML page might look something like:\n\n    \u003cbody\u003e\n        \u003cnav class=\"center\"\u003e\n            \u003ca href=\"/\"\u003eHome\u003c/a\u003e\n            \u003ca href=\"/weblog\"\u003eWeblog\u003c/a\u003e\n        \u003c/nav\u003e\n\n        \u003carticle class=\"page\"\u003e\n            \u003ch1\u003eMain content\u003c/h1\u003e\n            \u003cp\u003e..\u003c/p\u003e\n\n            \u003cdiv class=\"postscript\"\u003e\u003cstrong\u003eFootnotes\u003c/strong\u003e\n                ..\n            \u003c/div\u003e\n            \u003cdiv class=\"postscript\"\u003e\u003cstrong\u003eFeedback\u003c/strong\u003e\n                ..\n            \u003c/div\u003e\n        \u003c/article\u003e\n\n        \u003cfooter class=\"center\" style=\"text-align: right\"\u003e\n            Copyright © 2010–2018 Martin Tournoij \u0026lt;martin@arp242.net\u0026gt;\u003cbr\u003e\n            This document is licensed under a\n            \u003ca rel=\"license\" href=\"http://creativecommons.org/licenses/by/4.0/\"\u003e\n                cc-by 4.0 license\n            \u003c/a\u003e.\n        \u003c/footer\u003e\n    \u003c/body\u003e\n\nAlso see [start.html](https://github.com/arp242/hello-css/blob/master/start.html).\n\n### Classes\n\n| Class        | File           | Purpose                                                                                |\n| ------------ | -------------- | -------------------------------------------------------------------------------------- |\n| .center      | base.css       | Center-align the main content.                                                         |\n| .page        | base.css       | Main page body.                                                                        |\n| .page-a4     | base.css       | A4 page size; useful when producing pages where printing is high priority (e.g. a CV). |\n| .page-letter | base.css       | U.S. letter page size.                                                                 |\n| .full        | base.css       | Put a pre, table, or figure element over the full width of a .page, including margins. |\n| .border      | base.css       | Add a border around figure elements.                                                   |\n| .link        | base.css       | Format as a link; mainly for buttons, since regular links can't do POST requests.      |\n| .left        | base.css       | Left-align a table cell.                                                               |\n| .right       | base.css       | Right-align a table cell; the cell will also use tabular numbers for alignment.        |\n| .postscript  | postscript.css | Page content; for e.g. footnotes or feedback section.                                  |\n| .vertical    | form.css       | Layout the form vertically (labels above inputs).                                      |\n| .horizontal  | form.css       | Layout the form horizontally (labels next to inputs).                                  |\n\n### Included files\n\n| File           | Description                                      |\n| -------------- | ------------------------------------------------ |\n| base.css       | Basic defaults; this is the bulk of the project. |\n| form.css       | Forms, inputs, labels (WIP).                     |\n| aside.css      | Content in margin.                               |\n| blockquote.css | Decorative quotation marks around blockquote.    |\n| postscript.css | P.S. content, such as footnotes.                 |\n| permalink.css  | Permalink markers in headers.                    |\n\nThe `dist/` directory contains versions without extensive annotations, as well\nas an `all.css` which contains all of the above files.\n\nYou can use the [singlepage](https://github.com/arp242/singlepage) tool to\ninline CSS files in to a document with `\u003cstyle\u003e` tags.\n\n### Related values (“variables”)\n\nThere are a number of variables you can define, they are included at the top of\n`base.css`.\n\n| Name           | Description                               | Default                            |\n| -------------- | ----------------------------------------- | ---------------------------------- |\n| --font         | The main font.                            | 16px/180% 'Libre Baskerville' (..) |\n| --width-body   | Width of main body text                   | 54rem                              |\n| --pad-x        | Padding to the side of the body           | 4rem                               |\n| --pad-y        | Padding to the top and bottom of the body | 1rem                               |\n| --color-bg     | Background colour of main body text       | #fff                               |\n| --color-text   | Colour of main body text                  | #252525                            |\n| --color-border | Border colour for table, fieldset, input  | #aaa                               |\n\n\nSee also\n--------\n\n- [hello-theme](https://bitbucket.org/jboy1/hello-theme/src/master/), a Pelican\n  theme based on this (with a few changes).\n\nCredits and license\n-------------------\n\nThe [Libre Baskerville font](https://github.com/impallari/Libre-Baskerville) in\nthe fonts directory is distributed under the SIL Open Font License 1.1. See\n[fonts/LICENSE](fonts/LICENSE).\n\nThe fleurons in the \u0026lt;hr\u0026gt; element are exports from the Deja-Vu font, which\nis in the public domain.\n\n\u003c!--\n\u003caside\u003eIn my country of The Netherlands it’s not clear if it’s possible to place works in the public domain,\n\t\u003ca href=\"https://www.iusmentis.com/auteursrecht/publiekdomein/#plaatsen\"\u003esee this article\u003c/a\u003e.\n\u003c/aside\u003e\n--\u003e\nEverything else is in the public domain. I renounce all copyright, and don’t\ncare what you do with it. Since this is not possible in all legal jurisdictions\nI’ve also attached a modified copy of the ISC license which replaces the\nattribution clause with the text “without any restrictions”:\n\n\tCopyright © Martin Tournoij\n\n\tPermission to use, copy, modify, and/or distribute this software for any purpose\n\twith or without fee is hereby granted, without any restrictions.\n\n\tTHE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\n\tREGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND\n\tFITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\n\tINDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS\n\tOF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER\n\tTORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF\n\tTHIS SOFTWARE.\n\n---\n\nCross-platform testing made possible by\n[BrowserStack](https://www.browserstack.com/), which provides free access for\nopen source projects.\n\n[![](https://arp242.github.io/hello-css/.browserstack.svg)](https://www.browserstack.com/)\n\n\u003c!--\n\u003cdiv class=\"postscript\"\u003e\n\t\u003cstrong\u003eFootnotes\u003c/strong\u003e\n\t\u003col\u003e\n\t\t\u003cli id=\"fn-1\"\u003e\u003cp\u003eIn my view it’s often better to just copy/paste and modify things, especially when it’s not\n\t\t\tinherently complex (like CSS), rather than spending a lot of effort on making it generic, as making software\n\t\t\tmore generic often comes at the price of increased complexity, maintains burden, and tend to make things\n\t\t\t\u003cem\u003eless\u003c/em\u003e flexible overall.\u003c/p\u003e\u003c/li\u003e\n\t\u003c/ol\u003e\n\u003c/div\u003e\n--\u003e\n","funding_links":["https://github.com/sponsors/arp242"],"categories":["CSS"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farp242%2Fhello-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farp242%2Fhello-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farp242%2Fhello-css/lists"}