What is Rubus?

A Svelte implementation of Spectrum CSS, Adobe Design System.

Documentation

中文说明

Install

npm install @rubus/rubus # or yarn

Usage

Precondition

Depend

Install

npm install --dev postcss autoprefixer svelte-preprocess
#or
yarn --dev postcss autoprefixer svelte-preprocess

And configure svelte-preprocess, Learn how to configure svelte-preprocess

Import CSS

The Rubus component does not come with the spectrum CSS style, you need to manually import it as a static resource, but I have prepared an automatic script for you: static/init-css.js. You need to create a scripts (not mandatory) folder in your project root directory, then copy the init-css.jsfile into it, and then add the command inpackage.json

  "init-rubus": "cd scripts && node init-css.js"

Then:

npm run init-rubus # or yarn

And introduced in HTML (template entry, Routify is __index.html, sapper is template.html) file:

<!--Routify-->
<link rel="stylesheet" href="/styles/@spectrum-css/index.css" />

<!--Sapper-->
<link rel="stylesheet" href="styles/@spectrum-css/index.css" />

You also need to install svelte-preprocess to analyze global styles. For specific installation usage, please see here.

Okay, so far you have almost imported the css file and installed the dependencies. Then you can start using it 😊, if you encounter any problems during use, please file an issue in time. Your issue is the cornerstone of the project.

FAQ

If this error message appears:

not a valid SSR component. You may need to review your build config to ensure that dependencies are compiled, rather than imported as pre-compiled modules

You need to do:

<script>
  import { Button, Cornerstone } from "@rubus/rubus/src";
</script>

<Cornerstone
    spectrumScale="large"
    spectrumTheme="darkest"
    >
	<Button> Start </Button>
</Cornerstone>

If this error message appears:

Unexpected token (Note that you need plugins to import files that are not JavaScript)

You need to do:

• Import .mjs file.

<script>
  import { Button, Cornerstone } from "@rubus/rubus/dist/index.mjs";
</script>

<Cornerstone spectrumScale="large" spectrumTheme="darkest">
 	<Button> Start </Button>
</Cornerstone>

You can do the same:

• Install postcss plugin

npm install rollup-plugin-postcss

Change rollup.config.js file:

import postcss from "rollup-plugin-postcss";

...

export default {
  plugins: [
    postcss({
      extensions: [".css"],
    }),
  ]
}