Giter VIP home page Giter VIP logo

newport-design-system's Introduction

Vlocity Newport Design System

Welcome to the Vlocity Newport Design System brought to you by Vlocity.

Tailored for building Vlocity Newport apps: Using the Newport Design System markup and CSS framework results in UIs that reflect the Vlocity Newport look and feel. Includes Storybook.js previewer to help you customize and rebrand all of Vlocity's newport based templates in one place.

Want to see the project hosted live? Go to http://newport.vlocinternal.com/

Pre-requisites

NOTE: You'll need to use the command line to work with Newport, if you're not familar with the command line we recommend following the short Git Tower Command Line 101 tutorial: https://www.git-tower.com/learn/git/ebook/en/command-line/appendix/command-line-101

You'll need the following installed:

Quick start

Clone the project with

git clone https://github.com/vlocityinc/newport-design-system.git

Change into the newport-design-system folder using

cd newport-design-system

(optional) Switch to the right branch for your version of the Salesforce package, for example

git checkout ins-108.0

Install the dependencies by running:

npm install

Finally you can launch Storybook previewer by running:

npm start

Preview in Storybook

Having trouble getting these steps to work on your machine? Follow the troubleshooting guide below.

Docs

For more indepth documentation please checkout the documentation section in storybook.

Browser compatibility

We support the latest versions of all browsers and IE 11.

Generating the zip to deploy

When you have an updated version of Newport that you're happy with and want to test in an org you can run the following command:

npm run build && npm run dist

This will generate a zipped up version to be uploaded into Salesforce in the dist folder in your workspace.

If you also want to deploy it to an org then run it with the following env variables:

[email protected] SF_PASSWORD=mypassword npm run dist

Troubleshooting

npm and Node.js

The Vlocity Newport Design System uses npm to manage dependencies. Please install Node.js, and try running npm install again.

If Node.js is already installed, make sure you’re running v8 or up.

JavaScript and compilation issues

JavaScript dependencies sometimes get out of sync and inexplicable bugs start to happen. Follow these steps to give a fresh start to your development environment:

  1. The installed npm version must be at least v3.10. You can update your npm with: npm install npm -g (sudo may be required).
  2. Re-install dependencies: rm -Rf node_modules && npm install
  3. npm start

If this did not work, try running npm cache clean and repeat the above steps.

Licenses

Got feedback?

Please open a new GitHub Issue.

newport-design-system's People

Contributors

amyleesalesforce avatar apurvbambarde avatar aputinski avatar brandonferrua avatar brunofonzi avatar chriscorwin avatar cramamoorthy avatar donnieberg avatar dottenpixel avatar emy-paulson avatar grebstock avatar greenkeeper[bot] avatar ishakasliwal avatar jonnyl avatar kaelig avatar kevinberonilla avatar kinseyschell avatar lokeshrj avatar mattgoldspink avatar mgoldspink-salesforce avatar owenschoppe avatar paramesh-anakapalli avatar rickschmoo avatar sitaggart avatar srohde avatar ssiddiquivlocity avatar stefsullrew avatar topherauyeung avatar zahnster avatar zsohnvlocity avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.