{"id":13716277,"url":"https://github.com/Kimeiga/bahunya","last_synced_at":"2025-05-07T05:32:28.185Z","repository":{"id":55105879,"uuid":"147978200","full_name":"Kimeiga/bahunya","owner":"Kimeiga","description":"10KB classless CSS framework with a navbar and dark styling","archived":false,"fork":false,"pushed_at":"2023-03-12T21:05:46.000Z","size":408,"stargazers_count":296,"open_issues_count":2,"forks_count":19,"subscribers_count":11,"default_branch":"master","last_synced_at":"2024-11-14T04:34:41.911Z","etag":null,"topics":["classless","classless-theme","css","css-framework","css3","framework","html","small","tiny"],"latest_commit_sha":null,"homepage":"https://hakanalpay.com/bahunya/","language":"HTML","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/Kimeiga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-09-08T23:46:32.000Z","updated_at":"2024-11-05T10:33:05.000Z","dependencies_parsed_at":"2024-01-05T23:52:00.615Z","dependency_job_id":"c2cc6bcb-bbb1-4645-9927-0ca0c4e51730","html_url":"https://github.com/Kimeiga/bahunya","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/Kimeiga%2Fbahunya","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kimeiga%2Fbahunya/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kimeiga%2Fbahunya/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kimeiga%2Fbahunya/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kimeiga","download_url":"https://codeload.github.com/Kimeiga/bahunya/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252823207,"owners_count":21809702,"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","classless-theme","css","css-framework","css3","framework","html","small","tiny"],"created_at":"2024-08-03T00:01:08.852Z","updated_at":"2025-05-07T05:32:27.807Z","avatar_url":"https://github.com/Kimeiga.png","language":"HTML","funding_links":[],"categories":["HTML","Frameworks / Resources"],"sub_categories":["B"],"readme":"\u003cp align=\"center\"\u003e\n  \u003cimg src=\"src/bahunya-logo.png\" alt=\"bahunya logo\"\u003e\n\u003c/p\u003e\n\n# Bahunya\n\nA *classless* CSS framework with a *navbar* and *dark styling* for around 10.46 kB.\n\nUse it by pasting the following into your `\u003chead\u003e`\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/gh/kimeiga/bahunya/dist/bahunya.min.css\"\u003e\n```\n\nNow write your web app with semantic html elements and watch it look pretty right out of the box, no css classes needed!\n\n### Goal of the Project\n\nThe ultimate goal of Bahunya is to be a CSS \"framework\" that can provide almost everything you really need for a web app or website without introducing any new CSS classes at all. \n\nI observed that many of the most common UI elements in websites can be wholly described by semantic HTML elements rather than `\u003cdiv\u003e`'s with classes. What's more is that most CSS frameworks tend to style these elements very similarly. So why not remove the classes altogether and use semantic html elements (`\u003cnav\u003e`, `\u003cmain\u003e`, etc), which can help improve accessiblity for screen readers, and also make the website source easier to read and write for developers.\n\nThat's the north star of this project: to get as far as possible toward that goal without introducing classes (this will mean Bahunya might not have a grid system or other things where classes needed). If you have ideas on more things to add without classes, feel free to contribute!\n\n* * *\n\nHow to make the navbar\n----------------------\n\nExample:\n\n```html\n\u003cnav\u003e\n  \u003ca href=\"/\"\u003eBahunya\u003c/a\u003e\n  \u003ca href=\"/test.html\"\u003etest\u003c/a\u003e\n  \u003ca href=\"/markdown.html\"\u003emarkdown\u003c/a\u003e\n\u003c/nav\u003e\n```\n\nWhat about a navbar with nested lists?\n\n```html\n\u003cnav\u003e\n  \u003cul\u003e\n    \u003cli\u003e\n      \u003ca href=\"#text\"\u003eText\u003c/a\u003e\n      \u003cul\u003e\n          \u003cli\u003e\u003ca href=\"#text__headings\"\u003eHeadings\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#text__paragraphs\"\u003eParagraphs\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#text__blockquotes\"\u003eBlockquotes\u003c/a\u003e\u003c/li\u003e\n          ...\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#embedded\"\u003eEmbedded content\u003c/a\u003e\n      \u003cul\u003e\n          \u003cli\u003e\u003ca href=\"#embedded__images\"\u003eImages\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#embedded__audio\"\u003eAudio\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#embedded__video\"\u003eVideo\u003c/a\u003e\u003c/li\u003e\n          ...\n      \u003c/ul\u003e\n    \u003c/li\u003e\n    \u003cli\u003e\n      \u003ca href=\"#forms\"\u003eForm elements\u003c/a\u003e\n      \u003cul\u003e\n          \u003cli\u003e\u003ca href=\"#forms__input\"\u003eInput fields\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#forms__select\"\u003eSelect menus\u003c/a\u003e\u003c/li\u003e\n          \u003cli\u003e\u003ca href=\"#forms__checkbox\"\u003eCheckboxes\u003c/a\u003e\u003c/li\u003e\n          ...\n      \u003c/ul\u003e\n    \u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/nav\u003e\n```\n\nAs you can see, the navbar works whether you use a unordered list with sub-unordered-lists (`\u003cul\u003e`'s with `\u003cli\u003e`'s) or if you just put the `\u003ca\u003e`'s right under the main `\u003cnav\u003e`. Both work, although I think the latter option might be better for screen readers.\n\n\n\n\n## To develop locally:\n\n`yarn`\n\n`yarn dev`\n\n## To build:\n\n`yarn build`\n\n### Mini Post-mortem\n\nI wrote about this framework in the DevX publication on Medium!\n\nhttps://medium.com/ucladevx/i-created-a-10kb-classless-css-framework-5d5eff56837d\n\nIf you are a computer science student at UCLA looking for a collection software team to hone your skills on a real-world project, feel free to apply!\n\nhttp://ucladevx.com/\n\n### Thanks\n\nHuge thanks to [Kognise](https://www.kognise.dev/) and all the folks behind [Water.css](https://watercss.kognise.dev/). Bahunya needed an enourmous facelift, and I was able to bootstrap (hehe) a lot of work from water.css. \n\nHuge thanks to [Yegor Bugayenko](https://www.yegor256.com/) and [Filipe Freire](https://filfreire.com/) for creating [Tacit](https://yegor256.github.io/tacit/), a fantastic classless CSS framework that inspired this project.\n\nAs for me, I'm [Kimeiga](https://hakanalpay.com) and I made this to help me get web apps off the ground without worrying too much styling.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKimeiga%2Fbahunya","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FKimeiga%2Fbahunya","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FKimeiga%2Fbahunya/lists"}