Design System Starter Kit
Rapid prototyping environment using the Salesforce Lightning Design System
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)
- If you want to have internal-facing work in your starter kit app, it is recommended to use a private repository.
- 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.
- Enter a unique name for your new starter kit repository.
- Select the Private option for privacy settings.
- Click Begin Import.
Set-up (Public)
- Fork the Starter Kit repository or download it onto your computer.
- Express
Express.js is a simple Node.js framework for single, multi-page, and hybrid web applications.
- 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 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.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.
