[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-8784":3},{"id":4,"name":5,"fullName":6,"owner":5,"repo":5,"description":7,"homepage":8,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":15,"forks30d":15,"starsTrendScore":19,"compositeScore":20,"rankGlobal":9,"rankLanguage":9,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":24,"hasPages":22,"topics":25,"createdAt":9,"pushedAt":9,"updatedAt":37,"readmeContent":38,"aiSummary":39,"trendingCount":15,"starSnapshotCount":15,"syncStatus":40,"lastSyncTime":41,"discoverSource":42},8784,"beercss","beercss\u002Fbeercss","Build material design interfaces in record time... without stress for devs... 🍺💛","https:\u002F\u002Fwww.beercss.com",null,"Vue",2346,93,19,27,0,1,8,39,4,67.82,"MIT License",false,"main",true,[26,27,28,29,30,31,32,33,34,35,36],"css","design-system","html","material","material-3","material-3-design","material-3-expressive","material-design-3","material-you","semantic-html","web","2026-06-12 04:00:41","\u003Cp align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fwww.beercss.com\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cimg src=\"https:\u002F\u002Fwww.beercss.com\u002Flogo.png\" alt=\"Beer CSS logo\">\u003C\u002Fa>\n\u003C\u002Fp>\n\u003Cp align=\"center\">\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbeercss\u002Fbeercss\u002Fblob\u002Fmain\u002FLICENSE\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Flicense\u002Fbeercss\u002Fbeercss\" alt=\"license\">\u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbeercss\u002Fbeercss\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fjsdelivr\u002Fnpm\u002Fhy\u002Fbeercss\" alt=\"downloads\">\u003C\u002Fa>\n    \u003Ca>\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fbrotli_size-14.4kb-green\" alt=\"brotli size\">\u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fbeercss\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fv\u002Fbeercss\" alt=\"version\">\u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbeercss\u002Fbeercss\u002Fpulls\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues-pr\u002Fbeercss\u002Fbeercss\" alt=\"pull Request\">\u003C\u002Fa>\n    \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fbeercss\u002Fbeercss\u002Fissues\">\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fissues\u002Fbeercss\u002Fbeercss\" alt=\"issues\">\u003C\u002Fa>\n\u003C\u002Fp>\n\n# Beer CSS\n\nBuild material design interfaces in record time...\n\n...without stress for devs 🍺💛\n\nCheers, www.beercss.com\n\n# Sponsors\n\nBeer CSS is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome sponsors and backers. If you'd like to join them, please consider sponsoring Beer CSS's development.\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fopencollective.com\u002Fbeercss\">Open Collective\u003C\u002Fa>\u003Cbr \u002F>\u003Cbr \u002F>\n  \u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fbeercss\u002Fsponsors.svg?avatarHeight=56&button=false\" alt=\"Sponsors\">\n  \u003Cimg src=\"https:\u002F\u002Fopencollective.com\u002Fbeercss\u002Fbackers.svg?avatarHeight=56&button=false\" alt=\"Sponsors\">\n\u003C\u002Fp>\n\n\u003Cp align=\"center\">\n  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsponsors\u002Fbeercss\">Github Sponsors\u003C\u002Fa>\u003Cbr \u002F>\u003Cbr \u002F>\n  \u003Cimg src=\"https:\u002F\u002Fimages.weserv.nl\u002F?url=\u002Favatars.githubusercontent.com\u002Fu\u002F96993393?s=56&v=4&mask=circle&maxage=7d\" alt=\"Sponsors\">\n  \u003Cimg src=\"https:\u002F\u002Fimages.weserv.nl\u002F?url=avatars.githubusercontent.com\u002Fu\u002F15235526?s=56&v=4&mask=circle&maxage=7d\" alt=\"Sponsors\">\n  \u003Cimg src=\"https:\u002F\u002Fimages.weserv.nl\u002F?url=avatars.githubusercontent.com\u002Fu\u002F12303444?s=56&v=4&mask=circle&maxage=7d\" alt=\"Sponsors\">\n  \u003Cimg src=\"https:\u002F\u002Fimages.weserv.nl\u002F?url=avatars.githubusercontent.com\u002Fu\u002F40445940?s=56&v=4&mask=circle&maxage=7d\" alt=\"Sponsors\">\n  \u003Cimg src=\"https:\u002F\u002Fimages.weserv.nl\u002F?url=avatars.githubusercontent.com\u002Fu\u002F74856856?s=56&v=4&mask=circle&maxage=7d\" alt=\"Sponsors\">\n  \u003Cimg src=\"https:\u002F\u002Fimages.weserv.nl\u002F?url=avatars.githubusercontent.com\u002Fu\u002F419690?s=56&v=4&mask=circle&maxage=7d\" alt=\"Sponsors\">\n  \u003Cimg src=\"https:\u002F\u002Fimages.weserv.nl\u002F?url=avatars.githubusercontent.com\u002Fu\u002F181576?s=56&v=4&mask=circle&maxage=7d\" alt=\"Sponsors\">\n  \u003Cimg src=\"https:\u002F\u002Fimages.weserv.nl\u002F?url=avatars.githubusercontent.com\u002Fu\u002F797439?s=56&v=4&mask=circle&maxage=7d\" alt=\"Sponsors\">\n  \u003Cimg src=\"https:\u002F\u002Fimages.weserv.nl\u002F?url=avatars.githubusercontent.com\u002Fu\u002F3647943?s=56&v=4&mask=circle&maxage=7d\" alt=\"Sponsors\">\n\u003C\u002Fp>\n\n# Why?\n\n- 🥇 The first CSS framework based on Material Design 3\n- 👉 Latest \"M3 Expressive\" already.\n- ⬇️ 10x smaller than others CSS frameworks based on Material Design.\n- 🧙‍♂️ Translates Material Design to HTML semantic standard.\n- 🤓 Ready to use with any JS framework.\n- 🎯 Highly focused on DX.\n- 🚫 No build steps, configurations or dependencies.\n- ✨ Build modern interfaces without any custom CSS.\n- ✅ Compliance with web standards.\n- 💯 Google Lighthouse friendly.\n\n# A lightweight beer\n\nLet's be honest, in the ever-evolving world of web development, we're all looking for that sweet spot: powerful functionality without the bloat. We want speed, efficiency, and something that doesn't feel like lugging around a digital elephant. And if you're looking at the chart below, you're probably thinking, \"Wow, XYZ is huge!\". You're not wrong. But look all the way to the top. See that? That's Beer CSS.\n\n![image](https:\u002F\u002Fgithub.com\u002Fuser-attachments\u002Fassets\u002F23df0121-7716-4114-9751-38b1e519cfcd)\n\n# The principles\n\nThis project was guided by the **\"Germany Beer Purity Law\"** or **\"Reinheitsgebot\"** created in 1516. This law states that beer should only be brewed with the following ingredients: **water**, **barley malt** and **hops**. Only 3 ingredients. Exciting, right? So we thinking about It and our 3 ingredients are: [Settings](docs\u002FSETTINGS.md), [Elements](docs\u002FELEMENTS.md) and [Helpers](docs\u002FHELPERS.md). This sounds weird at first time, because It's not BEM, OOCSS, SMACSS, ITCSS, \"Utility first\" or any other approach. Our approach doesn't avoid some bad practices, but is lightweight, tasty and pure like a beer. Just try it and feel it! 😁\n\n```\n|  SETTINGS     |       \u002F\u002F The settings affects all document\n|---------------|----|\n|               |    |\n|  ELEMENTS     |    |  \u002F\u002F The elements are the components, widgets or tags\n|               |    |\n|---------------|    |\n|               |    |\n|               |    |\n|  HELPERS      |----|  \u002F\u002F The common helpers makes the elements more scalable and customizable\n|               |\n|               |\n|---------------|\n```\n\n# Get started\n\n### DEFAULT VERSION\n\n```html\n\u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbeercss@4.0.21\u002Fdist\u002Fcdn\u002Fbeer.min.css\" rel=\"stylesheet\" \u002F>\n\u003Cscript type=\"module\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbeercss@4.0.21\u002Fdist\u002Fcdn\u002Fbeer.min.js\">\u003C\u002Fscript>\n\u003Cscript type=\"module\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fmaterial-dynamic-colors@1.1.4\u002Fdist\u002Fcdn\u002Fmaterial-dynamic-colors.min.js\">\u003C\u002Fscript>\n```\n\n```js\nnpm i beercss\nnpm i material-dynamic-colors\n```\n\n```js\nimport \"beercss\";\nimport \"material-dynamic-colors\";\n```\n\n### SCOPED VERSION\nApplied on child elements of `\u003C* class=\"beer\">...\u003C\u002F*>`.\n\n```html\n\u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbeercss@4.0.21\u002Fdist\u002Fcdn\u002Fbeer.scoped.min.css\" rel=\"stylesheet\" \u002F>\n\u003Cscript type=\"module\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbeercss@4.0.21\u002Fdist\u002Fcdn\u002Fbeer.min.js\">\u003C\u002Fscript>\n\u003Cscript type=\"module\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fmaterial-dynamic-colors@1.1.4\u002Fdist\u002Fcdn\u002Fmaterial-dynamic-colors.min.js\">\u003C\u002Fscript>\n```\n\n```js\nnpm i beercss\nnpm i material-dynamic-colors\n```\n\n```js\nimport \"beercss\u002Fscoped\";\nimport \"material-dynamic-colors\";\n```\n\n### CUSTOM ELEMENT VERSION\nApplied on child elements of `\u003Cbeer-css>...\u003C\u002Fbeer-css>`.\n\n```html\n\u003Cscript type=\"module\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbeercss@4.0.21\u002Fdist\u002Fcdn\u002Fbeer.custom-element.min.js\">\u003C\u002Fscript>\n\u003Cscript type=\"module\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fmaterial-dynamic-colors@1.1.4\u002Fdist\u002Fcdn\u002Fmaterial-dynamic-colors.min.js\">\u003C\u002Fscript>\n```\n\n```js\nnpm i beercss\nnpm i material-dynamic-colors\n```\n\n```js\nimport \"beercss\u002Fcustom-element\";\nimport \"material-dynamic-colors\";\n```\n\n### LOCAL CDN VERSION\n\nDownload all files from CDN https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbeercss@4.0.21\u002Fdist\u002Fcdn\u002F and https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fmaterial-dynamic-colors@1.1.4\u002Fdist\u002Fcdn\u002F. Now put the files inside a new folder in your project (like `\u002Fbeercss` for example):\n\n```html\n\u003Clink href=\"\u002Fbeercss\u002Fbeer.min.css\" rel=\"stylesheet\" \u002F>\n\u003Cscript type=\"module\" src=\"\u002Fbeercss\u002Fbeer.min.js\">\u003C\u002Fscript>\n\u003Cscript type=\"module\" src=\"\u002Fbeercss\u002Fmaterial-dynamic-colors.min.js\">\u003C\u002Fscript>\n```\n\n### HTML\n\nYou can use this html to setup your project. See on [Codepen](https:\u002F\u002Fcodepen.io\u002Fleo-bnu\u002Fpen\u002FyLKLPxj). More about in [Main layout](docs\u002FMAIN_LAYOUT.md).\n\n```html\n\u003C!DOCTYPE html>\n\u003Chtml lang=\"en\">\n  \u003Chead>\n    \u003Cmeta charset=\"UTF-8\">\n    \u003Cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    \u003Cmeta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\">\n    \u003Cmeta name=\"google\" content=\"notranslate\">\n    \u003Ctitle>Hello world\u003C\u002Ftitle>\n    \u003Clink href=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbeercss@4.0.21\u002Fdist\u002Fcdn\u002Fbeer.min.css\" rel=\"stylesheet\">\n    \u003Cscript type=\"module\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fbeercss@4.0.21\u002Fdist\u002Fcdn\u002Fbeer.min.js\">\u003C\u002Fscript>\n    \u003Cscript type=\"module\" src=\"https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002Fmaterial-dynamic-colors@1.1.4\u002Fdist\u002Fcdn\u002Fmaterial-dynamic-colors.min.js\">\u003C\u002Fscript>\n  \u003C\u002Fhead>\n  \u003Cbody class=\"dark\">\n    \u003Cnav class=\"left max l\">\n      \u003Cheader>\n        \u003Cnav>\n          \u003Cimg alt=\"logo\" src=\"https:\u002F\u002Fwww.beercss.com\u002Ffavicon.png\" class=\"circle extra\">\n          \u003Ch6>Cheers\u003C\u002Fh6>\n        \u003C\u002Fnav>\n      \u003C\u002Fheader>\n      \u003Ca>\n        \u003Ci>home\u003C\u002Fi>\n        \u003Cspan>Home\u003C\u002Fspan>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>search\u003C\u002Fi>\n        \u003Cspan>Search\u003C\u002Fspan>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>share\u003C\u002Fi>\n        \u003Cspan>Share\u003C\u002Fspan>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>more_vert\u003C\u002Fi>\n        \u003Cspan>More\u003C\u002Fspan>\n      \u003C\u002Fa>\n      \u003Cdiv class=\"divider\">\u003C\u002Fdiv>\n      \u003Ca>\n        \u003Ci>widgets\u003C\u002Fi>\n        \u003Cspan>Widgets\u003C\u002Fspan>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>chat\u003C\u002Fi>\n        \u003Cspan>Chat\u003C\u002Fspan>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>help\u003C\u002Fi>\n        \u003Cspan>Help\u003C\u002Fspan>\n      \u003C\u002Fa>  \n    \u003C\u002Fnav>\n\n    \u003Cnav class=\"left m\">\n      \u003Cheader>\n        \u003Cimg alt=\"logo\" src=\"https:\u002F\u002Fwww.beercss.com\u002Ffavicon.png\" class=\"circle extra\">\n      \u003C\u002Fheader>\n      \u003Ca>\n        \u003Ci>home\u003C\u002Fi>\n        \u003Cspan>Home\u003C\u002Fspan>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>search\u003C\u002Fi>\n        \u003Cspan>Search\u003C\u002Fspan>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>share\u003C\u002Fi>\n        \u003Cspan>Share\u003C\u002Fspan>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>more_vert\u003C\u002Fi>\n        \u003Cspan>More\u003C\u002Fspan>\n      \u003C\u002Fa>\n    \u003C\u002Fnav>\n\n    \u003Cnav class=\"bottom s\">\n      \u003Ca>\n        \u003Ci>home\u003C\u002Fi>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>search\u003C\u002Fi>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>share\u003C\u002Fi>\n      \u003C\u002Fa>\n      \u003Ca>\n        \u003Ci>more_vert\u003C\u002Fi>\n      \u003C\u002Fa>\n    \u003C\u002Fnav>\n\n    \u003Cmain class=\"responsive\">\n      \u003Cimg alt=\"beer and woman\" src=\"https:\u002F\u002Fwww.beercss.com\u002Fbeer-and-woman.svg\" class=\"responsive round medium-height\">\n      \u003Ch3>Welcome\u003C\u002Fh3>\n      \u003Ch4>The beer is ready!\u003C\u002Fh4>\n    \u003C\u002Fmain>\n  \u003C\u002Fbody>\n\u003C\u002Fhtml>\n```\n\n**The `beer.min.js` and `material-dynamic-colors.min.js` are optional, but could be required for some use cases.**\n\n### ✅ DO:\n\n```\n\u002F\u002F 1 setting to 1 document\n\u003Cbody class=\"dark|light\">...\u003C\u002Fbody>\n\n\u002F\u002F 1 element to N helpers\n\u003Celement class=\"helper helper\">...\u003C\u002Felement>\n\u003Cdiv class=\"element helper helper\">...\u003C\u002Fdiv>\n\n\u002F\u002F 1 main element per document\n\u003C...>\n  \u003Cmain>\u003C\u002Fmain>\n\u003C\u002F...>\n\n\u002F\u002F inline\u002Fblock elements in block elements\n\u003Cdiv>\n  \u003Cdiv>\u003C\u002Fdiv>\n  \u003Cspan>\u003C\u002Fspan>\n\u003C\u002Fdiv>\n\n\u002F\u002F write css like this\n.element.helper {...}\n.element > .element {...}\n.element > .helper {...}\n```\n\n### 🚫 DON'T:\n\n```\n\u002F\u002F N elements to 1 tag\n\u003Cdiv class=\"element element helper\">...\u003C\u002Fdiv>\n\u003Celement class=\"element helper\">...\u003C\u002Felement>\n\n\u002F\u002F element with dependencies\n\u003Cdiv class=\"element\">\n  \u003Cdiv class=\"element-header\">...\u003C\u002Fdiv>\n  \u003Cdiv class=\"element-content\">...\u003C\u002Fdiv>\n  \u003Cdiv class=\"element-footer\">...\u003C\u002Fdiv>\n\u003C\u002Fdiv>\n\n\u002F\u002F N main elements per document\n\u003C...>\n  \u003Cmain>\u003C\u002Fmain>\n  \u003Cmain>\u003C\u002Fmain>\n\u003C\u002F...>\n\n\u002F\u002F block elements in inline elements\n\u003Cspan>\n  \u003Cdiv>\u003C\u002Fdiv>\n\u003C\u002Fspan>\n\n\u002F\u002F write css like this\n.element.element {...}\n.element .element {...}\n.element .helper {...}\n```\n\n# Documentation\n\nComplete documentation and examples available at:\n\n- **[Documentation](docs\u002FINDEX.md)**\n- **[Codepen](https:\u002F\u002Fcodepen.io\u002Fcollection\u002FXydYMB)**\n- **[Homepage](https:\u002F\u002Fwww.beercss.com)**\n\n# Contributing guide\n\nHi! We are really excited that you are interested in contributing to Beer CSS! Before submitting your contribution, please make sure to take a moment and read through the following guidelines:\n\n[Beer CSS Contributing Guidelines](CONTRIBUTING.md)\n\n# License\n\n[MIT](https:\u002F\u002Fopensource.org\u002Flicenses\u002FMIT)\n\n# Cheers to all stargazers 🍻\n[![Stargazers repo roster for @beercss\u002Fbeercss](https:\u002F\u002Freporoster.com\u002Fstars\u002Fnotext\u002Fbeercss\u002Fbeercss)](https:\u002F\u002Fgithub.com\u002Fbeercss\u002Fbeercss\u002Fstargazers)\n\n### Stargazers over time\n[![Stargazers over time](https:\u002F\u002Fstarchart.cc\u002Fbeercss\u002Fbeercss.svg?variant=adaptive)](https:\u002F\u002Fstarchart.cc\u002Fbeercss\u002Fbeercss)\n","Beer CSS 是一个基于 Material Design 3 的 CSS 框架，旨在帮助开发者快速构建美观的用户界面。其核心功能包括提供丰富的预定义样式和组件，支持语义化 HTML，并且具有极小的文件体积（Brotli 压缩后仅 14.4KB），便于高效加载。该项目采用 Vue 技术栈开发，遵循 MIT 开源许可协议，适合需要快速搭建现代化 Web 应用或页面的场景使用，特别适用于追求设计一致性和开发效率的团队和个人。",2,"2026-06-11 03:19:44","top_language"]