All Projects → visual-framework → vf-core

visual-framework / vf-core

Licence: Apache-2.0 license
A (primarily CSS) framework that targets needs of life science websites and services

Programming Languages

Nunjucks
165 projects
SCSS
7915 projects
javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to vf-core

Axiom React
Axiom - Brandwatch design system and React pattern library
Stars: ✭ 41 (+156.25%)
Mutual labels:  styleguide, pattern-library, component-library, design-system
react-dsfr
Non-official React components of the official french Système de Design de l'État.
Stars: ✭ 48 (+200%)
Mutual labels:  styleguide, component-library, design-system
Styleguide
The VTEX Design System and React component library.
Stars: ✭ 138 (+762.5%)
Mutual labels:  styleguide, component-library, design-system
core
The Pangolin.js core that drives everything.
Stars: ✭ 18 (+12.5%)
Mutual labels:  styleguide, pattern-library, design-system
Ugnis
Visual CSS generator for React
Stars: ✭ 249 (+1456.25%)
Mutual labels:  pattern-library, component-library, design-system
design-systems
A list of famous design systems, design languages and guidelines
Stars: ✭ 403 (+2418.75%)
Mutual labels:  pattern-library, component-library, design-system
nuxt-styleguide
Increase the quality and efficiency of product design and development workflows
Stars: ✭ 15 (-6.25%)
Mutual labels:  styleguide, pattern-library, component-library
Uiengine
Workbench for UI-driven development
Stars: ✭ 349 (+2081.25%)
Mutual labels:  styleguide, pattern-library, design-system
anv-ui-components
AnyVision React components library
Stars: ✭ 35 (+118.75%)
Mutual labels:  component-library, design-system
Vue Styleguidist
Created from react styleguidist for Vue Components with a living style guide
Stars: ✭ 2,133 (+13231.25%)
Mutual labels:  styleguide, design-system
paragon
💎 An accessible, theme-ready design system built for learning applications and Open edX.
Stars: ✭ 85 (+431.25%)
Mutual labels:  component-library, design-system
fractal-starter-kit
Starter kit for Fractal with SCSS, Webpack, XO, sass-lint and Gulp
Stars: ✭ 22 (+37.5%)
Mutual labels:  styleguide, pattern-library
react-uswds
USWDS 3.0 components built in React
Stars: ✭ 108 (+575%)
Mutual labels:  component-library, design-system
react
An implementation of GitHub's Primer Design System using React
Stars: ✭ 2,023 (+12543.75%)
Mutual labels:  component-library, design-system
Backpack Ui
All the tools you need to build the Lonely Planet UI experience.
Stars: ✭ 216 (+1250%)
Mutual labels:  styleguide, pattern-library
design-system
Nulogy Design System
Stars: ✭ 61 (+281.25%)
Mutual labels:  styleguide, design-system
kahi-ui
Straight-forward Svelte UI for the Web
Stars: ✭ 169 (+956.25%)
Mutual labels:  component-library, design-system
dorai-ui
Accessible, unstyled, open-sourced, and fully functional react component library for building design systems
Stars: ✭ 34 (+112.5%)
Mutual labels:  component-library, design-system
carbon-components-svelte
Svelte implementation of the Carbon Design System
Stars: ✭ 1,615 (+9993.75%)
Mutual labels:  component-library, design-system
tds-community
TELUS Design System Community Components
Stars: ✭ 22 (+37.5%)
Mutual labels:  component-library, design-system

This project is using Percy.io for visual regression testing.

👋 Downloading or cloning this repo? 🛑

Most won't need to clone this repo. Do so if you only wish to develop the architecture of the Visual Framework core or contribute a global component, otherwise use one of the boilerplates or install a component directly.


The Visual Framework Core (vf-core)

npm version Chat for support on Slack This project is using Percy.io for visual regression testing.

If 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.

This 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.

Image of columns representing a metaphor for the VF Core

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)

In short: The VF Core is a base to build systems.

Schematic of VF Core

Here’s that column metaphor translates as a schematic of relationships for VF Core.

The vf-core is built with:

  • Fractal for component structure
  • Node and Gulp; to:
    • rollup JavaScript and handle assets
    • allow custom Sass/CSS components to be added to local projects
  • Dart Sass
  • Yeoman to make custom components interactively
  • Yarn to install components
  • Nunjucks for component templates
  • Lerna to publish components to npm as a mono-repo
  • Name-spacing for JavaScript and CSS; more on that in the coding standards

Making use of the VF Core

Here's a guide with the most common approaches.

FAQ

Here's a guide to the most common questions.

Have a problem?

See the troubleshooting guide.

Want to help develop?

Great. See the development guide.


Have opinions, ideas, concerns or want to get involved?

There are a few ways that we discuss and track ideas:

  • General: Chat us for general ideas and discussion
  • ⚙️ Technical: GitHub issues here for implementing deeply technical and specific issues, like the Sass build process, browser bugs
  • 🏢 E-mail: if you have a sweeping Big Idea™️, e-mail Ken Hawkins [email protected]
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].