embl.org
vf-core-mirror

Repository



Visual Framework 2.0

👋 Downloading or cloning this repo? 🛑
Usually you don't need this whole repo. Only clone this repo if you wish to further develop the Visual Framework core or contribute a global component, otherwise: see the "Get Started" section.


🎫 What is this?
The Visual Framework (VF) is designed with the needs of life science websites and services. It goes beyond guidance for tables, graphs, data-heavy typography and focuses on being sane defaults and implements its CSS in a way that won't interfere with your existing components that use Bootstrap, Angular, or something else.
The VF 2.0 enables consistency and portability, it is extensible, modular and overridable; here to help and not get in the way.


Demo:  
Online component library
  §   Changelog


Philosophy:  
Aims of the VF 2.0
  §   Principles and Methods


Help out:  
Contributing guide
  §   Request a component
  §   Make a new component


Make it your own:  
Clone the child theme template


⏰ When will this be ready?

This is a v2.0 that was imagined in 2017 and development began in the summer of 2018.
As of February 2019 we're on alpha.3.
We're hopeful a beta could be ready before summer 2018.

Watch the releases and let us know your feedback: issues or email.

🤔 Why a VF?
The Visual Framework address three major needs:


⚗️🌳 Life sciences: We address common needs for life science websites. The Visual Framework can be easily tailored to niche needs, but out of the box it's pleasant looking, but dry and serious to support focus, clarity and data.

🏰 Share only what you need to: the Visual Framework is designed to work with other frameworks (both CSS, like Bootstrap, and JS, like React or Angular). This allows common components (and brand design) to be shared between sites without cross-contaminating into another framework. We mainly achieve this by:

Name spacing all selectors for CSS or JS (vf-*)
No CSS styling on HTML elements. We only attached to name spaced classes, that is:


✅ .vf-button {}


🚫 .button {}


🚫 button {}


🚫🙊🙉 div.button {}


🖕 This necessarily requires a bit more class writing, but it ensures the Visual Framework won't break existing code.
BYOJS: Bring your own JavaScript. We've included only a minimal amount of JS in components and it's fully optional (just remove the JavaScript selectors; i.e. data-vf-js-tabs). So if you'd rather use Angular or Bootstrap for your tabs, the Visual Framework won't get in the way.


🌕🌜 Use a little or a lot:

A lot: The framework (and child theme template) will generate a monolithic styles.css and script.js that can be easily included, a la Bootstrap.
A little: Instead you can include .scss partials or per-component .css and .js files. You can do this through making a child theme or npm installs.


🚧 ✍ Developing, contributing

How do I make my own theme or customise components?
 See the contributing guide

I have an idea or concern!
There are a few ways that we discuss and track ideas:


⁉ General: Slack at embl-vf.slack.com 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 ken.hawkins@embl.de


Versioning
See the versioning guide in the changelog

Alpha development of v2.0
As the Visual Framework is in heavy, active development, we will have many v2.0.0-alpha.X releases. With new alphas planned on a monthly basis (last Thursday of each month).

Local development
To use the Visual Framework your machine will require some software to be installed to start. See the "Setting up" guide.