{"id":15162033,"url":"https://github.com/thiagomajesk/bootilities","last_synced_at":"2025-09-30T15:31:12.582Z","repository":{"id":51807752,"uuid":"313797519","full_name":"thiagomajesk/bootilities","owner":"thiagomajesk","description":"A set of utilities generated with Bootstrap 5 to mimic Tailwind CSS functional paradigm","archived":true,"fork":false,"pushed_at":"2021-06-08T23:48:45.000Z","size":340,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-30T04:51:31.243Z","etag":null,"topics":["atomic-css","bootstrap","css","framework-css","scss","tailwind-css","tailwindcss","utilities-css","utility-classes","utility-css"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thiagomajesk.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}},"created_at":"2020-11-18T02:11:09.000Z","updated_at":"2023-01-28T06:06:22.000Z","dependencies_parsed_at":"2022-08-22T21:31:19.230Z","dependency_job_id":null,"html_url":"https://github.com/thiagomajesk/bootilities","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/thiagomajesk/bootilities","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagomajesk%2Fbootilities","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagomajesk%2Fbootilities/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagomajesk%2Fbootilities/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagomajesk%2Fbootilities/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thiagomajesk","download_url":"https://codeload.github.com/thiagomajesk/bootilities/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thiagomajesk%2Fbootilities/sbom","scorecard":{"id":880828,"data":{"date":"2025-08-11","repo":{"name":"github.com/thiagomajesk/bootilities","commit":"47009ff63eab8d4af1e6215e450d866ea21bf16d"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.7,"checks":[{"name":"Maintained","score":0,"reason":"project is archived","details":["Warn: Repository is archived."],"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Code-Review","score":0,"reason":"Found 0/20 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: no topLevel permission defined: .github/workflows/main.yml:1","Info: no jobLevel write permissions found"],"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/thiagomajesk/bootilities/main.yml/master?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/main.yml:12: update your workflow using https://app.stepsecurity.io/secureworkflow/thiagomajesk/bootilities/main.yml/master?enable=pin","Info:   0 out of   2 GitHub-owned GitHubAction dependencies pinned"],"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: GNU Affero General Public License v3.0: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":2,"reason":"8 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-g4rg-993r-mgx7"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-24T08:07:46.328Z","repository_id":51807752,"created_at":"2025-08-24T08:07:46.328Z","updated_at":"2025-08-24T08:07:46.328Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":277651416,"owners_count":25854100,"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","status":"online","status_checked_at":"2025-09-30T02:00:09.208Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["atomic-css","bootstrap","css","framework-css","scss","tailwind-css","tailwindcss","utilities-css","utility-classes","utility-css"],"created_at":"2024-09-27T01:03:53.249Z","updated_at":"2025-09-30T15:31:12.254Z","avatar_url":"https://github.com/thiagomajesk.png","language":"SCSS","readme":"# 🎿 Bootilities\n\nA set of utilities generated with Bootstrap 5 to mimic Tailwind CSS functional paradigm.\n\n## Getting Started\n\n### Installation\n\n#### From NPM\n\n```\nnpm install bootilities --save\n```\n\n#### Directly from GitHub:\n\n```\nnpm install thiagomajesk/bootilities#master\n```\n\n### Usage\n\nSince we have refactored the code to support Sass modules, you must call the library with `@use` instead of `@import`.\n\n```scss\n@use \"bootilities\";\n```\n\nTo use our utilities simply merge the available variables from the `bootilities` module with Bootstrap's `$utilities` map. You can disabled, merge or rewrite utilities as you see fit, take a look at our [`bootilities-utilities.scss`](https://github.com/thiagomajesk/bootilities/blob/master/scss/bootilities-utilities.scss) for usage examples.\n\n```scss\n@use \"bootilities\";\n\n// Add only the background color utilities to the bundle\n$utilities: map-merge($utilities, bootilities.$background-color-utilities);\n```\n\nYou can also customize our default configurations using `with`. Take a look at our [`_config.scss`](https://github.com/thiagomajesk/bootilities/blob/master/scss/_config.scss) file to see the variables marked with `!default`.\n\n```scss\n@use \"bootilities\" with ($colors: (\"magenta-500\": \"#ff00ff\"));\n```\n\n\u003e Take a look at our [`/variables`](https://github.com/thiagomajesk/bootilities/tree/master/scss/variables) directory to see the variables exposed by the module - you can also `@use` those files to access the variables you want to use. Alternatively, you can run `@debug module-variables(\"bootilities\")` to see all the default variables exposed by the bootilities module.\n\n### A note on PurgeCSS\n\nOne of the main disadvantages of any framework that generates CSS dynamically is that your output files can grow quite large if you don't take proper care. Even though the library is segmented into logical groups that could be imported individually, I heavily recommend that you use [PurgeCSS](https://purgecss.com) from the start - even for development. This can greatly reduce the size of the output file and provide a better experience while developing. \n\nI'm also looking at providing options and switches to conditionally generate parts of the utilities to better improve the end-user experience in the future.\n\n## Disclaimer\n\n\u003cdetails\u003e\n\n\u003csummary\u003e\nI ❤ Tailwind CSS as much as the next guy, so much that I decided to use Bootstrap's brand new utility API to port some of that magic over...\n\u003c/summary\u003e\n\n---\n\n### Bear with me\n\nI'm just a developer and the majority of my projects require quick iteration and for the most part, I don't have a designer at my disposal.\nThis means that, even though I like designing web pages, I don't have the time or patience to come up with a robust and consistent design/component system from scratch for every project I work on.\n\nTailwind CSS is awesome with its utility-first approach, which comes in handy when you need the freedom to work on custom designs.\nHowever, since it's a very thin abstraction layer over pure CSS styles, you are on your own - which is both good and bad depending on what you need.\nIn my case, I just want to work on some functionality and see things on the screen as soon as possible and Bootstrap has almost anything you might need out-of-the-box.\n\n### About components \u0026 abstractions\n\nAlthough you can extract your utilities into components to accommodate your application design requirements with Tailwind, with long-term applications, chances are you will eventually wind up in the same place: with a custom framework that has buttons, cards, tables, dropdowns, and so on, with the exception that **you** are the one that has to keep it consistent. It's a lot of work if you are not up for it.\n\n\u003e The recommended way to work with Tailwind is about abstracting your code into reusable components. But after trying this first I have to admit that for large projects it tends to get very repetitive very fast. That is unless you already have an established component system at your disposal of course - like Tailwind UI. Having tried that multiple times in different projects in the past, I feel that it's just an extra step that generates unwanted overhead in my projects. Also, consider this: Instead of waiting for patterns to emerge so you can then extract and refactor your code into components, you can start your project with the most common abstractions from the beginning. Besides that, if you don't find what you need or you need a super-specific component, you can just go ahead and create it with CSS as you normally would.\n\nBecause of this, I think Bootstrap is an excellent choice if you want a full-fledged framework to help you focus on delivering value as quickly as possible. Besides that, with Bootstrap 5 you have a new utility API at your disposal that will boost your productivity - just no leaving anything behind.\n\n### But TailwindCSS is awesome!\n\nYes, it is and Bootstrap is as well. It's not a dichotomy, two things **can** be true at once. I believe both tools were created by two of the most capable people I've ever known and are excellent at solving different problems. I've tried both approaches and saw where and when each one of those falls short for my use case, so here's my attempt to bridge that gap. I don't expect anybody to be convinced only by my words, try it and see for yourself.\n\n### Why didn't you implement Bootstrap in TailwindCSS?\n\nThis crossed my mind at one point and I think it could be a valid approach as well. But I was not up for the sheer amount of work that would go on creating and maintaining it. Bootstrap is a very mature and battle-tested framework, so the decision on what direction to go was made simpler by that fact. Also, I was catching myself importing Bootstrap components like dropdowns, modal, and popovers on my Tailwind projects more frequently than I'd care to admit just for the ease of it, so...\n\u003c/details\u003e\n  \n---\n\n## Notable differences\n\nThe utilities generated using the Bootstrap API have two main differences from the ones generated by TailwindCSS: \n\nThe first one is that Bootstrap in its current implementation still uses the same naming convention from previous versions. This means that generated utilities will have a suffix appended to the class name that represents the state variant, like: `mx-sm-2`, `mx-hover-2`, `mx-focus-2`, and `mx-print-2`. \n\nThe second one is that Bootstrap API needs to generate utilities with a prefix. Because of this, it's not possible to generate utilities like: `flex`, `block` in a consistent fashion.\n\n\u003e This is actually doable but you end up with something like `sm-flex` or `sm-block` because the suffix is absent. See this issue for more information on the topic: https://github.com/twbs/bootstrap/issues/32183.\n\nEven though this is not my preferred way to work and I do think that Tailwind did a much better job at naming its utilities, this lib does not aim to override the Bootstrap conventions completely (just yet). \n\n### Naming conventions \n\nReplicating 100% of Tailwind utilities under Bootstrap has some caveats to take into consideration: \n\n- The major one is that would be necessary to rewrite the current utility API to generate classes with the `state:name` convention.\n\n- The current convention does not stop at the level of utility classes, it's adopted framework-wide. Containers, columns, and components all share the same convention: `container-lg`, `col-lg`, `btn-sm`, etc.\n\n- Bootstrap still has some mad naming inconsistencies. While `text-md-start` takes effect starting on medium viewport size, `shadow-lg` and `btn-lg` are actually just size modifiers (like in Tailwind).\n\n### Compromises\n\nSo, taking all of this into consideration these are the guidelines I'm using to provide a better experience out of the box (all things considered):\n\n- Single-word utilities will retain the current prefix requirement, so `flex` in Tailwind would still be `d-flex` here. Most of the utilities have compound words, so this problem is greatly reduced.\n\n- No utility classes will be generated with size modifiers. Instead, we'll generate those classes with incremental modifiers like: `border-1`, `shadow-2`, and `rounded-3` (this rule prevents things like `border-sm-sm` from happening).\n\n- Usually, only utilities that change the page structure are useful in different screen sizes, so utilities that are less common to change in different viewports won't generate variants by default (But you'll still be able to enable those).\n\n- Whenever possible, we'll try to reduce the verbosity of class names, so instead of `justify-content-between` we'll just keep the nice `content-between` from TailwindCSS.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiagomajesk%2Fbootilities","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthiagomajesk%2Fbootilities","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthiagomajesk%2Fbootilities/lists"}