salesforce-uxsalesforce-ux
368

Design System Starter Kit

screenshot of Design System Starter Kit
express
scss

Rapid prototyping environment using the Salesforce Lightning Design System

GithubDemo

Overview

The Lightning Design System Starter Kit by Salesforce UX is a rapid prototyping environment that allows users to create prototypes using the Salesforce Lightning Design System, HTML, and Sass. It caters to both designers and Salesforce developers, providing an easy and efficient way to create prototypes of various sizes in the browser.

Features

  • Web Standards: The starter kit is built using HTML and CSS, making it accessible to designers with no coding experience.
  • Quick and Easy: Copying and pasting markup from the Lightning Design System website is simple, allowing for fast prototyping.
  • Deployment Options: The starter kit provides the option to deploy prototypes to Heroku for free with just two clicks.

Set-up (Private)

  1. If you want to have internal-facing work in your starter kit app, it is recommended to use a private repository.
  2. Import the Starter Kit repository into a new private repository by visiting https://github.com/new/import and entering the clone URL: https://github.com/salesforce-ux/design-system-starter-kit.
  3. Enter a unique name for your new starter kit repository.
  4. Select the Private option for privacy settings.
  5. Click Begin Import.

Set-up (Public)

  1. Fork the Starter Kit repository or download it onto your computer.

Quick Start

Make sure you have Node.js version 12 or higher installed before proceeding.

  1. Clone your repository onto your computer if you imported or forked it.
  2. In the terminal, navigate to the directory where you cloned or downloaded the Starter Kit repository.
  3. Run npm install to install the necessary dependencies.
  4. Run npm run dev or gulp to start the development server.
  5. Open http://localhost:3000 in your browser.
  6. Edit the src/views/index.html file to start building prototypes.

Deploy to Heroku

To deploy your prototype to Heroku, follow these steps:

  1. Deploy your own prototype for free to Heroku by clicking the Deploy button.
  2. Fill in a username and password in the Heroku settings if your work is confidential.

Summary

The Lightning Design System Starter Kit by Salesforce UX provides designers and Salesforce developers with a powerful tool for rapid prototyping using the Salesforce Lightning Design System. With its easy installation process, support for web standards, and deployment options, the starter kit is a valuable resource for creating prototypes in the browser.

express
Express

Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.

scss
SCSS

SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.

eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.

gulp
Gulp

Gulp.js is an old but popular site building tool that automates various repetitive development tasks in web development, such as compiling Sass, minifying JavaScript, and optimizing images.

Stylelint

Stylelint is a modern linter for CSS that helps you avoid errors and enforce consistent styling conventions. It provides rules for detecting errors and warnings, and can be configured to match your specific project's requirements.