{"componentChunkName":"component---src-pages-get-started-develop-vanilla-mdx","path":"/get-started/develop/vanilla/","webpackCompilationHash":"9ffd1cb8ca3b610e9ad3","result":{"pageContext":{"isCreatedByStatefulCreatePages":true,"frontmatter":{"title":"Develop","description":"The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.","tabs":["React","Vanilla","Angular","Vue","Other frameworks"]},"relativePagePath":"/get-started/develop/vanilla.mdx","titleType":"prepend","MdxNode":{"id":"9fc6a42b-498d-569e-bf18-4f31d7324e3e","children":[],"parent":"b00b63de-242c-5f4c-8468-e7da1487da14","internal":{"content":"---\ntitle: Develop\ndescription: The Carbon Design System supports vanilla JS, React and Angular as core parts of the product. But you can still build components even if you're using a different framework.\ntabs: ['React', 'Vanilla', 'Angular', 'Vue', 'Other frameworks']\n---\n\n\n\nCarbon Vanilla library\nInstall\nGetting started\nTroubleshooting\n\n\n\n## Carbon Vanilla library\n\nThe library provides front-end developers & engineers a collection of reusable HTML and SCSS partials to build websites and user interfaces. Adopting the library enables developers to use consistent markup, styles, and behavior in prototype and production work.\n\n## Install\n\n#### Using npm:\n\n
\n\n```bash\n$ npm install --save carbon-components\n```\n\n#### If you prefer [Yarn](https://yarnpkg.com/en/):\n\n
\n\n```bash\n$ yarn add carbon-components\n```\n\n_NB: March 29, 2019 - Please use the @next tag to install Carbon v10 components. e.g. `npm i carbon-components@next`._\n\n## Getting started\n\n\n\nWhat's included\nCDN\nCodePen\nSCSS\nJavaScript\nPolyfills for older browsers\n\n\n\n### What's included\n\n```bash\ncarbon-components/\n├── html\n├── css\n│ ├── carbon-components.css\n│ └── carbon-components.min.css\n├── scripts\n│ ├── carbon-components.js\n│ └── carbon-components.min.js\n├── scss\n│ └── components\n│ └── modal\n│ └── _modal.scss\n├── umd\n│ └── index.js\n├── es\n│ └── index.js\n└── src (Deprecated and subject to breaking changes, please use es/umd instead)\n```\n\n### CDN\n\nUse unpkg for easy access to our built static files. This is great for prototyping and trying `carbon-components` without installing anything. See all files from `carbon-components` available on [unpkg CDN](https://unpkg.com/carbon-components/).\n\n| Scripts | URL |\n| ------- | -------------------------------------------------------------------- |\n| CSS | https://unpkg.com/carbon-components/css/carbon-components.min.css |\n| ES5 | https://unpkg.com/carbon-components/scripts/carbon-components.min.js |\n\n### CodePen\n\nWe have individual [CodePens](https://codepen.io/collection/XqRbEz/) for all of our components which you can easily fork and play around with.\n\n### SCSS\n\nUsing the Carbon Sass files infers usage of the SCSS pre-processor.\nAll Sass files use the `*.scss` file extension.\n\nFor transpiling Sass code, use `node-sass` based Sass compilers, for example, WebPack `sass-loader` or `gulp-sass`.\n\nIf you're starting a new project without a boilerplate,\nyou need to know about a few things to get started.\n\n#### Autoprefixer\n\nMake sure your build process uses [autoprefixer](https://github.com/postcss/autoprefixer) to ensure vendor prefixes are automatically added to your output CSS.\n\n#### Default body styles\n\nCSS is automatically applied to `` element, which comes from [\\_css--body.scss](https://github.com/carbon-design-system/carbon/blob/master/src/globals/scss/_css--body.scss). These styles are meant to cascade down to everything in `` to set common styles shared across all components.\n\n```scss\nbody {\n @include reset;\n @include type-style('body-short-01');\n color: $text-01;\n background-color: $ui-background;\n line-height: 1;\n}\n```\n\n#### Icons\n\nA lot of components depend on SVG icons from [carbon-icons](https://github.com/carbon-design-system/carbon-icons). Read the [docs](https://github.com/carbon-design-system/carbon-icons/blob/master/docs/usage.md) for details on how to use them.\n\n#### Global SCSS variables\n\nThese variables are used to configure which parts of the SCSS get compiled, where each variable controls a SCSS file of the same name. All variables are set to `true` by default.\n\nFor example:\n\n- When you set `$css--reset: true`, then the contents of [\\_css--reset.scss](https://github.com/carbon-design-system/carbon/blob/master/src/globals/scss/_css--reset.scss) will be part of your output CSS.\n- When you set `$css--reset: false`, then nothing gets included from that SCSS file.\n- When the variable is not declared at all, then nothing gets included from that SCSS file.\n\nThe same rules apply to all the following variables:\n\n```scss\n// In styles.scss:\n// These are the default settings.\n$css--font-face: true !default;\n$css--helpers: true !default;\n$css--body: true !default;\n$css--use-layer: true !default;\n$css--reset: true !default;\n$css--typography: true !default;\n$css--plex: true !default;\n```\n\nThese flags are set for you by default when you `@import` the `styles.scss` file.\nYou can override these default settings by redeclaring the variables.\n\n#### Importing SCSS files\n\nTo add a component style to your build, simply import the component directly. Importing a component this way will bring in any dependencies that component has as well. The import system removes duplicate dependencies, so shared dependencies between components will not create extra CSS.\n\n```js\n@import 'node_modules/carbon-components/scss/components/card/card';\n```\n\n#### Namespacing\n\nCarbon Components are built to be included individually and not clobber global styles - all `class` attributes are prefixed by the `bx--` moniker. You can specify your own prefix by changing the SCSS variable `$prefix`.\n\n### JavaScript\n\nCarbon Component has component JavaScript classes, each of which correspond to a component found in [our components page](../../components/overview). The first steps to work with component JavaScript classes are the following:\n\n#### 1. Getting component JavaScript class reference\n\n
\n\n**Using a module bundler:** We recommend using ECMAScript module along with your module bundler toolchain to do so. Using a module bundler will bring in only the component code your application needs, creating an optimized build for production. Carbon Components ships with a ECMAScript module build as well as UMD build for each component, for use with webpack or Rollup.\n\nAfter you've installed the components through `npm`, you can grab a component JavaScript class reference by something like this:\n\n```js\nimport { Modal } from 'carbon-components';\n```\n\n**Using pre-built bundle:** Users can also opt to use the pre-built `carbon-components.js` file directly, like below. We recommend that most users do _not_ use this file, as it includes components your application may or may not actually be using.\n\n```html\n\n \n \n \n \n\n```\n\nOnce you load `carbon-components.js` via `\n \n\n```\n\nOnce you load `carbon-components.js` via `