{"version":3,"sources":["webpack:///./src/pages/components/grid/scss/index.mdx"],"names":["pageQuery","_frontmatter","layoutProps","MDXLayout","DefaultLayout","MDXContent","components","props","mdxType","data","href","parentName","isMDXComponent"],"mappings":"wUAQO,IAAMA,EAAY,aAgBZC,EAAe,GAOtBC,EAAc,CAClBF,YACAC,gBAEIE,EAAYC,IACH,SAASC,EAAT,GAGZ,IAFDC,EAEC,EAFDA,WACGC,E,oIACF,mBACD,OAAO,cAACJ,EAAD,iBAAeD,EAAiBK,EAAhC,CAAuCD,WAAYA,EAAYE,QAAQ,cAI5E,cAAC,IAAD,CAAiBC,KAAMF,EAAME,KAAMD,QAAQ,oBAC3C,cAAC,IAAD,CAA0BA,QAAQ,4BAAlC,uEACqE,IACrE,mBAAGE,KAAK,yBAAR,qBAFA,KAIA,oCACA,yMACA,+KACA,0CACA,yBAAK,oCAAMC,WAAW,OAAU,CAC5B,UAAa,gBACb,WAAc,qBACd,aAAgB,UAHf,qbAeL,gDACA,wBACE,oBAAIA,WAAW,MAAf,0BAA+C,wBAAQA,WAAW,MAAnB,QAA/C,sBAA+G,4BAAYA,WAAW,MAAvB,WAA/G,gBAAoL,4BAAYA,WAAW,MAAvB,WAApL,wBAAiQ,4BAAYA,WAAW,MAAvB,WAAjQ,mCACA,oBAAIA,WAAW,MAAK,4BAAYA,WAAW,MAAvB,WAApB,IAA6E,wBAAQA,WAAW,MAAnB,QAA7E,0BAAiJ,4BAAYA,WAAW,MAAvB,UAAjJ,aACA,oBAAIA,WAAW,MAAK,4BAAYA,WAAW,MAAvB,UAApB,IAA4E,wBAAQA,WAAW,MAAnB,QAA5E,iBAEF,gDACA,wBACE,oBAAIA,WAAW,MAAK,4BAAYA,WAAW,MAAvB,WAApB,wCACA,oBAAIA,WAAW,MAAK,4BAAYA,WAAW,MAAvB,iBAApB,wCAAuH,4BAAYA,WAAW,MAAvB,KAAvH,gCACA,oBAAIA,WAAW,MAAK,4BAAYA,WAAW,MAAvB,iBAApB,yCAAwH,4BAAYA,WAAW,MAAvB,KAAxH,gCACA,oBAAIA,WAAW,MAAK,4BAAYA,WAAW,MAAvB,iBAApB,wCAAuH,4BAAYA,WAAW,MAAvB,KAAvH,iCAEF,kDAA+B,4BAAYA,WAAW,KAAvB,QAA/B,yEACA,kKACA,0CACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,+PAQL,sCACA,0GACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,ySAQL,oDACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,wUASL,mCACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,ubAaL,0CACA,kCACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,+QAQL,gCACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,6QAQL,iCACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,8QAQL,qCACA,kCACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,6HAML,+BACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,0HAML,2CACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,uMAOL,kCACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,uMAOL,wCACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,sMAOL,wCACA,yBAAK,oCAAMA,WAAW,OAAU,CAC5B,UAAa,kBADZ,sMAOL,cAAC,IAAD,CAAiBF,KAAMF,EAAME,KAAMD,QAAQ,qBAM/CH,EAAWO,gBAAiB","file":"component---src-pages-components-grid-scss-index-mdx-9b924041e8ce2efaaa25.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/www/src/components/mdx/index.tsx\";\nimport { graphql } from 'gatsby';\nimport { ComponentHeader, ComponentFooter, DeprecatedComponentAlert } from 'components/thumbprint-components';\nexport const pageQuery = graphql`\n {\n # Get links to by path to display in the navbar.\n platformNav: allSitePage(filter: { path: { glob: \"/components/grid/*/\" } }) {\n edges {\n node {\n ...PlatformNavFragment\n }\n }\n }\n # Get package information by NPM package name.\n packageTable: thumbprintComponent(name: { eq: \"@thumbtack/thumbprint-scss\" }) {\n ...PackageTableFragment\n }\n }\n`;\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 pageQuery,\n _frontmatter\n};\nconst MDXLayout = DefaultLayout;\nexport default function MDXContent({\n components,\n ...props\n}) {\n return \n\n\n\n \n \n This package was deprecated on September 11 in favor of classes from{' '}\n Thumbprint Atomic.\n \n

{`Overview`}

\n

{`Grid column widths assume a “mobile first” approach. If columns widths need to change based on browser width you can supply additional column widths that apply at breakpoint.`}

\n

{`The grid is a complicated component. Be sure you’re implementing it with the required classes as unexpected issues can occur. See below for details.`}

\n

{`Common example`}

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

{`In the example above:`}

\n
    \n
  1. {`If using a wrapper, it `}{`MUST`}{` be an ancestor of `}{`tp-grid`}{`. Do not add `}{`tp-wrap`}{` or other classes to `}{`tp-grid`}{` that could affect the margins.`}
    2. \n
  2. {`tp-grid`}{` `}{`MUST`}{` be a direct parent of `}{`tp-col`}{` classes.`}
    3. \n
  3. {`tp-col`}{` `}{`MUST`}{` be present.`}
    4. \n
\n

{`Column class options:`}

\n
    \n
  • {`.tp-col`}{` sets required common column styling`}
    • \n
  • {`.tp-col--sm-N`}{` applies above the small breakpoint, `}{`N`}{` is a value between 1 and 12`}
    • \n
  • {`.tp-col--md-N`}{` applies above the medium breakpoint, `}{`N`}{` is a value between 1 and 12`}
    • \n
  • {`.tp-col--lg-N`}{` applies above the large breakpoint, `}{`N`}{` is a value between 1 and 12`}
    • \n
\n

{`By default, a gutter of `}{`16px`}{` is present between columns. See options below to widen or remove it.`}

\n

{`There is no added spacing above or below grids or columns. If you need top or bottom spacing, add it to the content inside the columns.`}

\n

{`Non-responsive`}

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

{`Responsive`}

\n

{`A common layout, stacked when browser width is narrow, side-by-side above that.`}

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

{`Mutiple rows and nesting`}

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

{`Nesting`}

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

{`Gutter options`}

\n

{`Narrow`}

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

{`Wide`}

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

{`Flush`}

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

{`Alignment`}

\n

{`Center`}

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

{`End`}

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

{`Justify between`}

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

{`Offset`}

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

{`Middle align`}

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

{`Bottom align`}

\n 
{`
\n    
\n    
\n
\n`}
\n \n\n\n ;\n}\n;\nMDXContent.isMDXComponent = true;\n "],"sourceRoot":""}