vanilla-framework-svelte

A quick test to see if the Vanilla CSS framework will play nicely with Svelte in a modular way.

Size

The table below shows the (minified and gzipped) size of a completely empty app, versus an app which only contains the contextual menu from the example. Realistically, the JS would be a similar size if you were to write the component yourself in Svelte. The main difference is the additional CSS. The first component added includes the base styles of vanilla-framework, including normalize, typography, buttons etc. Adding additional components will not duplicate this, so the CSS size should not grow too quickly.

Note: This will also include the Ubuntu font - hopefully this can be remove with SASS/CSS variables.

Viewing the example

See ./example/README.md.

Adding to an existing project

Install package

npm install --save-dev git://github.com/ajwild/vanilla-framework-svelte.git#master

Install postcss

npm install --save-dev node-sass rollup-plugin-postcss

Update rollup.config.js

 import livereload from 'rollup-plugin-livereload';
 import { terser } from 'rollup-plugin-terser';
+import postcss from 'rollup-plugin-postcss';
 
 const production = !process.env.ROLLUP_WATCH;

     commonjs(),
 
+    postcss({
+      extract: true,
+      minimize: true,
+      use: [
+        [
+          'sass',
+          {
+            includePaths: ['./node_modules'],
+          },
+        ],
+      ],
+    }),
+
     // In dev mode, call `npm run start` once
     // the bundle has been generated
     !production && serve(),

Use component

<script>
  import {
    ContextualMenu,
    ContextualMenuContent,
    ContextualMenuGroup,
    ContextualMenuItem,
    ContextualMenuTrigger
  } from "vanilla-framework-svelte";
</script>

<ContextualMenu let:active>
  <ContextualMenuTrigger {active} />
  <ContextualMenuContent {active}>
    <ContextualMenuGroup>
      <ContextualMenuItem>Item one</ContextualMenuItem>
      <ContextualMenuItem>Item two</ContextualMenuItem>
      <ContextualMenuItem>Item three</ContextualMenuItem>
    </ContextualMenuGroup>
    <ContextualMenuGroup>
      <ContextualMenuItem>Another item</ContextualMenuItem>
    </ContextualMenuGroup>
  </ContextualMenuContent>
</ContextualMenu>