Bootstrap DSP for the Adobe XD Extension for Visual Studio Code

Make developing with Bootstrap 5 even easier by using our free design system package (DSP) for Visual Studio Code. Gain direct access to Bootstrap code snippets and documentation with Intellisense right in the VS Code editor. This allows you to stay in flow and focus on development, instead of switching between your editor and the docs.

Learn more about the Bootstrap 5 DSP

Installing

To install Adobe Bootstrap DSP in your project, please run:

npm install @foxbox/adobe-bootstrap-dsp

DSP Setup

• Install the Adobe XD extension for VS Code
• Open the Adobe XD extension for VS Code (Cmd+Opt+X for Mac users) and select Load package.
• Navigate to your node_modules folder and load the bootstrap-dsp folder located inside @foxbox/adobe-bootstrap-dsp (DSPs contain a dsp.json file at the root level).
• Hit the Start Editing button
• Hit the Finish Editing button

With that a new build will be triggered and the dist folder will be updated

Environment Setup

HTML Webpage

• Change directory to plainHTML-project
• Open the index.html file in a browser

Note: refresh manually everytime you update the index.html

Next/React Application

• Change directory to next-project
• Run npm i to install the dependencies
• Run npm run dev
• Open http://localhost:3000 on the browser

Usage

For you to use the code snippets correctly, you have to install react-bootstrap and import the corresponding component

Example

import { Button } from 'react-bootstrap';

function HomePage() {
  return <Button variant="primary">Primary Button</Button>;
}

export default HomePage;

Resources

• Bootstrap 5 UI Kit assets: https://assets.adobe.com/public/4ed7617e-4c25-4294-6cc0-d240c39f8a7e
• Adobe XD VSCode Extension documentation: https://github.com/AdobeXD/design-system-package-dsp

Created by Foxbox Digital

Foxbox Digital is an award-winning digital product agency, headquartered in Chicago. We partner with clients ranging from Fortune 50 companies to high-growth startups and everyone in between to design, develop, and deliver successful digital experiences.