{"id":15857193,"url":"https://github.com/killshot13/mybulma","last_synced_at":"2026-01-08T20:48:29.834Z","repository":{"id":42663526,"uuid":"344926850","full_name":"killshot13/mybulma","owner":"killshot13","description":"Templated SASS variables for the Bulma CSS framework. Use the `node-sass` package to render the Bulma defaults or apply your own branding for extra flair.","archived":false,"fork":false,"pushed_at":"2023-03-05T22:07:43.000Z","size":249,"stargazers_count":0,"open_issues_count":4,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-02-07T12:46:41.407Z","etag":null,"topics":["bulma","bulma-template","css","node-sass","sass","scss","stylesheet","template"],"latest_commit_sha":null,"homepage":"https://killshot13.github.io/mybulma/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/killshot13.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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":"2021-03-05T20:30:31.000Z","updated_at":"2021-06-12T21:32:33.000Z","dependencies_parsed_at":"2024-12-14T12:24:58.161Z","dependency_job_id":"67b5b1c4-5b43-4c6c-a932-f8532baf7817","html_url":"https://github.com/killshot13/mybulma","commit_stats":{"total_commits":8,"total_committers":2,"mean_commits":4.0,"dds":0.125,"last_synced_commit":"1d48efd6a52e54d62666eb04d29fe4ccd1efb959"},"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/killshot13%2Fmybulma","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/killshot13%2Fmybulma/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/killshot13%2Fmybulma/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/killshot13%2Fmybulma/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/killshot13","download_url":"https://codeload.github.com/killshot13/mybulma/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246701200,"owners_count":20820015,"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":["bulma","bulma-template","css","node-sass","sass","scss","stylesheet","template"],"created_at":"2024-10-05T20:21:17.273Z","updated_at":"2026-01-08T20:48:29.797Z","avatar_url":"https://github.com/killshot13.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mybulma-template\n\n\u003ca href=\"https://bulma.io\"\u003e\n  \u003cimg\n    src=\"https://bulma.io/images/made-with-bulma.png\"\n    alt=\"Made with Bulma\"\n    width=\"128\"\n    height=\"24\"\u003e\n\u003c/a\u003e\n\n## Templated SASS variables for the Bulma CSS framework.\n\n### Either use the default `scss` variables Bulma provides along with `node-sass` or apply your own branding for extra flair.\n\n---\n\nYou only need 2 packages to customize Bulma: `node-sass` and `bulma` itself.\n\n\u003e Start by installing the dependencies--\n\n```bash\nnpm install\n```\n\nTo build a CSS file from a Sass file, we can use node scripts. In package.json, we have added the following:\n\n```json\n\"scripts\": {\n  \"css-build\": \"node-sass --omit-source-map-url sass/mystyles.scss css/mystyles.css\",\n  \"css-watch\": \"npm run css-build -- --watch\",\n  \"start\": \"npm run css-watch\"\n}\n```\n\n* `css-build` takes `sass/mystyles.scss` as an input, and outputs `css/mystyles.css`, while omitting the source map\n* `css-watch` builds the CSS and watches for changes\n* `start` is simply a shortcut for `css-watch`\n\nTo test it out, go in your terminal and run the following command:\n\n```bash\nnpm run css-build\n```\n\nIf set up correctly, you will see the following message:\n\n```bash\nRendering Complete, saving .css file...\nWrote CSS to /path/to/mybulma/css/mystyles.css\n```\n\nReload the page and it should be styled with Bulma's default styles.\n\n\u003e Replace the content of the `mystyles.scss` file with the following:\n\n```scss\n@charset \"utf-8\";\n\n// Import a Google Font\n@import url('https://fonts.googleapis.com/css?family=Nunito:400,700');\n\n// Set your brand colors\n$purple: #8A4D76;\n$pink: #FA7C91;\n$brown: #757763;\n$beige-light: #D0D1CD;\n$beige-lighter: #EFF0EB;\n\n// Update Bulma's global variables\n$family-sans-serif: \"Nunito\", sans-serif;\n$grey-dark: $brown;\n$grey-light: $beige-light;\n$primary: $purple;\n$link: $pink;\n$widescreen-enabled: false;\n$fullhd-enabled: false;\n\n// Update some of Bulma's component variables\n$body-background-color: $beige-lighter;\n$control-border-width: 2px;\n$input-border-color: transparent;\n$input-shadow: none;\n\n// Import only what you need from Bulma\n@import \"../node_modules/bulma/sass/utilities/_all.sass\";\n@import \"../node_modules/bulma/sass/base/_all.sass\";\n@import \"../node_modules/bulma/sass/elements/button.sass\";\n@import \"../node_modules/bulma/sass/elements/container.sass\";\n@import \"../node_modules/bulma/sass/elements/title.sass\";\n@import \"../node_modules/bulma/sass/form/_all.sass\";\n@import \"../node_modules/bulma/sass/components/navbar.sass\";\n@import \"../node_modules/bulma/sass/layout/hero.sass\";\n@import \"../node_modules/bulma/sass/layout/section.sass\";\n```\n\nSince you are watching for changes, simply save the file to see the result, which should represent your changes.\n\n\u003e Voila!\n\nThis page is [Open Source](https://creativecommons.org/licenses/by-nc-sa/4.0/) and derived from Bulma's [comprehensive version](https://bulma.io/documentation/customize/with-node-sass/) of this template.\n\nAll credit for the creation of Bulma goes to [Jeremy Thomas](https://twitter.com/jgthms), and all source code is licensed [MIT](https://opensource.org/licenses/mit-license.php).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkillshot13%2Fmybulma","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkillshot13%2Fmybulma","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkillshot13%2Fmybulma/lists"}