{"id":13565100,"url":"https://github.com/canonical/vanilla-framework","last_synced_at":"2026-01-29T08:12:58.537Z","repository":{"id":27720066,"uuid":"31207344","full_name":"canonical/vanilla-framework","owner":"canonical","description":"From community websites to web applications, this CSS framework will help you achieve a consistent look and feel.","archived":false,"fork":false,"pushed_at":"2026-01-12T06:57:40.000Z","size":14040,"stargazers_count":938,"open_issues_count":213,"forks_count":187,"subscribers_count":35,"default_branch":"main","last_synced_at":"2026-01-12T16:35:04.519Z","etag":null,"topics":["css","css-framework","hack","hacktoberfest","html","npm","npm-package","package","sass","vanilla-framework","web-and-design"],"latest_commit_sha":null,"homepage":"https://vanillaframework.io","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/canonical.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2015-02-23T12:34:16.000Z","updated_at":"2026-01-12T04:33:32.000Z","dependencies_parsed_at":"2024-03-18T11:48:28.949Z","dependency_job_id":"ed2066ae-4713-4866-b72e-2a0dafefa344","html_url":"https://github.com/canonical/vanilla-framework","commit_stats":{"total_commits":5049,"total_committers":80,"mean_commits":63.1125,"dds":0.8399683105565459,"last_synced_commit":"ec5615a96518c6081bb23259f8ba1c27ea5273d7"},"previous_names":["canonical-web-and-design/vanilla-framework","ubuntudesign/vanilla-framework"],"tags_count":292,"template":false,"template_full_name":null,"purl":"pkg:github/canonical/vanilla-framework","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canonical%2Fvanilla-framework","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canonical%2Fvanilla-framework/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canonical%2Fvanilla-framework/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canonical%2Fvanilla-framework/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/canonical","download_url":"https://codeload.github.com/canonical/vanilla-framework/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/canonical%2Fvanilla-framework/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28478004,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T06:30:42.265Z","status":"ssl_error","status_checked_at":"2026-01-16T06:30:16.248Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["css","css-framework","hack","hacktoberfest","html","npm","npm-package","package","sass","vanilla-framework","web-and-design"],"created_at":"2024-08-01T13:01:40.757Z","updated_at":"2026-01-29T08:12:58.532Z","avatar_url":"https://github.com/canonical.png","language":"HTML","readme":"# ![vanilla](https://assets.ubuntu.com/v1/70041419-vanilla-framework.png?w=35 'Vanilla') Vanilla Framework\n\n[![npm version](https://badge.fury.io/js/vanilla-framework.svg)](http://badge.fury.io/js/vanilla-framework)\n[![Downloads](http://img.shields.io/npm/dm/vanilla-framework.svg)](https://www.npmjs.com/package/vanilla-framework)\n[![Chat in #vanilla:ubuntu.com on Matrix](https://img.shields.io/badge/chat-%23vanilla:ubuntu.com-blue.svg)](https://matrix.to/#/#vanilla:ubuntu.com)\n[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io)\n\nVanilla Framework is an extensible CSS framework, built using [Sass](http://sass-lang.com/) and is designed to be used either directly or by using themes to extend or supplement its patterns.\n\n[Documentation](https://vanillaframework.io/docs) |\n\n## Table of contents\n\n- [Using Vanilla](#using-vanilla)\n  - [Hotlinking](#hotlinking)\n  - [Including Vanilla in your project via NPM](#including-vanilla-in-your-project-via-npm)\n- [Developing Vanilla](#developing-vanilla)\n- [Community](#community)\n\n## Using Vanilla\n\n### Hotlinking\n\nYou can link to the latest build to add directly into your markup like so, by replacing the x values with the [version number you wish to link](https://github.com/canonical/vanilla-framework/releases).\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://assets.ubuntu.com/v1/vanilla_framework_version_x_x_x_min.css\" /\u003e\n```\n\n### Including Vanilla in your project via NPM or yarn\n\nTo get set up with Sass, add the `sass` and `vanilla-framework` packages to your project dependencies:\n\n```bash\nyarn add sass vanilla-framework\n```\n\nIn the script that builds the CSS in your `package.json`, you should include the path to `node_modules` when looking for `@imports`. In this example, we have called the build script `\"build-css\"`:\n\n```\n\"build-css\": \"sass -w --load-path=node_modules src:dist --style=compressed\"\n```\n\nMake a folder `src/`, create a file inside called `style.scss` and import Vanilla:\n\n```sass\n// Import the theme\n@import 'vanilla-framework';\n@include vanilla;\n\n// Optionally override some settings\n$color-brand: #ffffff;\n\n// Add theme if applicable\n```\n\nIf you don't want the whole framework, you can just `@include` specific [parts](scss) - e.g. `@include vf-b-forms`.\n\nNow run `yarn build-css`, which will convert any Sass files in the `src/` folder to CSS in the `dist/` folder.\n\nTo watch for changes in your Sass files, add the following script to your `package.json`\n\n```\n\"watch-css\":  \"yarn build-css \u0026\u0026 sass --load-path=node_modules -w src:dist --style=compressed\"\n```\n\n## Developing Vanilla\n\nIf you're looking to contribute to the Vanilla project itself, [start here](/CONTRIBUTING.md).\n\n- [Code of conduct](/CONTRIBUTING.md#code-of-conduct)\n- [Reporting bugs and issues](/CONTRIBUTING.md#reporting-bugs-and-issues)\n- [Working with the Vanilla project](/CONTRIBUTING.md#working-with-the-vanilla-project)\n- [Pull requests](/CONTRIBUTING.md#pull-requests)\n- [Releasing Vanilla](/CONTRIBUTING.md#releasing-vanilla)\n\n## Community\n\nKeep up to date with all new developments and upcoming changes with Vanilla.\n\n- Read our latest blog posts at [Ubuntu Blog](https://blog.ubuntu.com/topics/design)\n- Stay in touch with us on [Matrix](https://matrix.to/#/#vanilla:ubuntu.com)\n\nCode licensed [LGPLv3](https://opensource.org/license/lgpl-3-0/) by [Canonical Ltd](http://www.canonical.com/)\n\nWith ♥ from Canonical\n","funding_links":[],"categories":["HTML","General Purpose"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanonical%2Fvanilla-framework","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcanonical%2Fvanilla-framework","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcanonical%2Fvanilla-framework/lists"}