Chat Client Style Guide
What is this?
A central Style Guide to be used to share a common look and feel across Chat Client framework projects.
What's this built with?
- Customized Bootstrap based SASS library (currently just the styles and the the JS components)
- Custom FontAwesome icons (includes FontAwesome core and main icons)
- Gulp was used for the build for posterity, a vanilla NPM script build would make more sense though
Planning
- Wireframes created using Balsamiq in file
./style-guide/chat-mockups.bmpr
https://www.npmjs.com/package/pathiess-chat-style-guide
NPM Module for style-guide at:Setup
From your project root add the Style Guide module with:
npm install --save pathiess-chat-style-guide
In any modern framework you can do a base import on the main SCSS Style Guide src/main.scss
, something like:
@import '~pathiess-chat-style-guide/src/styles.scss';
You can also include the built CSS Style Guide by copying the file to your projeft from:
chat-client/style-guide/dist/chat-client-style-guide.css
For the custom icons, this will vary by framework. Below is an example for VueJS
import { library } from '@fortawesome/fontawesome-svg-core';
import { far } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
import '../node_modules/ptdv-style-guide/dist/ptdv-fontawesome.js';
library.add(far, PATHIESS_CUSTOM_ICONS);
Vue.component('fa-icon', FontAwesomeIcon)
Development
For local development and testing the Style-Guide in a project, a sym link to the module speeds things up. (vs pubishing and updating for every module change). Follow the instructions in Trouble Shooting.
After installing and optionally adding a sym link, run the below from the Style-Gude directory to have Gulp watch for any changes and run the build:
npm run watch
Publishing
Remember to publish changes when complete :) Bump the package version and run:
npm publish
Trouble Shooting
Q. How do I add this Sym Link thing?
A. From Style Guide root (chat-client/style-guide
) run:
npm link
From each project(s), make sure project added to package.json with correct name and a valid version. Also make sure the style guide is deleted from the node_modules dir. Then from the projuect Modules directory (node_modules
) run:
npm link pathiess-chat-style-guide
The local project builds should now pick up any changes to the style guide through the sym link.
Q. Publish "EPERM.." error?
A. Make sure you're logged in npm login
Q. General "ESDIR" error?
A. !IMPORTANT avoid local npm link on virtual drives. The symboloic link failes with an EISDIR error https://github.com/nodejs/node/issues/6861. One work around during dev is to just edit the local module in the node_modules dir and then manually copy the changes to this project.