{"id":13912458,"url":"https://github.com/emareg/classlesscss","last_synced_at":"2025-07-18T12:30:56.808Z","repository":{"id":39625447,"uuid":"187022048","full_name":"emareg/classlesscss","owner":"emareg","description":"CSS with few but great styles for basic HTML5 tags","archived":false,"fork":false,"pushed_at":"2024-09-08T19:50:35.000Z","size":952,"stargazers_count":215,"open_issues_count":6,"forks_count":16,"subscribers_count":10,"default_branch":"master","last_synced_at":"2024-09-09T20:49:09.829Z","etag":null,"topics":["css3","html5-tags","responsive-design"],"latest_commit_sha":null,"homepage":"http://classless.de","language":null,"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/emareg.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-05-16T12:19:21.000Z","updated_at":"2024-09-08T18:41:39.000Z","dependencies_parsed_at":"2024-01-14T08:13:55.478Z","dependency_job_id":"d38cc372-c77f-4f8d-a169-a1ef67502793","html_url":"https://github.com/emareg/classlesscss","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emareg%2Fclasslesscss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emareg%2Fclasslesscss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emareg%2Fclasslesscss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/emareg%2Fclasslesscss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/emareg","download_url":"https://codeload.github.com/emareg/classlesscss/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":226403794,"owners_count":17619723,"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":["css3","html5-tags","responsive-design"],"created_at":"2024-08-07T01:01:28.654Z","updated_at":"2025-07-18T12:30:56.802Z","avatar_url":"https://github.com/emareg.png","language":null,"funding_links":[],"categories":["others"],"sub_categories":[],"readme":"\u003cimg src=\"docs/favicon.png\" width=\"64\"\u003e\n\n# Classless.css\n\nClassless.css is one small CSS file, which defines few but great styles for basic HTML5 tags plus a few classes for grid and spacing. Nothing more. Nothing less.\n\n**Demo:** at [classless.de](http://classless.de)\n\n\n\n## Features\n\n* **Small.** Only 400 lines of pure CSS3 for tooltips, grid, navigation bar, cards and more.\n* **Single File.** Everything in one file, no dependencies, no JavaScript.\n* **Modular.** Don't need all features? The CSS file is structured into feature groups, simply delete what you don't need¹.\n* **Responsive.** We use media queries, em/rem units, and smart overflows for tables and code.\n* **Bootstrap Compatible.** Special features that require classes use the same names as Bootstrap.\n\n¹: we also offer a pre-made tiny version (80 lines) with only the base styles.\n\n\n## Getting Started\n\nFor testing, you can simply insert the following line into your HTML file. For production, please host the classless.css file yourself.\n    \n```html\n\u003clink rel=\"stylesheet\" href=\"https://classless.de/classless.css\"\u003e\n```\n\n\n### Embedding Font 'Open Sans'\nClassless looks best with the font 'Open Sans'. Earlier versions of Classless directly imported the font from [Google Fonts](https://fonts.google.com/specimen/Open+Sans). However, this leaks the visitor's IP to Google servers which is [not compliant](https://www.theregister.com/2022/01/31/website_fine_google_fonts_gdpr/) with EU's GDPR. We therefore leave it to the user to choose how to import the font. Click on one of the following three methods\n\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e1. Import from Google Font Anyway.\u003c/strong\u003e\u003c/summary\u003e\n\nAdd the following line to Classless.css:\n\n```css\n@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400');\n```\n\nIn order to be compliant with GDPR, you need to ask for the visitor's consent.\n\n\u003c/details\u003e\n\n\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e2. Use a GDPR compliant CDN.\u003c/strong\u003e\u003c/summary\u003e\n\nInstead of using Google, you could import the font from a CDN that is GDPR compliant. Candidates (no guarantee) are\n\n#### CDN Fonts\nOffers the fonts but no idea where this service is hosted or how it processes IP addresses.\n\n```css\n@import url('http://fonts.cdnfonts.com/css/open-sans');\n```\n\n\n\n#### Unpkg\n[Unpkg](https://unpkg.com/) hosts files of NPM packages, including `fontsource`.\nThey also have an [open issue](https://github.com/mjackson/unpkg/issues/294) regarding GDPR compliance, but as of 2022 there is no statement. Since the CSS files are written for local access (relative paths), you need to add the following font definitions.\n\n```css\n@font-face {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 400;\n  src: url('https://unpkg.com/@fontsource/open-sans@4.5.8/files/open-sans-all-400-normal.woff') format('woff');\n}\n\n@font-face {\n  font-family: 'Open Sans';\n  font-style: normal;\n  font-display: swap;\n  font-weight: 700;\n  src: url('https://unpkg.com/@fontsource/open-sans@4.5.8/files/open-sans-all-400-normal.woff') format('woff');\n}\n\n@font-face {\n  font-family: 'Open Sans';\n  font-style: italic;\n  font-display: swap;\n  font-weight: 400;\n  src: url('https://unpkg.com/@fontsource/open-sans@4.5.8/files/open-sans-all-400-italic.woff') format('woff');\n}\n```\n\n\n\n\u003c/details\u003e\n\n\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003cstrong\u003e3. Host Fonts Yourself.\u003c/strong\u003e\u003c/summary\u003e\n\n#### Add Manually\nThe following project offers a step-by-step explanation for hosting Google fonts on your own server:\n\nhttps://gwfh.mranftl.com/fonts/open-sans?subsets=latin\n\n\n#### Using NPM\n\nInstall fontsource and add `@import '@fontsource/open-sans';` to classless.css\n\n```bash\nnpm install @fontsource/open-sans\necho -e \"\\n@import '@fontsource/open-sans';\\n\" \u003e\u003e classless.css\n```\n\n\n\n\u003c/details\u003e\u0026nbsp;\n\n\n\nBesides that, Classless looks nice with many fonts and you can choose any other font you like.\n\n\n\n## Comparison of Minimal Frameworks\n\n\u003ctable\u003e\n  \u003cthead\u003e\n    \u003ctr\u003e\n      \u003cth\u003e\u003c/th\u003e      \n      \u003cth\u003eClassless\u003c/th\u003e      \n      \u003cth\u003e\u003ca href=\"http://getskeleton.com/\"\u003eSkeleton\u003c/a\u003e\u003c/th\u003e\n      \u003cth\u003e\u003ca href=\"https://milligram.io/\"\u003eMilligram\u003c/a\u003e\u003c/th\u003e\n      \u003cth\u003e\u003ca href=\"https://oxal.org/projects/sakura/\"\u003eSakura\u003c/a\u003e\u003c/th\u003e\n    \u003c/tr\u003e\n  \u003c/thead\u003e\n  \u003ctbody\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eFeatures\u003c/td\u003e      \n      \u003ctd\u003eresponsive, grid,\u003cbr\u003ethemes, navbar,\u003cbr\u003ecards, utilities\u003c/td\u003e      \n      \u003ctd\u003eresponsive,\u003cbr\u003egrid\u003c/td\u003e      \n      \u003ctd\u003eresponsive,\u003cbr\u003egrid, utilities\u003c/td\u003e\n      \u003ctd\u003eresponsive\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd data-tooltip=\"Size of the readable, non-minified code (these tiny libs don't need minimizers)\"\u003eSize\u003c/td\u003e      \n      \u003ctd\u003e11.2 kB\u003cbr\u003e400 LOC\u003c/td\u003e      \n      \u003ctd\u003e11.2 kB\u003cbr\u003e400 LOC\u003c/td\u003e      \n      \u003ctd\u003e10.3 kB\u003cbr\u003e600 LOC\u003c/td\u003e\n      \u003ctd\u003e3.3 kB \u003cbr\u003e165 LOC\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eReset\u003c/td\u003e      \n      \u003ctd\u003etiny reset\u003c/td\u003e      \n      \u003ctd\u003enormalize\u003c/td\u003e      \n      \u003ctd\u003enormalize\u003c/td\u003e\n      \u003ctd\u003enormalize\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eBrowsers\u003c/td\u003e      \n      \u003ctd\u003eChrome, FF,\u003cbr\u003eEdge\u003c/td\u003e      \n      \u003ctd\u003eChrome, FF\u003c/td\u003e      \n      \u003ctd\u003eChrome, FF, Opera\u003cbr\u003e Edge, Safari\u003c/td\u003e      \n      \u003ctd\u003eChrome, FF\u003c/td\u003e\n    \u003c/tr\u003e\n    \u003ctr\u003e\n      \u003ctd\u003eLicense\u003c/td\u003e      \n      \u003ctd\u003eMIT\u003c/td\u003e      \n      \u003ctd\u003eMIT\u003c/td\u003e      \n      \u003ctd\u003eMIT\u003c/td\u003e      \n      \u003ctd\u003eMIT\u003c/td\u003e      \n    \u003c/tr\u003e          \n  \u003c/tbody\u003e\n\u003c/table\u003e\n\n\n## Classeless Support\n\n\n| Browser Support               |      v0.94 |      v0.95 |       v1.0 |         v1.1 | \n|-------------------------------|------------|------------|------------|--------------|\n| FireFox 122.0 on Ubuntu 22.04 | --         |      --    | perfect    | perfect      |\n| Chrome  128.0 on Windows 10   | --         |      --    | perfect    | perfect      |\n| Edge    128.0 on Windows 10   | --         |      --    | perfect    | perfect      |\n| Firefox 103.0 on Android 14   | --         |      --    | perfect    | perfect      |\n| Brave    1.69 on Android 14   | --         |      --    | perfect    | perfect      |\n| Chromium 96.0 on Ubuntu 20.04 | --         | perfect    | perfect    | --           |\n| FireFox 97.0  on Ubuntu 20.04 | --         | perfect    | perfect    | --           |\n| FireFox 84.0  on Windows 10   | perfect    | perfect    | perfect    | --           |\n| Edge 88.0 on Windows 10       | perfect    | perfect    | perfect    | --           |\n| IE 11 on Windows 10           | poor/good¹ | poor/good¹ | poor/good¹ | --           |\n| FireFox 85.1 on Android 10    | perfect    | perfect    | perfect    | --           |\n| Samsung Browser on Android 10 | perfect    | perfect    | perfect    | --           |\n| Safari on iPhone 10           | perfect    | --         | good²      | --           |\n\n\n¹: Classless-full: body full width, table and code styles ignored, cite elements overlap text. However, classless-tiny without variables looks good.\u003cbr\u003e\n²: card borders not rounded\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femareg%2Fclasslesscss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Femareg%2Fclasslesscss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Femareg%2Fclasslesscss/lists"}