Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
vanilla-framework-react
Advanced tools
Readme
This is a simple implementation of Vanilla Framework using React.
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;
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
.
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.
FAQs
Vanilla Framework, built using React
The npm package vanilla-framework-react receives a total of 5 weekly downloads. As such, vanilla-framework-react popularity was classified as not popular.
We found that vanilla-framework-react demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 3 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.