{"id":14967706,"url":"https://github.com/changgeee/bit-css","last_synced_at":"2025-10-25T21:31:48.004Z","repository":{"id":143858161,"uuid":"288079935","full_name":"changgeee/bit-css","owner":"changgeee","description":"用原子类赋予元素属性，减少甚至不写css","archived":false,"fork":false,"pushed_at":"2021-10-29T05:29:20.000Z","size":404,"stargazers_count":18,"open_issues_count":1,"forks_count":2,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-01-31T10:36:10.955Z","etag":null,"topics":["css","flex","jade","less","nocss","pug","without-css"],"latest_commit_sha":null,"homepage":"","language":"Less","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/changgeee.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":"2020-08-17T04:03:35.000Z","updated_at":"2024-09-09T08:19:19.000Z","dependencies_parsed_at":null,"dependency_job_id":"701f3611-0e7b-4ff9-af51-d982e8a45440","html_url":"https://github.com/changgeee/bit-css","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/changgeee%2Fbit-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changgeee%2Fbit-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changgeee%2Fbit-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/changgeee%2Fbit-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/changgeee","download_url":"https://codeload.github.com/changgeee/bit-css/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238212407,"owners_count":19434955,"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":["css","flex","jade","less","nocss","pug","without-css"],"created_at":"2024-09-24T13:38:29.440Z","updated_at":"2025-10-25T21:31:42.714Z","avatar_url":"https://github.com/changgeee.png","language":"Less","funding_links":[],"categories":[],"sub_categories":[],"readme":"# bit-css\n\n## Features\n- 对常用css属性进行枚举，通过添加class的方式为元素赋予css属性，减少大部分css属性的编写；\n- 内置了antDesign调色板（https://ant.design/docs/spec/colors），更方便的调试和配色；\n- 支持less变量覆盖的方式自定义尺寸范围;\n- 支持pc，h5,小程序，react-native，支持单位配置(px,Px,PX,em,rem,rpx等);\n- 与jade(pug)模板一起使用体验更加(https://github.com/pugjs/pug);\n\n## preview\n![image](https://raw.githubusercontent.com/changgeee/bit-css/master/example/assets/preview.png)\n\n## 快速体验\n- codepen(https://codepen.io/changgeee/pen/LYNZyxY)\n\n## 包含的属性(class)\n- width(.w-*)\n- height(.h-*)\n- padding(.p-* ,.pt-* ,.pr-* ,.pb-* ,.pl-* ,plr-* ,ptb-*)\n- margin(.m-* ,.mt-* ,.mr-* ,.mb-* ,.ml-* ,mlr-* ,mtb-*)\n- boder-width(.bd-* ,.bdt-* ,.bdr-* ,.bdb-* ,.bdl-*)\n- boder-style(.bd-solid,.bd-dashed,.bd-double)\n- border-radius(.radius-*)\n- 百分比宽高1-100(w-p* ,h-p*)\n- line-height(.lh-*)\n- position(.pst-absl ,.pst-rlt ,.pst-fx)\n- 定位上右下左(.t-* ,.r-* ,.b-* ,.l-* )\n- float(.fl-left,.fl-right)\n- box-sizing(.box-ct,.box-bd)\n- 垂直水平居中(.v,.h,.vh)\n- vertical-align (.vtal-md,.vtal-bt,.vtal-top)\n- display(.dspl-in,.dspl-inbl,.dspl-bl,.dspl-flex,.dspl-infl)\n- flex-wrap(.flex-wrap,.flex-nowrap)\n- justify-content(.jc-start,.jc-end,.jc-center,.jc-between,.jc-around)\n- align-items(.items-start,.items-end,items-center)\n- 水平滑动(.h-scroll)\n- overflow(.ovfl-hd,.ovfl-scroll)\n- overflow-x(ovfl-x-scroll,ovfl-x-hd)\n- overflow-y(ovfl-y-scroll,ovfl-y-hd)\n- color(color-*-*,参考调色板)\n- background(bg-*-*，,参考调色板)\n- border-color(bd-*-*，,参考调色板)\n- text-align(.text-center,.text-left,.text-right)\n- 单行省略(.text-el)\n- 多行省略，2-10(.text-el-*)\n- 折行(.word-wrap)\n- font-size(.fs-*)\n- font-weight(.fw-*)\n\n#### 支持配置的属性\n- https://github.com/changgeee/bit-css/blob/master/src/custom.less\n\n\n## install\n``` bash\n# npm package\nnpm i bit-css --save\n# github package\nnpm --registry https://npm.pkg.github.com  i -D @changgeee/bit-css\n```\n\n## usaga\n#### 与webpack一起使用\n``` less\n  // npm package\n  @import \"bit-css\";\n  // github package\n  @import \"@changgeee/bit-css\";\n  // 修改默认变量，ex:\n  @unit: rpx;\n```\n\u003e vue3 需在vue.config.js中加入如下配置\n  ``` javascript\n    module.exports = {\n      css: {\n        loaderOptions: {\n          less: {\n            lessOptions: {\n              javascriptEnabled: true,\n            }\n          }\n        }\n      }\n    };\n  ```\n#### 单独使用\n``` html\n\u003c!-- dist 目录下含有 375px 尺寸的css压缩文件，如需修改配置，请使用less工具修改编译后手动引入 --\u003e\n\u003cscript src=\"bit-css/dist/bit-css.375.px.css\"\u003e\u003c/script\u003e\n\u003c!-- unpkg 线上地址 --\u003e\n\u003cscript src=\"https://unpkg.com/bit-css/dist/bit-css.375.px.css\"\u003e\u003c/script\u003e  \n```\n\n## css体积过大？\n- 推荐使用purgecss相关插件进行无效css剔除\n- 参考`./example`,使用前css文件73k，使用后0.7k\n- 以vue项目为例，使用purgecss-webpack-plugin(所有使用webpack构建项目同理)\n``` javascript\n// vue.config.js\nconst PurgecssPlugin = require('purgecss-webpack-plugin')\nconst glob = require('glob-all')\nconst path = require('path')\n\nmodule.exports = {\n  configureWebpack: {\n    plugins: [\n      new PurgecssPlugin({\n        paths: glob.sync([\n          path.join(__dirname, './src/index.html'),\n          path.join(__dirname, './**/*.vue'),\n          path.join(__dirname, './src/**/*.js')\n        ])\n      })\n    ]\n  }\n}\n\n```\n\n## License\n```License\nMIT License\n\nCopyright (c) 2020 changge\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanggeee%2Fbit-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchanggeee%2Fbit-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchanggeee%2Fbit-css/lists"}