{"version":3,"sources":["webpack:///./src/pages/installing-spark/html-add-components.mdx","webpack:///./src/components/layouts/InstallingSparkLayout.js"],"names":["_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","href","target","parentName","width","height","src","frameBorder","allow","allowFullScreen","className","style","spinnergif","alt","isMDXComponent","InstallingSparkLayout","children","location","initialContext"],"mappings":"sSAOO,IAAMA,EAAe,GAOtBC,EAAc,CAClBD,gBAEIE,EAAYC,IACH,SAASC,EAAT,GAGZ,IAFDC,EAEC,EAFDA,WACGC,E,oIACF,mBACD,OAAO,YAACJ,EAAD,iBAAeD,EAAiBK,EAAhC,CAAuCD,WAAYA,EAAYE,QAAQ,cAI5E,6DACA,iDACA,4UAI8C,iBAAGC,KAAK,2DAA2DC,OAAO,UAA1E,sBAJ9C,KAKA,yFACF,+BAAGC,WAAW,KAAQ,CAChB,KAAQ,6CADd,wCADE,SAIF,+BAAGA,WAAW,KAAQ,CAChB,KAAQ,wCADd,yBAJE,KAOA,8GACS,+BAAGA,WAAW,KAAQ,CAC3B,KAAQ,8BADH,WADT,QAG6B,+BAAGA,WAAW,KAAQ,CAC/C,KAAQ,4BADiB,SAH7B,8BAMA,sBAAQC,MAAM,MAAMC,OAAO,MAAMC,IAAI,4CAA4CC,YAAY,IAAIC,MAAM,0EAA0EC,iBAAe,IAChM,sDACA,sBACE,kBAAIN,WAAW,MACb,iBAAGA,WAAW,MAAd,8BAAkD,iBAAGF,KAAK,eAAeC,OAAO,UAA9B,eAAlD,kJAIF,kBAAIC,WAAW,MACb,iBAAGA,WAAW,MAAd,kBAAsC,kBAAIA,WAAW,KAAf,cAAtC,uEAIJ,8BACE,iBAAGA,WAAW,cAAa,sBAAQA,WAAW,KAAnB,eAA3B,wEACO,iBAAGF,KAAK,mCAAmCC,OAAO,UAAlD,UADP,gBAGF,iBAAQ,CACN,MAAS,GAET,kBAAIC,WAAW,MACb,iBAAGA,WAAW,MAAd,aAAiC,kBAAIA,WAAW,KAAf,QAAjC,0CAEF,kBAAIA,WAAW,MACb,iBAAGA,WAAW,MAAd,mBAAuC,kBAAIA,WAAW,KAAf,QAAvC,mCAEF,kBAAIA,WAAW,MACb,iBAAGA,WAAW,MAAd,6FAGF,kBAAIA,WAAW,MACb,iBAAGA,WAAW,MAAd,SAA6B,kBAAIA,WAAW,KAAf,aAA7B,MAEF,kBAAIA,WAAW,MACb,iBAAGA,WAAW,MAAd,6BAAiD,0BAAYA,WAAW,KAAvB,cAAjD,OAGJ,8BACE,iBAAGA,WAAW,cAAa,sBAAQA,WAAW,KAAnB,eAA3B,sFAC4B,iBAAGF,KAAK,4EAA4EC,OAAO,UAA3F,kBAD5B,qEAIF,uBAAK,kCAAMC,WAAW,OAAU,CAC5B,UAAa,kBADZ,kFAML,8BACE,iBAAGA,WAAW,cAAa,sBAAQA,WAAW,KAAnB,QAA3B,gCAAoG,0BAAYA,WAAW,KAAvB,WAApG,gCACQ,0BAAYA,WAAW,KAAvB,cADR,SACwE,0BAAYA,WAAW,KAAvB,YADxE,yCAEU,0BAAYA,WAAW,KAAvB,UAFV,UAIF,iBAAQ,CACN,MAAS,GAET,kBAAIA,WAAW,MAAf,6FAGF,8BACE,iBAAGA,WAAW,cAAa,sBAAQA,WAAW,KAAnB,eAA3B,wEAGF,mBAAKO,UAAU,kBACjB,mBAAKA,UAAU,aAAaC,MAAO,CAC7B,OAAU,OACV,QAAW,SACVL,IAAKM,IAAYC,IAAI,uCAE1B,qCACA,mEACA,2CACA,sBACE,kBAAIV,WAAW,MAAf,OAA4B,+BAAGA,WAAW,MAAS,CAC/C,KAAQ,uCADgB,2BAA5B,2CAIA,kBAAIA,WAAW,MAAf,OAA4B,+BAAGA,WAAW,MAAS,CAC/C,KAAQ,uCADgB,2BAA5B,uDASNN,EAAWiB,gBAAiB,E,uGCpI5B,qCAGA,SAASC,EAAT,GAAwD,IAAvBC,EAAsB,EAAtBA,SAAUC,EAAY,EAAZA,SACzC,OACE,kBAAC,IAAD,CAAQC,eAAgB,mBAAoBD,SAAUA,GAAWD,G,+EAItDD","file":"component---src-pages-installing-spark-html-add-components-mdx-1f7fb39aee9a41f1eb8b.js","sourcesContent":["import * as React from 'react'\n /* @jsx mdx */\nimport { mdx } from '@mdx-js/react';\n/* @jsx mdx */\n\nimport DefaultLayout from \"/opt/build/repo/src/components/layouts/InstallingSparkLayout.js\";\nimport spinnergif from '../../images/installing-spark/html/html-spinner.gif';\nexport const _frontmatter = {};\n\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n return
;\n};\n\nconst layoutProps = {\n _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n components,\n ...props\n}) {\n return \n\n\n\n

{`Installing Spark in an HTML Project`}

\n

{`Adding Spark Components`}

\n

{`Now you’re ready to start writing the HTML to build the structure\nof the components you’ll be using. Here we’ll cover how to add\ncomponents for HTML, CSS and JavaScript environments with no\nJavaScript framework. You can follow along with the code examples\nin this guide using the sample app found in our `}{`starter repository`}{`.`}

\n

{`This guide is Part 3 in a 3-Part series. You can also check out\n`}{`Part 1 - Setting Up Your Environment`}{` and\n`}{`Part 2 - Installation`}{`.`}

\n

{`For instructions on setting up Spark in other environments, check out the\nguides for `}{`Angular`}{` and `}{`React`}{` development environments.`}

\n \n

{`Navigating to Component HTML`}

\n
    \n
  1. \n

    {`To get started, select the `}{`Using Spark`}{`\ntab at the top of this page. This is where you’ll find all the HTML you’ll\nneed for the component variants and configurations you can use.`}

    \n
    2. \n
  2. \n

    {`Underneath the `}{`Components`}{` section in the left column, find the component\nyou want to add.`}

    \n
    3. \n
\n
\n

{`For example`}{`: Let’s say you’re trying to add a Loading Button. You’d\nselect the `}{`Button`}{` component.`}

\n
\n
    \n
  1. \n

    {`Click the `}{`HTML`}{` link to view the HTML documentation.`}

    \n
    2. \n
  2. \n

    {`Navigate to the `}{`Docs`}{` tab at the top of the screen.`}

    \n
    3. \n
  3. \n

    {`Scroll down until you see the component variant you would like to\ninclude in your site.`}

    \n
    4. \n
  4. \n

    {`Click `}{`Show code`}{`.`}

    \n
    5. \n
  5. \n

    {`Copy the sample code into `}{`index.html`}{`.`}

    \n
    6. \n
\n
\n

{`For example`}{`: If you’re adding a Loading Button, you’d scroll\ndown on the Button page to find `}{`Loading Button`}{`.\nThen you’d copy the Loading Button code that looks like this:`}

\n
\n 
{`\n`}
\n
\n

{`Note`}{`: Make sure you’re including `}{`main.js`}{` after the HTML\nelements in `}{`index.html`}{`. The `}{`