@gffinance/groundfloor-ui NPM

Groundfloor UI

Groundfloor UI includes the building blocks for making a Bulma/Buefy based site using Groundfloor style. Additionally it houses shared Vue components.

Notable Files

These are the key files you'll be interacting with as an end user.

src/scss/imports.scss - Collects all the non-rendering scss. Intended for global imports.
src/scss/bundle.scss - This file collects all rendering scss from our bulma/buefy implementation. Import this scss file as needed to create framework css.
dist/bundle.css - The compiled css output from bundle.scss. You may find it easier to deal with the compiled output rather than the source. This file is for that.
src/buefy-config.ts - Shared buefy configuration.
src/plugin.ts - Component library plugin. You can import individual components if you'd like, but this file provides a plugin to register all custom components in one go.

Usage

Groundfloor UI is design to be as easy as possible to use, but some manual configuration is required. This is largely to avoid wrapping buefy directly, keeping it as a peer dependency so buefy or nuxt-buefy can be used depending on the context.

npm install -S @gffinance/groundfloor-ui
Install buefy normally (kinda). Make sure you're not including the bunldes buefy css, we'll be adding our own. Import the buefy config and make sure you're using it.
Add the global style bundle, either with css or scss, it should work either way.
If you're using style resource loader connect imports.scss as a global include.
Add the plugin using the example code below.

import Vue from 'vue';
import { plugin } from '@gffinance/groundfloor-ui';

Vue.use(plugin);

CLI Commands

npm run dev : Run the local dev server
npm run lint : Runs eslint
npm run build : Builds for production using rollup.
npm run build:watch : Watches for changes and builds accordingly. Great for debugging issues with components in a secondary project.

Local Development

If you're looking to dev on Groundfloor UI itself, there is a demo site built into this repo for that purpose. This should give you a space to test out components and extend the style guide without running a secondary project. However, just because it works within the demo site does not mean it will neccesarily work once included into another codebase. The local env uses vue cli (webpack) rather than rollup, the process of transpiling typescript can do strange things and there are plenty of small things that can break in the build. Once you're satisfied with you local changes in the dev env you should test in another project.

TLDR: npm run dev for local dev, but you can't trust the local env 100%.

Local Development with Two Projects

Let's say you have a Nuxt site that is using groundfloor-ui and you want to view your changes to groundfloor-ui in that Nuxt site. The fact that it's nuxt doesn't matter, it could be a Vue site just as easily.

Run npm link inside the groundfloor-ui folder. This will make this codebase linkable. You only need to do this once for a given checkout.
Run npm link @gffinance/groundfloor-ui inside the nuxt folder. This will create a symlink inside nuxt's node_modules to your local groundfloor-ui.
Please note that this link will be broken every time you run npm install directly or indirectly (vue-cli plugins often call install for you). This can lead to some very confusing issues! Remember to relink after install!
If you're going to be working on Vue (rather than pure SCSS) run npm run build:watch in the groundfloor-ui folder. This will rebuild as you change code. If you're just working on Bulma/Buefy scss code the nuxt site will compile the scss for you without the need for rollup.
Run nuxt and see your changes.