{"id":15059311,"url":"https://github.com/visual-framework/vf-core","last_synced_at":"2026-02-06T21:03:16.017Z","repository":{"id":38051223,"uuid":"156368591","full_name":"visual-framework/vf-core","owner":"visual-framework","description":"A (primarily CSS) framework that targets needs of life science websites and services","archived":false,"fork":false,"pushed_at":"2025-04-04T03:26:18.000Z","size":69437,"stargazers_count":22,"open_issues_count":67,"forks_count":10,"subscribers_count":1,"default_branch":"develop","last_synced_at":"2025-04-06T07:05:48.141Z","etag":null,"topics":["component-library","design-system","embl","pattern-library","styleguide","visual-framework"],"latest_commit_sha":null,"homepage":"https://stable.visual-framework.dev/","language":"Nunjucks","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/visual-framework.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","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":"2018-11-06T10:47:26.000Z","updated_at":"2025-04-02T00:26:04.000Z","dependencies_parsed_at":"2024-05-23T00:23:45.485Z","dependency_job_id":"73113f35-63d2-45fd-9e2f-955d6c1a4087","html_url":"https://github.com/visual-framework/vf-core","commit_stats":{"total_commits":2397,"total_committers":20,"mean_commits":119.85,"dds":0.4810179390905298,"last_synced_commit":"8ad2672a63352355b99ba107e58d9ea9698885b8"},"previous_names":[],"tags_count":157,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visual-framework%2Fvf-core","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visual-framework%2Fvf-core/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visual-framework%2Fvf-core/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visual-framework%2Fvf-core/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/visual-framework","download_url":"https://codeload.github.com/visual-framework/vf-core/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247478324,"owners_count":20945266,"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":["component-library","design-system","embl","pattern-library","styleguide","visual-framework"],"created_at":"2024-09-24T22:41:04.445Z","updated_at":"2026-02-06T21:03:16.009Z","avatar_url":"https://github.com/visual-framework.png","language":"Nunjucks","readme":"[![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/EMBL/EMBL-Visual-Framework)\n\n\n**👋 Downloading or cloning this repo? 🛑**\n\nMost won't need to clone this repo. Do so if you only wish to [develop the architecture](https://stable.visual-framework.dev/developing/) of the Visual Framework core or contribute a global component, otherwise [use one of the boilerplates or install a component directly](https://stable.visual-framework.dev/).\n\n---\n\n# The Visual Framework Core (`vf-core`)\n\n[![npm version](https://badge.fury.io/js/%40visual-framework%2Fvf-core.svg)](https://badge.fury.io/js/%40visual-framework%2Fvf-core) [![Chat for support on Slack](https://img.shields.io/static/v1?label=chat\u0026message=Slack\u0026color=blue)](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ) [![This project is using Percy.io for visual regression testing.](https://percy.io/static/images/percy-badge.svg)](https://percy.io/EMBL/EMBL-Visual-Framework)\n\nIf you’re new to the Visual Framework system for life science websites: think of it as a Bootstrap but made for flexibility. The Visual Framework is highly modular for compatibility allowing for non-breaking use alongside other frameworks, like Bootstrap. So you can use components made elsewhere without breaking your site. [Learn more about the Visual Framework system here](https://stable.visual-framework.dev/).\n\nThis repo, for the \"VF Core\", is one part of that effort and — as the name suggests — is at the heart of all Visual Framework-based tools. The VF Core allows for extendable components and builds CSS, JS and other image-style assets.\n\n\u003cimg src=\"README/intro_image.jpg\" alt=\"Image of columns representing a metaphor for the VF Core\" width=\"600\" /\u003e\n\n*Much like an arch-based design of a cistern, the `vf-core` supports complex systems with a flexible space inside. (For those that didn’t guess it, this is a photo of the Basilica Cistern; [Image by Clint on Flickr](https://www.flickr.com/photos/amberandclint/4086669134/in/photolist-7e8fmE-nGAs7L-5ANpRm-bbDtk2-8fW4a-eZi5N3-5RRtw5-3KvouK-6K6fLC-48S7Tv-m1BVz9-77ZEvU-58GPp8-6ygYZw-5ANs87-5ANp2Q-48S9K6-gr8bps-evst93-7Vyo1U-evpjTg-e1EWNm-dUwmxf-q4ZFUa-auYW6V-7fFJXo-bstDTF-euKd7K-e9LAh3-5zSVSn-evpkb8-dtp995-5k2ATs-aj5HWY-8jbFnQ-MGp6W-57mU2S-bAKj6C-djW5iW-HVYU44-buCcrw-e6JLkQ-djW4bp-7DHGCa-av2Auo-28gPqDR-ea68SD-48S8hT-btjZH8-48W95A/))*\n\nIn short: The VF Core is a base to build systems.\n\n\u003cimg src=\"README/diagram.svg\" alt=\"Schematic of VF Core\" /\u003e\n\n*Here’s that column metaphor translates as a schematic of relationships for VF Core.*\n\nThe `vf-core` is built with:\n\n- [Fractal](https://fractal.build/) for component structure\n- Node and Gulp; to:\n    - rollup JavaScript and handle assets\n    - allow custom Sass/CSS components to be added to local projects\n- [Dart Sass](https://github.com/sass/dart-sass)\n- [Yeoman](https://yeoman.io/) to make custom components interactively\n- [Yarn](https://yarnpkg.com/) to install components\n- [Nunjucks](https://mozilla.github.io/nunjucks/templating.html) for component templates\n- [Lerna](https://lerna.js.org/) to publish components to npm as a [mono-repo](https://www.toptal.com/front-end/guide-to-monorepos/)\n- Name-spacing for JavaScript and CSS; more on that in [the coding standards](https://stable.visual-framework.dev/developing/#guidelines)\n\n## Making use of the VF Core\n\n[Here's a guide with the most common approaches](https://stable.visual-framework.dev/building/).\n\n## FAQ\n\n[Here's a guide to the most common questions](https://stable.visual-framework.dev/#faq).\n\n## Have a problem?\n\nSee the [troubleshooting guide](https://stable.visual-framework.dev/troubleshooting).\n\n## Want to help develop?\n\nGreat. See the [development guide](https://stable.visual-framework.dev/developing/).\n\n---\n\n## Have opinions, ideas, concerns or want to get involved?\n\nThere are a few ways that we discuss and track ideas:\n\n- ⁉ General: [Chat us](https://join.slack.com/t/visual-framework/shared_invite/enQtNDAxNzY0NDg4NTY0LWFhMjEwNGY3ZTk3NWYxNWVjOWQ1ZWE4YjViZmY1YjBkMDQxMTNlNjQ0N2ZiMTQ1ZTZiMGM4NjU5Y2E0MjM3ZGQ) for general ideas and discussion\n- ⚙️ Technical: [GitHub issues here](https://github.com/visual-framework/vf-core/issues) for implementing deeply technical and specific issues, like the Sass build process, browser bugs\n- 🏢 E-mail: if you have a sweeping Big Idea™️, e-mail Ken Hawkins \u003cken.hawkins@embl.de\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisual-framework%2Fvf-core","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisual-framework%2Fvf-core","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisual-framework%2Fvf-core/lists"}