{"id":16901444,"url":"https://github.com/daniil4udo/bulvar","last_synced_at":"2025-10-08T23:04:49.133Z","repository":{"id":37925791,"uuid":"397368063","full_name":"daniil4udo/bulvar","owner":"daniil4udo","description":" 🛣 Bulma, Buefy and Bulma Extensions rewritten  using CSS Variables","archived":false,"fork":false,"pushed_at":"2025-09-28T12:08:03.000Z","size":6254,"stargazers_count":55,"open_issues_count":12,"forks_count":3,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-09-28T13:07:59.897Z","etag":null,"topics":["buefy","bulma","css","css-properties","css-variables","sass","scss"],"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/daniil4udo.png","metadata":{"files":{"readme":".github/README.md","changelog":"CHANGELOG.md","contributing":".github/CONTRIBUTING.md","funding":".github/FUNDING.yml","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,"zenodo":null},"funding":{"github":"daniil4udo","patreon":"daniil4udo"}},"created_at":"2021-08-17T19:21:22.000Z","updated_at":"2025-07-05T08:45:48.000Z","dependencies_parsed_at":"2023-02-08T08:46:49.652Z","dependency_job_id":"1fb8ad86-7b9b-46d8-bf01-ee77b29cb31c","html_url":"https://github.com/daniil4udo/bulvar","commit_stats":{"total_commits":237,"total_committers":7,"mean_commits":"33.857142857142854","dds":"0.43881856540084385","last_synced_commit":"38bd0fff6f7881e67e132a9042248ca9cc539b21"},"previous_names":["dino4udo/bulma-buefy-css-variables"],"tags_count":29,"template":false,"template_full_name":null,"purl":"pkg:github/daniil4udo/bulvar","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniil4udo%2Fbulvar","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniil4udo%2Fbulvar/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniil4udo%2Fbulvar/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniil4udo%2Fbulvar/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/daniil4udo","download_url":"https://codeload.github.com/daniil4udo/bulvar/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/daniil4udo%2Fbulvar/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279000730,"owners_count":26082862,"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-10-08T02:00:06.501Z","response_time":56,"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":["buefy","bulma","css","css-properties","css-variables","sass","scss"],"created_at":"2024-10-13T17:59:44.078Z","updated_at":"2025-10-08T23:04:49.127Z","avatar_url":"https://github.com/daniil4udo.png","language":"CSS","funding_links":["https://github.com/sponsors/daniil4udo","https://patreon.com/daniil4udo"],"categories":[],"sub_categories":[],"readme":"\u003ch1 align='center'\u003e\u003csamp\u003e🛣 Bulvar\u003c/samp\u003e\u003c/h1\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/daniil4udo/bulvar/\" target=\"_blank\" rel=\"noopener noreferrer\"\u003e\n    \u003cimg width=\"99\" src=\"./bulvar.svg\" alt=\"Bulvar logo\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n\u003ch3 align='center'\u003e\n \u003cstrong\u003eBulvar it is\u003c/strong\u003e \u003ca href=\"https://bulma.io\"\u003eBulma\u003c/a\u003e and \u003ca href=\"https://buefy.org\"\u003eBuefy\u003c/a\u003e on steroids using CSS variables\n\u003c/h3\u003e\n\n\u003cbr\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@bulvar/bulma\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@bulvar/bulma.svg?logo=npm\" alt=\"npm package\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/jgthms/bulma/\"\u003e\u003cimg src=\"https://img.shields.io/github/v/release/jgthms/bulma?logo=Bulma\" alt=\"npm package\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/buefy/buefy/releases\"\u003e\u003cimg src=\"https://img.shields.io/github/v/release/buefy/buefy?logo=buefy\u0026color=7957d5\u0026labelColor=lightgrey\" /\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/daniil4udo/bulvar/actions/workflows/npm-publish.yml\"\u003e\u003cimg src=\"https://github.com/daniil4udo/bulvar/actions/workflows/npm-publish.yml/badge.svg?branch=master\" alt=\"build status\"\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cbr/\u003e\n\n-   ⚡️ Runtime variables change\n-   🛠️ Rich Features - includes Bulma, Buefy CSS and Bulma extensions\n-   💡 Root and Local variables scoping\n-   📦 CSS minifier with structural optimizations\n\n## 💙 SPECIAL SPONSOR\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.democrance.com\" target=\"_blank\"\u003e\n    \u003cimg width=\"260px\" src=\"https://www.democrance.com/wp-content/uploads/2021/11/democrance_new_logo_1200dpi.png\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## 🚀 QUICK INSTALL\n\nBulvar is constantly in development! Try it out now:\n\n### For Bulma only\n\nInstall using \u003cstrong\u003ePNPM\u003c/strong\u003e\n\n```bash\npnpm add @bulvar/bulma\n```\n\nInstall using \u003cstrong\u003eNPM\u003c/strong\u003e\n\n```bash\nnpm install @bulvar/bulma\n```\n\nInstall using \u003cstrong\u003eYarn\u003c/strong\u003e\n\n```bash\nyarn add @bulvar/bulma\n```\n\n### For Buefy\n\nInstall using NPM.\n\nNOTE: If you install Buefy, Bulma is installed as well as dependency.\n\nInstall using \u003cstrong\u003ePNPM\u003c/strong\u003e\n\n```bash\npnpm add @bulvar/buefy\n```\n\nInstall using \u003cstrong\u003eNPM\u003c/strong\u003e\n\n```bash\nnpm install @bulvar/buefy\n```\n\nInstall using \u003cstrong\u003eYarn\u003c/strong\u003e\n\n```bash\nyarn add @bulvar/buefy\n```\n\n## 🔩 IMPORT\n\nBuild includes (for both Bulma \u0026 Buefy)\n\n-   Standard CSS file `bulma.css` or `buefy.css`\n-   Standard minified CSS file `bulma.min.css` and `buefy.min.css`\n-   RTL CSS file `bulma-rtl.css` and `buefy-rtl.css`\n-   Minified RTL CSS file `bulma-rtl.min.css` and `buefy-rtl.min.css`\n\nAfter installation, you can import any from above CSS file into your project using this snippet:\n\n```css\n@use 'sass:meta';\n\n@include meta.load-css('@bulvar/bulma/css/bulma.css');\n```\n\nor\n\n```css\n@use 'sass:meta';\n\n@include meta.load-css('@bulvar/bulma/css/buefy.css');\n```\n\n## 🤔 WHY Bulvar?\n\nBulvar is a monorepo with all Bulma-derived packages rewritten with CSS Variables and new `@use` and `@forward` features.\n\nCurrently Includes :\n\n-   [Bulma](https://bulma.io) itself (duh) as `@bulvar/bulma`\n-   [Buefy](https://buefy.org) (SCSS only) as `@bulvar/buefy`\n-   [Bulma Extentions](https://bulma.io/extensions/) (still WIP) as `@bulvar/bulma-extentions`\n\n## 🧪 WHAT HAS BEEN CHANGED\n\n-   CSS Vars compatible! Woohoo!\n-   Real modularity! Drop deprecated `@import`. Use `@foward` and `@use` (read more [HERE](https://css-tricks.com/introducing-sass-modules))\n-   Always using latest Dart(⚠️ make sure you are using Dart version of SASS in your project too) Sass instead of deprecated node-sass\n-   Added namespacing. No need to worry about variables overwrite\n-   Added flag to be able to exports SASS variables using `export` for JS\n-   Added secondary color\n-   Added flexbox gap helper classes\n-   Added color-scheme support\n-   Added cross-browser support for placeholder opacity\n-   Custom `divide()` function replaced with SASS `math.div()`\n-   Custom `power()` function replaced with SASS `math.pow()`\n-   Added link pseudo selectors\n\n## 🚀 CUSTOMIZATION TIPS\n\nUsing `@use` instead of `@import` itself makes compiling faster.\n\nIf you want to save some space you could overwrite helper lists with empty lists during the import like:\n\n```sass\n@use \"path/to/bulma\" with (\n  $flex-direction-values: (),\n  $flex-wrap-values: (),\n  $justify-content-values: (),\n  $align-content-values: (),\n  $align-items-values: (),\n  $align-self-values: (),\n  $flex-operators:  (),\n  $flex-gap-values: (),\n)\n```\n\nbulma.sass holds all `!default` variables, hence if you need all Bulma elements, pass all your variables directly there\n\n```sass\n@use 'bulma.sass' with (\n  $radius-rounded: 99px,\n  $button-color: red,\n  $button-family: 'Helvetica',\n)\n@use 'themes/light.sass'\n```\n\nNOTE: You'll have to import `light.sass` or `dark.sass` from themes for the CSS Variables Bulma functioning properly.\n\n## 🧩 MODULARITY\n\nNow to import only needed elements instead of entire Bulma became much easy due to \"real\" modularity.\n\nThanks to `@use` and `@forward`, no need to import top level (global) variables in order to import just few needed elements, just import whatever you need.\n\nFor example if you need only `buttons.sass` in your project, and need to overwrite few variables:\n\n```sass\n// In order to customize global variables\n// Not required, unless you want to modify global variables from utils\n@use 'themes/light.sass' with ($radius-rounded: 99px)\n\n// Customize local variables in the module with !default\n@use 'buttons.sass' with (\n  $button-color: red,\n  $button-family: 'Helvetica',\n)\n```\n\nNote that in the example above, when using `theme/light` you can modify all global variables.\n\n## ⚙️ HELPERS\n\nThere were bunch of improvements in helpers utility classes\n\n-   `is-radiusless` is extended\n-   Added `is-radiusless-top`\n-   Added `is-radiusless-bottom`\n-   Added `is-radiusless-{top-left, top-right, bottom-right, bottom-left}`\n-   Added `is-borderless` is extended\n-   Added `is-borderless-top`\n-   Added `is-borderless-bottom`\n-   Added `is-{top-left, top-right, bottom-right, bottom-left}`\n\n## ⚠️ CSS ONLY\n\nIMPORTANT: This packages is CSS ONLY!\n\nIf you need Buefy Vue components, but you wan to use CSS variable in your project, you'll have to install both `buefy` and `@bulvar/buefy`\n\nNOTE: If you need Buefy styles, do not import Bulma, it already includes it in correct order.\n\n## ⚠️ CSS VARIABLES DRAWBACKS\n\nCSS Variables named after SASS [Bulma variables](https://bulma.io/documentation/overview/variables/)\n\nEach main color in `$colors` and shade in `$shades` has corresponding\n\n`--#{$name}-h` - stands for color \u003ci\u003ehue\u003c/i\u003e\n`--#{$name}-s` - stands for color \u003ci\u003esaturation\u003c/i\u003e\n`--#{$name}-l` - stands for color \u003ci\u003elightness\u003c/i\u003e\n`--#{$name}-a` - stands for color \u003ci\u003ealpha\u003c/i\u003e\n\n### Modify Opacity\n\nI.e. to add opacity to the primary color, you'll have to\n\n```css\n--primary-a: 0.5;\n```\n\nor\n\n```css\n--primary-a: calc(var(--primary-a) - var(--some-other-value));\n```\n\n### Modify Lightness and Darkness\n\nSame applies for lightness. Instead of using sass lightness function (which you cannot with css variables), just modify `--primary-l` value.\n\nTome make color lighter increase (add) value to the `--primary-l`, to make it darker, decrease (subtract) accordingly.\n\n### Modify Invert Colors\n\nBy default, if color's luminance less then 0.55, then invert color will be `rgba(#000, 0.7)` otherwise `white`.\n\nYou can change those colors now by overwriting `$invert-dark-colors` \u0026 `$invert-light-colors`\n\n### Proper color change in runtime\n\nBest way to change main colors (primary, info etc.) is to change their coresponding `--#{$name}-h` (hue), `--#{$name}-s` (saturation),\n`--#{$name}-l` (lightness) and `--#{$name}-a` (alpha aka opacity)\n\n### Scoping\n\nOne of the SASS variable `$at-root` indicates where CSS variable going to be registered.\n\nBy default it sets to `true`, and results into\n\n```css\n:root {\n\t--footer-background-color: SOME_COLOR;\n\t--footer-padding: SOME_PADDING;\n}\n```\n\nIn case you need more strict scoping, you can set it to `false`, wich, in case of footer component, will trnasform into:\n\n```css\n.footer {\n\t--footer-background-color: SOME_COLOR;\n\t--footer-padding: SOME_PADDING;\n}\n```\n\n## 🛳 EXPORTS\n\nIf you are using style modules SASS variable in you JS files, you can set `$exports` to true, which will generate\n\n```sass\n:export {\n  variableName: VALUE\n}\n```\n\nNote that all SASS variable will be camelcased.\n\n## 📢 VERSIONING\n\nVersion will follow **v0.Y.Z**, where:\n\n-   **Y**: Major (breaking changes)\n-   **Z**: Minor or patch\n\nStarting from version 1.Y.Z we going to deprecate `@import` in favour of `@use` and `@forward`\n\n## 💻 BROWSER SUPPORT\n\nBulma \u0026 Buefy uses [autoprefixer](https://github.com/postcss/autoprefixer) to make (most) Flexbox features compatible with earlier browser versions.\n\nAccording to [Can I use](https://caniuse.com/css-variables), Bulma is compatible with **recent** versions of:\n\n-   Chrome\n-   Edge\n-   Firefox\n-   Opera\n-   Safari\n\nInternet Explorer is not supported due to the use of css variables.\n\nAlthough you can use polyfill.\n\n## 📖 COPYRIGHT AND LICENSE ![Github](https://img.shields.io/github/license/daniil4udo/bulvar?logo=Github)\n\nCode copyright 2022 Daniil Chumachenko. Code released under [the MIT license](https://github.com/daniil4udo/bulvar/blob/master/LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniil4udo%2Fbulvar","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdaniil4udo%2Fbulvar","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdaniil4udo%2Fbulvar/lists"}