{"id":18814333,"url":"https://github.com/n2geoff/stylelite","last_synced_at":"2026-01-02T06:33:29.567Z","repository":{"id":65556376,"uuid":"503571644","full_name":"n2geoff/stylelite","owner":"n2geoff","description":"minimal, drop-in, classlite css stylesheet","archived":false,"fork":false,"pushed_at":"2024-07-20T22:43:34.000Z","size":113,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-09T17:03:29.281Z","etag":null,"topics":["classless-css","css","css3","minimal","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/n2geoff.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":"2022-06-15T01:15:57.000Z","updated_at":"2024-07-20T22:43:37.000Z","dependencies_parsed_at":"2024-06-08T17:45:36.163Z","dependency_job_id":"e596860d-3c1c-4e7e-b328-3053cb5e2cec","html_url":"https://github.com/n2geoff/stylelite","commit_stats":{"total_commits":5,"total_committers":1,"mean_commits":5.0,"dds":0.0,"last_synced_commit":"3ff98f24d206667231b6cb3abffb2ff5822e5880"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n2geoff%2Fstylelite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n2geoff%2Fstylelite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n2geoff%2Fstylelite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/n2geoff%2Fstylelite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/n2geoff","download_url":"https://codeload.github.com/n2geoff/stylelite/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243075472,"owners_count":20232425,"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","css3","minimal","stylesheet"],"created_at":"2024-11-07T23:40:16.276Z","updated_at":"2026-01-02T06:33:29.554Z","avatar_url":"https://github.com/n2geoff.png","language":"CSS","readme":"# Stylelite CSS\n\n\u003e Styles that work for you\n\nStylelite is a tiny-dynamic-classlite css foundation for any project.  Easy to extend, with extras already available, and Great for rapid prototyping.\n\nIt *may* be light on `class`, but it makes up for it in *[style](src/extras)*\n\nAll in **2kb gzipped!**\n\n## Features\n\n- Tiny, 2kb\n- Class-lite\n- Few Layout Utility Classes\n    - `.grid`, `.group`, `.left`, `.right`, `.center`\n\n- **extras/** supplies pick-and-choose styles to expanded your options\n- Dynamic, 10 Custom CSS Vars\n- Includes Light and Dark Themes (`data-theme=\"light\"`)\n\nDesigned to work with default [Feather Icons](https://feathericons.com/)\n\n\n\u003e WARNING: ever-green browsers need only apply ;)\n\n\n## Get Started\n\nVia `jsdelivr` CDN\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/n2geoff/stylelite/dist/stylelite.min.css\"\u003e\n\n```\n\nor [Download](https://raw.githubusercontent.com/n2geoff/stylelite/main/dist/stylelite.min.css)\n\nInclude Feather Icons\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/feather-icons-css/css/feather.min.css\"\u003e\n\n```\n\n## Customize\n\nWhile **Stylelite** is a drop-and-forget cascading style sheet (css) file, that doesn't mean you cannot customize it -- easily!\n\nIt is RECOMMENDED you import **Stylelite** via a `main.css` or the like referenced in your web application, like\n\n```css\n@import url(stylelite);\n\n/* customize */\n\n:root {\n  --theme: steelblue;\n  --radius: 0rem;\n  ...\n}\n\n/* or add your own styles below */\n\n```\n### Avaliable Vars\n\n| Var | Default | Description |\n|--|--|--|\n| --theme | steelblue | theme color |\n| --size | 1rem | a universal size, margin, font-size, ect... |\n| --radius | 0rem | add some curves |\n| --fg| #17202A | foreground color |\n| --mg | #99A3A4 | midground color or netural color |\n| --bg | #FDFEFE | background color |\n| --white | #FFF | white color |\n| --black | #000 | black color |\n| --light | #EEE | light accent color |\n| --dark | #222 | dark accent color |\n\nBelow are some simple and common examples.\n\n### Dark Mode\n\nAdd `data-theme=\"dark\"` to the `html` tag for a taste of the dark side\n\n```html\n\u003chtml lang=\"en\" data-theme=\"dark\"\u003e\n```\n\n\u003e DEFAULT: data-theme=\"light\"\n\n### Theme\n\nThe stock theme color is `steelblue`, but you can change it to anything you want just add\n\n```css\n:root {\n  --theme: Magenta;\n}\n```\n\n\u003e NOTE: Light mode (default) should use dark theme colors, and dark mode should use light theme colors\n\n### Rounded Corners\n\nBy default Stylelite is a boxy design, but if you want a rounded design, just set `--radius` to something.  try `.4rem`\n\n\n## LICENSE\n\n- [MIT](LICENSE)\n\n\n## TODO\n\nKeep it small, but immediately useful.\n\nTweak to hit that SWEET spot:\n\n- Dark mode use native browser scroll bars/classes\n- Extras\n  - Colors  - Bootstrap-inspired classes\n  - Layout  - Little more flex-based layout options\n  - Switch  - More modern UI component\n  - Spinner - Identify content is loading\n  - Tabs    - Another useful modern UI component\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn2geoff%2Fstylelite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fn2geoff%2Fstylelite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fn2geoff%2Fstylelite/lists"}