{"id":13408983,"url":"https://github.com/Wikiki/bulma-ribbon","last_synced_at":"2025-03-14T14:30:24.227Z","repository":{"id":23148883,"uuid":"98280264","full_name":"Wikiki/bulma-ribbon","owner":"Wikiki","description":"Bulma's extension to show a ribbon on boxes","archived":false,"fork":false,"pushed_at":"2024-03-23T04:48:52.000Z","size":2391,"stargazers_count":54,"open_issues_count":22,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-04-15T08:09:38.674Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/Wikiki.png","metadata":{"files":{"readme":"README.md","changelog":"Changelog.md","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":"2017-07-25T07:57:04.000Z","updated_at":"2024-05-15T16:03:02.038Z","dependencies_parsed_at":"2024-05-15T16:13:25.514Z","dependency_job_id":null,"html_url":"https://github.com/Wikiki/bulma-ribbon","commit_stats":{"total_commits":78,"total_committers":2,"mean_commits":39.0,"dds":"0.012820512820512775","last_synced_commit":"1352e8175a12f5fd5c41d6efba4c8904e36107f8"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wikiki%2Fbulma-ribbon","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wikiki%2Fbulma-ribbon/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wikiki%2Fbulma-ribbon/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Wikiki%2Fbulma-ribbon/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Wikiki","download_url":"https://codeload.github.com/Wikiki/bulma-ribbon/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243515569,"owners_count":20303258,"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":[],"created_at":"2024-07-30T20:00:57.079Z","updated_at":"2025-03-14T14:30:23.707Z","avatar_url":"https://github.com/Wikiki.png","language":"JavaScript","funding_links":[],"categories":["Extensions"],"sub_categories":["Courses"],"readme":"# :exclamation::exclamation::exclamation: Looking for new Maintainer :exclamation::exclamation::exclamation:\nAs you may have noticed, this package has not been updated for some time. I'm sorry, but unfortunately I'm not able to continue to maintain it, so I'm looking for someone who would like to take it over and maintain it. If you are interested, please contact me at wikiki@protonmail.com to discuss how to proceed.\n\n# bulma-ribbon\nBulma's extension to show a ribbon on boxes\n(find all my bulma's extensions [here](https://wikiki.github.io/))\n\n[![npm](https://img.shields.io/npm/v/bulma-ribbon.svg)](https://www.npmjs.com/package/bulma-ribbon)\n[![npm](https://img.shields.io/npm/dm/bulma-ribbon.svg)](https://www.npmjs.com/package/bulma-ribbon)\n[![Build Status](https://travis-ci.org/Wikiki/bulma-ribbon.svg?branch=master)](https://travis-ci.org/Wikiki/bulma-ribbon)\n\n\n![Ribbon Element](https://img4.hostingpics.net/pics/737717ScreenShot20170810at095724.png)\n\nUsage\n---\n```html\n\u003cdiv class=\"columns is-multiline\"\u003e\n  \u003cdiv class=\"column\"\u003e\n    \u003cdiv class=\"box has-ribbon\"\u003e\n      \u003cdiv class=\"ribbon\"\u003eDefault\u003c/div\u003e\n      Box content\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column\"\u003e\n\n    \u003cdiv class=\"box has-ribbon\"\u003e\n      \u003cdiv class=\"ribbon is-primary\"\u003ePrimary\u003c/div\u003e\n      Box content\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column\"\u003e\n    \u003cdiv class=\"box has-ribbon\"\u003e\n      \u003cdiv class=\"ribbon is-warning\"\u003eWarning\u003c/div\u003e\n      Box content\n    \u003c/div\u003e\n  \u003c/div\u003e\n  \u003cdiv class=\"column\"\u003e\n    \u003cdiv class=\"box has-ribbon\"\u003e\n      \u003cdiv class=\"ribbon is-danger\"\u003eDanger\u003c/div\u003e\n      Box content\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"columns is-multiline\"\u003e\n  \u003cdiv class=\"column\"\u003e\n  \u003cdiv class=\"box has-ribbon is-small\"\u003e\n    \u003cdiv class=\"ribbon is-small is-primary\"\u003eSmall ribbon\u003c/div\u003e\n    Box content\n  \u003c/div\u003e\n\u003c/div\u003e\n\n  \u003cdiv class=\"column\"\u003e\n    \u003cdiv class=\"box has-ribbon is-small\"\u003e\n      \u003cdiv class=\"ribbon is-medium is-primary\"\u003eMedium ribbon\u003c/div\u003e\n      Box content\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"column\"\u003e\n    \u003cdiv class=\"box has-ribbon is-small\"\u003e\n      \u003cdiv class=\"ribbon is-large is-primary\"\u003eLarge ribbon\u003c/div\u003e\n      Box content\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n\u003cdiv class=\"columns is-multiline\"\u003e\n  \u003cdiv class=\"column\"\u003e\n    \u003cdiv class=\"box has-ribbon-left is-small\"\u003e\n      \u003cdiv class=\"ribbon is-small is-primary\"\u003eLeft ribbon\u003c/div\u003e\n      Box content\n    \u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003cdiv class=\"column\"\u003e\n    \u003cdiv class=\"box has-ribbon-bottom is-small\"\u003e\n      \u003cdiv class=\"ribbon is-small is-primary\"\u003eBottom ribbon\u003c/div\u003e\n      Box content\n    \u003c/div\u003e\n  \u003c/div\u003e\n\u003c/div\u003e\n```\n\nModifiers\n---\nYou can use standards color modifiers and you can change the ribbon's position using the following modifiers in replacement of has-ribbon class:\n- has-ribbon-left\n- has-ribbon-bottom\n\nYou can use the ```is-outlined``` modifier to remove background and just keep the border of the ribbon\n\nVariables\n---\nThis extension uses the following variables\n\nName | Description | Default value    \n-----|-------------|---------------\n$ribbon-color | Default ribbon text color | $grey-darker\n$ribbon-background-color | Default background color of the ribbon | $white\n$ribbon-border | Ribbon default border color | .1rem solid $grey-lighter\n\nDemo\n---\nYou can find a demo [here](https://codepen.io/wikiki/pen/XagrqJ)\n\nIntegration\n---\n- Clone the [bulma repo](https://github.com/jgthms/bulma)\n- Under the `sass` folder, create a new folder called `extensions`\n- In this new folder, create a new file `ribbon.sass`\n- Copy the code form the `bulma-ribbon repo`'s [ribbon.sass](https://github.com/Wikiki/bulma-ribbon/blob/master/ribbon.sass) file into your new file\n- In the same folder create a new file `_all.sass` (this is not required, but will help when you add more extensions)\n- In this file add this code:\n```\n@charset \"utf-8\"\n\n@import \"ribbon.sass\"\n```\nAt the end of the `bulma.sass` file, add this line: `@import \"sass/extensions/_all\"`\n\nNow, you can just build the bulma project with `npm run build`, and the output will be available in the `css folder`.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWikiki%2Fbulma-ribbon","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FWikiki%2Fbulma-ribbon","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FWikiki%2Fbulma-ribbon/lists"}