Skip to content
This repository has been archived by the owner. It is now read-only.
An implementation of Vanilla Framework using React
Branch: master
Clone or download
Latest commit 054f201 May 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Add github PR template Mar 7, 2018
.storybook Update Storybook to Vanilla 1.8.0 Jul 17, 2018
config Remove unnecessary webpack configs Jun 22, 2018
src Fix Strip Example styling Jul 18, 2018
.babelrc
.env Add latest ./run with port 8102 Nov 24, 2017
.eslintrc.json Move storybook packages to devDevependencies + add exceptions to lint… Jun 20, 2018
.gitignore Minor code fixes Jun 22, 2018
.npmignore Only publish contents of build/ to npm Jun 20, 2018
.travis.yml Update travis yml test script Jun 22, 2018
README.md Update README.md May 10, 2019
package.json Pin dependencies May 3, 2019
renovate.json Use new renovate config May 4, 2019
run Add latest ./run with port 8102 Nov 24, 2017
yarn.lock Pin dependencies May 3, 2019

README.md

Archived

Ths project has been archived for the time being, as it's not currently being maintained or actively used.


Vanilla Framework (in React)

This is a simple implementation of Vanilla Framework using React.

Storybook | Vanilla Framework

Quick start

To get up and running with Vanilla Framework React quickly, add the create-react-app CLI tool to your machine. Then, run the following code:

create-react-app my-app
cd my-app/
yarn add vanilla-framework vanilla-framework-react node-sass-chokidar
export SASS_PATH=`pwd`/node_modules:${SASS_PATH}

Open package.json and add the following scripts:

"build-css": "node-sass-chokidar src/ -o public/",
"watch-css": "npm run build-css && node-sass-chokidar src/ -o public/ --watch --recursive",

Open public/index.html and add the line:

<link rel="stylesheet" href="styles.css" />

Create src/styles.scss with the following code:

// Optionally override some settings
$color-brand: #fb3b00;

// Import the theme
@import 'vanilla-framework/scss/build';

// Include the Sass you want
@include vanilla;

Remove the following line from src/index.js:

import './index.css';

Now open a terminal and run yarn watch-css and open another terminal and run yarn start.

In your src/App.js file you can now include Vanilla Framework React components by adding the code:

import React, { Component } from 'react';
import { Button } from 'vanilla-framework-react';

class App extends Component {
  render() {
    return (
      <div>
        <Button brand value="Custom VF React Button!" />
      </div>
    );
  }
}

export default App;

Including Vanilla in your React project

This component library requires Vanilla Framework to function. You can either hotlink the latest build directly into your markup, like so (replace x's with the version you want):

<link rel="stylesheet" href="https://assets.ubuntu.com/v1/vanilla-framework-version-x.x.x.min.css" />

Or you can add Vanilla Framework to your node_modules folder and save it into your project's dependencies using your favourite package manager. You should also ensure that your Sass builder is including modules from node_modules. For example:

yarn add vanilla-framework
export SASS_PATH=`pwd`/node_modules:${SASS_PATH}

Then reference it from your own Sass files, with optional settings:

// Optionally override some settings
$color-brand: #fb3b00;

// Import the theme
@import 'vanilla-framework/scss/build';

// Include the Sass you want
@include vanilla;

If you don't want the whole framework, you can just @include specific parts - e.g. @include vf-b-forms.

Local development

In the project directory, you can run:

./run

This will start up an interactive development & testing environment listing all components.

The page will reload if you make edits.
You will also see any lint errors in the console.

./run test

Launches the test runner in the interactive watch mode.

./run build

Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.

You can’t perform that action at this time.