{"id":13514536,"url":"https://github.com/salesforce-ux/design-system-starter-kit","last_synced_at":"2025-03-31T03:30:54.675Z","repository":{"id":8773579,"uuid":"58100809","full_name":"salesforce-ux/design-system-starter-kit","owner":"salesforce-ux","description":"Rapid prototyping environment using the Salesforce Lightning Design System","archived":false,"fork":false,"pushed_at":"2023-07-12T02:52:02.000Z","size":2182,"stargazers_count":356,"open_issues_count":10,"forks_count":570,"subscribers_count":46,"default_branch":"main","last_synced_at":"2024-11-01T18:37:13.053Z","etag":null,"topics":["design-systems","heroku","prototype","salesforce-lightning"],"latest_commit_sha":null,"homepage":"https://starter-kit-demo.herokuapp.com/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/salesforce-ux.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":"CODEOWNERS","security":null,"support":null,"governance":null}},"created_at":"2016-05-05T03:13:43.000Z","updated_at":"2024-10-25T13:41:22.000Z","dependencies_parsed_at":"2023-01-11T20:11:18.360Z","dependency_job_id":"9ce981b1-7b27-4b20-afc2-ddee94989664","html_url":"https://github.com/salesforce-ux/design-system-starter-kit","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salesforce-ux%2Fdesign-system-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salesforce-ux%2Fdesign-system-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salesforce-ux%2Fdesign-system-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/salesforce-ux%2Fdesign-system-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/salesforce-ux","download_url":"https://codeload.github.com/salesforce-ux/design-system-starter-kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246413377,"owners_count":20773053,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design-systems","heroku","prototype","salesforce-lightning"],"created_at":"2024-08-01T05:00:57.489Z","updated_at":"2025-03-31T03:30:52.133Z","avatar_url":"https://github.com/salesforce-ux.png","language":"HTML","funding_links":[],"categories":["HTML"],"sub_categories":[],"readme":"# Lightning Design System Starter Kit [![Circle CI](https://circleci.com/gh/salesforce-ux/design-system-starter-kit.svg?style=shield\u0026circle-token=6c0b617673fd9c9e4eb4fb9defe953a92fc1797c)](https://circleci.com/gh/salesforce-ux/design-system-starter-kit)\n\n![Starter Kit by Salesforce UX](https://rawgit.com/salesforce-ux/design-system-starter-kit/master/starter-kit.svg)\n\nRapid prototyping environment using the [Salesforce Lightning Design System](https://www.lightningdesignsystem.com/), HTML, and [Sass](http://www.sass-lang.com/).\n\n## Who is this for?\n\nFrom the prototyper to the large application developer… the Design System Starter Kit\nis a helpful tool to get started and run prototypes of all sizes in the browser.\n\n### Designers\n\nThe starter kit is built using web standards, more specifically HTML and CSS.\nCopy and pasting markup from \u003chttps://www.lightningdesignsystem.com/\u003e is quick and easy.\nNo need to be a front-end guru to start designing in the browser!\n\n### Salesforce Developers\n\nSetting a whole demo org for a quick prototype can take time and effort,\nwhereas cloning the starter kit and putting a few components together only takes a few minutes.\nDeploying your prototype to Heroku for free – in only 2 clicks – is also lightning fast!\n\n## Set-up (private) 🔒\nIf you plan to have internal-facing work in your starter kit app that you don't want public, using a private repository is recommended. One method to achieve that is to import this Starter Kit repository into a new private one ([details](https://help.github.com/en/github/importing-your-projects-to-github/importing-a-repository-with-github-importer)):\n\n1. Open https://github.com/new/import\n1. In the **Your old repository's clone URL** field, enter: `https://github.com/salesforce-ux/design-system-starter-kit`\n1. In the **Your new repository details** field, enter a unique name for your new starter kit repository.\n1. Under **Privacy**, be sure to select the Private option :)\n1. Click **Begin Import**\n1. Once your new repository is created, move onto [Quick Start](#quick-start)\n\n## Set-up (public)\n1. Fork this repository or [download it](https://github.com/salesforce-ux/design-system-starter-kit/archive/master.zip) onto your computer\n\n## Quick Start\n\nPre-requisites: [Node.js](https://nodejs.org/en/) 12 or higher.\n\n1. Clone your new repository onto your computer if you've imported or forked.\n1. In a terminal, `cd` into the directory where you cloned or downloaded your Starter Kit repository.\n1. Run `npm install`\n1. Run `npm run dev` (or `gulp`)\n1. Open \u003chttp://localhost:3000\u003e\n\nThat’s it! You can start by editing the `src/views/index.html` file and build awesome prototypes.\n\nTip: copy markup from the [Lightning Design System Components](https://www.lightningdesignsystem.com/components-overview/) and paste it into the HTML files of the starter kit.\n\n## Deploy to Heroku\n\nDeploy your own prototype for free to [Heroku](https://www.heroku.com) in only 2 clicks.\n\n[![Deploy](https://www.herokucdn.com/deploy/button.svg)](https://heroku.com/deploy)\n\n**Your work is confidential?** Fill in a username and password in the Heroku settings.\n\n## What’s inside?\n\n- SLDS Components and CSS, imported using [Sass](http://www.sass-lang.com/)\n- Powerful templating using [Nunjucks](http://mozilla.github.io/nunjucks/)\n- Some JavaScript, making a few components interactive\n- [SVG4Everybody](https://github.com/jonathantneal/svg4everybody), a polyfill that helps browsers display SVG icons\n- [Live reload using BrowserSync](https://www.browsersync.io/): automatic browser reloading on file changes, and simultaneous cross-device testing\n- Sourcemaps support ([for live in-browser Sass development](https://medium.com/@toolmantim/getting-started-with-css-sourcemaps-and-in-browser-sass-editing-b4daab987fb0))\n- [Autoprefixer](https://github.com/postcss/autoprefixer) (adds vendor prefixes to CSS rules)\n\n## FAQ\n\n### Which browsers does the Starter Kit support?\n\nWhen it comes to the CSS, the Starter Kit has the same support level as the Lightning Design System itself.\nSee [the list of supported browsers](https://www.lightningdesignsystem.com/faq/#what-browsers-are-supported).\n\nFor JavaScript, at the moment only a few very recent browsers are supported (Chrome \u0026 Firefox recommended).\n\n### Is there a showcase of prototypes using the Starter Kit?\n\nNot yet, but we’d love to know about your creations! Feel free to get in touch in the [issues of the project](https://github.com/salesforce-ux/design-system-starter-kit/issues).\nIn the mean time, you can [check out the example prototype](https://starter-kit-demo.herokuapp.com/example.html).\n\n### How do I update to use the latest version of the Salesforce Lightning Design System?\n\nIf you've had this project installed for a while, the SLDS version will stay the same as the version that was current when you cloned the project. To update to the latest public release of SLDS, in Terminal, run:\n\n`npm update @salesforce-ux/design-system`\n\n### How would I update my fork if Salesforce updates the Starter Kit?\n\nTo sync your fork, browse to: `{{your GitHub and repository URL}}/compare/master...salesforce-ux:master`\n\nOn that page, click `Create pull request` and proceed to merge the pull request if all looks good.\n\nThen, in Terminal, from your fork's project folder, run:\n\n```\ngit checkout master\ngit pull origin master\n```\n\nOr, in GitHub Desktop, click `Fetch origin` and then `Pull origin`.\n\n## See Also\n\nThe [Design System UI Kit](https://github.com/salesforce-ux/design-system-ui-kit/) is a great way for designers to put beautiful static prototypes together.\n\nUsing React? Check out the [react branch](https://github.com/salesforce-ux/design-system-starter-kit/tree/react) (beta)!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalesforce-ux%2Fdesign-system-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsalesforce-ux%2Fdesign-system-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsalesforce-ux%2Fdesign-system-starter-kit/lists"}