{"componentChunkName":"component---src-pages-index-js","path":"/","result":{"data":{"allMdx":{"posts":[{"frontmatter":{"title":"How to get started with CSS-in-JS","slug":"/how-to-get-started-with-css-in-js/","date":"June 4, 2020","tags":["CSS-in-JS","CSS Architecture"],"showToc":true,"cover":{"source":"Vecteezy","url":"https://www.vecteezy.com/vector-art/225429-vector-memphis-background-illustration","caption":null,"img":{"alt":"css-in-js","sharp":null,"src":"/static/ebf4b59a3e8f07c2f955946db3f2292a/css-in-js.svg","dataURI":null}}},"timeToRead":2,"excerpt":"What is CSS-in-Js? What challenges it poses to developers? But before we get started let's not forget that CSS is…","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"How to get started with CSS-in-JS\",\n  \"slug\": \"/how-to-get-started-with-css-in-js/\",\n  \"date\": \"2020-06-04T00:00:00.000Z\",\n  \"cover\": {\n    \"img\": \"css-in-js.svg\",\n    \"source\": \"Vecteezy\",\n    \"url\": \"https://www.vecteezy.com/vector-art/225429-vector-memphis-background-illustration\"\n  },\n  \"tags\": [\"CSS-in-JS\", \"CSS Architecture\"],\n  \"showToc\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"What is CSS-in-Js? What challenges it poses to developers? But before we get started let\\u2019s not forget that CSS is awesome, and it\\u2019s easy to get started with.\\nSo why we need to write CSS in Javascript and how to do it.\"), mdx(\"p\", null, \"CSS-in-JS bridges the gap between CSS and JavaScript, it doesn\\u2019t meant to destroy everything you love about CSS. My opinion is, it can make authoring CSS far more enjoyable, and I\\u2019d encourage you to give it a shot.\"), mdx(\"h2\", {\n    \"id\": \"why-css-in-js\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#why-css-in-js\",\n    \"aria-label\": \"why css in js permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Why CSS-in-JS\"), mdx(\"p\", null, \"Web applications have been scaling at a massive and complex rate, and they are Javascript heavy, just look at React ecosystem.\\nYou can still write regular CSS, you can use CSS Preprocessor like SASS, you can use CSS Modules etc. All these methodolgies are sufficient in styling your React applications.\\nThese methodolgies works perfect when you have to work on static site like marketing website, microsite or small projects.\"), mdx(\"p\", null, \"CSS-in-JS goes one step ahead and solve numerous problems which above methodolgies can pose in developing dynamic web applications. It eliminates problems such as:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Global namespace\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Style dependencies\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Dead code elimination\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Composition of styles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Sharing constants\")), mdx(\"h2\", {\n    \"id\": \"how-it-works\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#how-it-works\",\n    \"aria-label\": \"how it works permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"How it works\"), mdx(\"p\", null, \"CSS-in-JS is an approach where styles are written in JavaScript instead of in external CSS files to easily scope styles in components, eliminate dead code, encourage faster performance and dynamic styling, and more.\"), mdx(\"p\", null, \"Here are key features:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"CSS-in-JS allows you to write CSS in JavaScript syntax\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"It takes advantage of native JS syntax features\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Colocate styles with components\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"To get started I would recommend \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"a\", {\n    href: \"https://styled-components.com/\",\n    target: \"_blank\",\n    rel: \"noopener noreferrer nofollow\"\n  }, \"Styled Components\")))), mdx(\"h2\", {\n    \"id\": \"learn-css-before-css-in-js\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#learn-css-before-css-in-js\",\n    \"aria-label\": \"learn css before css in js permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Learn CSS before CSS-in-JS\"), mdx(\"p\", null, \"Well CSS-in-JS is awesome in it\\u2019s own way, you still need to learn CSS fundamentals as it does not teach you how CSS works in DOM.\"), mdx(\"p\", null, \"Here are key points to learn:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"How CSS properties work\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"How inheritance works\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"How CSS layout works\")), mdx(\"h2\", {\n    \"id\": \"other-advantages-of-css-in-js\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#other-advantages-of-css-in-js\",\n    \"aria-label\": \"other advantages of css in js permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Other Advantages of CSS-in-JS\"), mdx(\"p\", null, \"Key points:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Easy to pre-render important CSS\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Supports dynamic styling (Use ES modules and scope)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Styles are generally \\u201Cscoped\\u201D to a specific component\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Unit testing is far easier with CSS-in-JS\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Performance improvements like critical CSS with no additional setup needed\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"Having said that if you are familiar with JavaScript CSS-in-JS helps remove the need to use native CSS syntax and this can make styling an application more accessible because there are fewer new things to learn.\\nOn other side of coin if you are less familiar with JavaScript your learning curve will increase but it\\u2019s not very difficult and it will only enhance your knowledge.\")), mdx(\"p\", null, \"Happy Learning!\"), mdx(\"style\", {\n    \"className\": \"grvsc-styles\"\n  }, \"\\n  .grvsc-container {\\n    overflow: auto;\\n    position: relative;\\n    -webkit-overflow-scrolling: touch;\\n    padding-top: 1rem;\\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\\n    padding-bottom: 1rem;\\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\\n    border-radius: 8px;\\n    border-radius: var(--grvsc-border-radius, 8px);\\n    font-feature-settings: normal;\\n    line-height: 1.4;\\n  }\\n  \\n  .grvsc-code {\\n    display: table;\\n  }\\n  \\n  .grvsc-line {\\n    display: table-row;\\n    box-sizing: border-box;\\n    width: 100%;\\n    position: relative;\\n  }\\n  \\n  .grvsc-line > * {\\n    position: relative;\\n  }\\n  \\n  .grvsc-gutter-pad {\\n    display: table-cell;\\n    padding-left: 0.75rem;\\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\\n  }\\n  \\n  .grvsc-gutter {\\n    display: table-cell;\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    user-select: none;\\n  }\\n  \\n  .grvsc-gutter::before {\\n    content: attr(data-content);\\n  }\\n  \\n  .grvsc-source {\\n    display: table-cell;\\n    padding-left: 1.5rem;\\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\\n    padding-right: 1.5rem;\\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\\n  }\\n  \\n  .grvsc-source:empty::after {\\n    content: ' ';\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    user-select: none;\\n  }\\n  \\n  .grvsc-gutter + .grvsc-source {\\n    padding-left: 0.75rem;\\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\\n  }\\n  \\n  /* Line transformer styles */\\n  \\n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\\n    content: ' ';\\n    position: absolute;\\n    width: 100%;\\n  }\\n  \\n  .grvsc-line-diff-add::before {\\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\\n  }\\n  \\n  .grvsc-line-diff-del::before {\\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\\n  }\\n  \\n  .grvsc-line-number {\\n    padding: 0 2px;\\n    text-align: right;\\n    opacity: 0.7;\\n  }\\n  \\n\"));\n}\n;\nMDXContent.isMDXComponent = true;"},{"frontmatter":{"title":"Button vs Link","slug":"/button-vs-link/","date":"November 22, 2019","tags":["Form Design","Accessibility","Usability"],"showToc":true,"cover":{"source":"Vecteezy","url":"https://www.vecteezy.com/vector-art/223315-colorful-abstract-art-background-with-motivational-quote","caption":null,"img":{"alt":"button","sharp":null,"src":"/static/2f4118bb3ed7ca0c80652a0a151c5a9e/button.svg","dataURI":null}}},"timeToRead":2,"excerpt":"Now a days custom checkbox styles are part of every design, while it's an enhancement over native element it possess…","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Button vs Link\",\n  \"slug\": \"/button-vs-link/\",\n  \"date\": \"2019-11-22T00:00:00.000Z\",\n  \"cover\": {\n    \"img\": \"button.svg\",\n    \"source\": \"Vecteezy\",\n    \"url\": \"https://www.vecteezy.com/vector-art/223315-colorful-abstract-art-background-with-motivational-quote\"\n  },\n  \"tags\": [\"Form Design\", \"Accessibility\", \"Usability\"],\n  \"showToc\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Now a days custom checkbox styles are part of every design, while it\\u2019s an enhancement over native element it possess challenge if implementation goes wrong. Not only keyboard users, screen readers and even mouse users will face problem while filling up forms.\"), mdx(\"h2\", {\n    \"id\": \"key-consideration\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#key-consideration\",\n    \"aria-label\": \"key consideration permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Key Consideration\"), mdx(\"p\", null, \"Developing custom checkbox and make it easy to use, do consider these points:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Must be accessible\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Perfectly aligned to label\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Preventing text selection\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Focus styles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Labels are associated with inputs\")), mdx(\"p\", null, \"Let\\u2019s look at sample design consist of various custom checkboxes, this is pretty much we are gonna build and implementing above points.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\",\n      \"borderRadius\": \"0.5em\",\n      \"overflow\": \"hidden\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"60%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAcUiAv8A/8QAFRABAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQEAAQUCa//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABoQAAICAwAAAAAAAAAAAAAAAAABEBEhMUH/2gAIAQEAAT8h4NRolSwXH//aAAwDAQACAAMAAAAQxA//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAhEDFBkf/aAAgBAQABPxAKJV90YvcfmJO8bn5Shtu95t4cf//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Custom checkbox graphics\",\n    \"title\": \"Custom checkbox graphics\",\n    \"src\": \"/static/358897d6c389def97affdac0d70a03fb/e5166/custom-checkbox.jpg\",\n    \"srcSet\": [\"/static/358897d6c389def97affdac0d70a03fb/f93b5/custom-checkbox.jpg 300w\", \"/static/358897d6c389def97affdac0d70a03fb/b4294/custom-checkbox.jpg 600w\", \"/static/358897d6c389def97affdac0d70a03fb/e5166/custom-checkbox.jpg 1200w\", \"/static/358897d6c389def97affdac0d70a03fb/b17f8/custom-checkbox.jpg 1600w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n    \")), mdx(\"h2\", {\n    \"id\": \"checkbox-html\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#checkbox-html\",\n    \"aria-label\": \"checkbox html permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Checkbox HTML\"), mdx(\"p\", null, \"Basic markup of single checkbox is pretty much straight forward, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input[type=\\\"checkbox\\\"]\"), \" followed by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \", and input id is associated with label for attribute using same value. This is all we need in terms of markup.\"), mdx(\"h3\", {\n    \"id\": \"html-code-snippet\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#html-code-snippet\",\n    \"aria-label\": \"html code snippet permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"HTML code snippet\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Single-checkbox\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"html\",\n    \"data-index\": \"0\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox-row\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"input\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"type\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"name\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox_default\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox_one\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"/>\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"for\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox_one\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"Checkbox Default\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))))), mdx(\"h2\", {\n    \"id\": \"checkbox-css\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#checkbox-css\",\n    \"aria-label\": \"checkbox css permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Checkbox CSS\"), mdx(\"p\", null, \"Here we see what modern CSS can do, let\\u2019s go step by step while creating custom checkbox:\"), mdx(\"h3\", {\n    \"id\": \"step-1\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#step-1\",\n    \"aria-label\": \"step 1 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Step 1:\"), mdx(\"p\", null, \"Visually hide \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input[type=checkbox]\"), \" using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position:absolute\"), \" property. Then take it off screen and using left/right properties.\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Visually-hide-input\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"css\",\n    \"data-index\": \"1\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"position\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"absolute\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"-99999px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"right\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"auto\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))))), mdx(\"h3\", {\n    \"id\": \"step-2\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#step-2\",\n    \"aria-label\": \"step 2 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Step 2:\"), mdx(\"p\", null, \"Create new element using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"+\"), \" adjacent sibling and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"::before\"), \" pseudo properties. Combine checkbox class and pseudo \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<label>\"), \" element.\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Pseudo-and-adjacent-selector\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"css\",\n    \"data-index\": \"2\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" + \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label::before\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"content\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"width\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"28px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"height\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"28px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"position\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"absolute\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"top\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"border\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"2px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"solid\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"#000\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))))), mdx(\"h3\", {\n    \"id\": \"step-3\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#step-3\",\n    \"aria-label\": \"step 3 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Step 3:\"), mdx(\"p\", null, \"At his stage new element is created but things are scattered over places, as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" element needs to styled. Align label horizontally and vertically using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"display:flex\"), \" properties and adding cursor property as well.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Note:\"), \" Here \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"user-select:none\"), \" is an important aspect, as it will prevent label text selection on check/un-check of checkbox. This is very annoying and leads to accessibility issues.\")), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"label\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"css\",\n    \"data-index\": \"3\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"display\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"flex\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"align-items\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"center\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"cursor\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"pointer\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"padding-left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"46px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"position\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"relative\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"min-height\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"32px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"user-select\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"none\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))))), mdx(\"h3\", {\n    \"id\": \"step-4\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#step-4\",\n    \"aria-label\": \"step 4 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Step 4:\"), mdx(\"p\", null, \"At this last step, tick mark is created using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"transition\"), \" properties on pseudo element \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"::after\"), \". Tick mark visibility is managed by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"opacity\"), \". And then add \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"background-color\"), \"  and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border-color\"), \" to highlight selection.\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Check-uncheck-checkbox\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"css\",\n    \"data-index\": \"4\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox:checked\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" + \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label::after\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"content\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"width\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"6px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"height\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"14px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"position\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"absolute\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"top\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"6px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"13px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"border\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"2px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"solid\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"border-left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"border-top\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"opacity\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"transform\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk11\"\n  }, \"rotate\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"45deg\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \");\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"transition\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": opacity \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0.2s\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"ease-in-out\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"color\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"#fff\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox:checked\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" + \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label::after\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"opacity\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox:checked\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" + \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label::before\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"background\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"#0f70d2\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"border-color\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"#0f70d2\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))))), mdx(\"h2\", {\n    \"id\": \"focus-style\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#focus-style\",\n    \"aria-label\": \"focus style permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Focus style\"), mdx(\"p\", null, \"Now custom checkboxes are build, let\\u2019s add focus style. It is important as we hide native checkbox which by default has focus. Here similar to step 2, outline styling will be added.\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Focus-outline\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"css\",\n    \"data-index\": \"5\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox:focus\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" + \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label::before\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"outline\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"2px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"solid\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"#f5bc0e\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"outline-offset\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"4px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))))), mdx(\"p\", null, \"That\\u2019s it, we have developed custom checkboxes and implemented key points mentioned earlier in post. Final code with output can be seen in codesandbox.\"), mdx(\"h2\", {\n    \"id\": \"codesandbox\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#codesandbox\",\n    \"aria-label\": \"codesandbox permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Codesandbox\"), mdx(\"iframe\", {\n    \"src\": \"https://codesandbox.io/embed/custom-accessible-checkbox-tpih1?codemirror=1\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"500px\",\n      \"border\": \"0\",\n      \"borderRadius\": \"4px\",\n      \"overflow\": \"hidden\"\n    },\n    \"allow\": \"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\",\n    \"sandbox\": \"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n  }), mdx(\"h2\", {\n    \"id\": \"conclusion\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#conclusion\",\n    \"aria-label\": \"conclusion permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Conclusion\"), mdx(\"p\", null, \"While there are other ways to do it as well, such as use of image/svg etc\\u2026 You can find many articles explaining it very well, at the end it\\u2019s your choice which works better for you.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Important:\"), \" Do not wrap \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input\"), \" element inside \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" and avoid putting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" before input element, as it will cause issue in screen readers such as NVDA and Jaws. Specially when error messages are implemented it will create problem using assistive technologies. So stick to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input\"), \" then \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" structure.\")), mdx(\"style\", {\n    \"className\": \"grvsc-styles\"\n  }, \"\\n  .grvsc-container {\\n    overflow: auto;\\n    position: relative;\\n    -webkit-overflow-scrolling: touch;\\n    padding-top: 1rem;\\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\\n    padding-bottom: 1rem;\\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\\n    border-radius: 8px;\\n    border-radius: var(--grvsc-border-radius, 8px);\\n    font-feature-settings: normal;\\n    line-height: 1.4;\\n  }\\n  \\n  .grvsc-code {\\n    display: table;\\n  }\\n  \\n  .grvsc-line {\\n    display: table-row;\\n    box-sizing: border-box;\\n    width: 100%;\\n    position: relative;\\n  }\\n  \\n  .grvsc-line > * {\\n    position: relative;\\n  }\\n  \\n  .grvsc-gutter-pad {\\n    display: table-cell;\\n    padding-left: 0.75rem;\\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\\n  }\\n  \\n  .grvsc-gutter {\\n    display: table-cell;\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    user-select: none;\\n  }\\n  \\n  .grvsc-gutter::before {\\n    content: attr(data-content);\\n  }\\n  \\n  .grvsc-source {\\n    display: table-cell;\\n    padding-left: 1.5rem;\\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\\n    padding-right: 1.5rem;\\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\\n  }\\n  \\n  .grvsc-source:empty::after {\\n    content: ' ';\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    user-select: none;\\n  }\\n  \\n  .grvsc-gutter + .grvsc-source {\\n    padding-left: 0.75rem;\\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\\n  }\\n  \\n  /* Line transformer styles */\\n  \\n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\\n    content: ' ';\\n    position: absolute;\\n    width: 100%;\\n  }\\n  \\n  .grvsc-line-diff-add::before {\\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\\n  }\\n  \\n  .grvsc-line-diff-del::before {\\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\\n  }\\n  \\n  .grvsc-line-number {\\n    padding: 0 2px;\\n    text-align: right;\\n    opacity: 0.7;\\n  }\\n  \\n  .default-dark {\\n    background-color: #1E1E1E;\\n    color: #D4D4D4;\\n  }\\n  .default-dark .mtk1 { color: #D4D4D4; }\\n  .default-dark .mtk17 { color: #808080; }\\n  .default-dark .mtk4 { color: #569CD6; }\\n  .default-dark .mtk12 { color: #9CDCFE; }\\n  .default-dark .mtk8 { color: #CE9178; }\\n  .default-dark .mtk6 { color: #D7BA7D; }\\n  .default-dark .mtk7 { color: #B5CEA8; }\\n  .default-dark .mtk11 { color: #DCDCAA; }\\n  .default-dark .grvsc-line-highlighted::before {\\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\\n  }\\n\"));\n}\n;\nMDXContent.isMDXComponent = true;"},{"frontmatter":{"title":"SASS Architecture","slug":"/sass-architecture/","date":"November 14, 2019","tags":["SASS","CSS Architecture"],"showToc":true,"cover":{"source":"Vecteezy","url":"https://www.vecteezy.com/vector-art/273771-flat-orange-abstract-vector-background","caption":null,"img":{"alt":"sass","sharp":null,"src":"/static/e2ce8c97a02d9fa97b64082223fb1ae6/sass.svg","dataURI":null}}},"timeToRead":2,"excerpt":"When it comes to maintaining CSS at large scale project it quickly get messy when modular approach is not followed. As…","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"SASS Architecture\",\n  \"slug\": \"/sass-architecture/\",\n  \"date\": \"2019-11-14T00:00:00.000Z\",\n  \"cover\": {\n    \"img\": \"sass.svg\",\n    \"source\": \"Vecteezy\",\n    \"url\": \"https://www.vecteezy.com/vector-art/273771-flat-orange-abstract-vector-background\"\n  },\n  \"tags\": [\"SASS\", \"CSS Architecture\"],\n  \"showToc\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"When it comes to maintaining CSS at large scale project it quickly get messy when modular approach is not followed. As project grows it becomes quite important to keep files and folders organized.\"), mdx(\"p\", null, \"Even with the help of preprocessor over vanilla CSS, we still need to have a file structure. Thus based on your project size choose a pattern and extend it based on requirements.\"), mdx(\"h2\", {\n    \"id\": \"small-projects\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#small-projects\",\n    \"aria-label\": \"small projects permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Small Projects\"), mdx(\"p\", null, \"Let\\u2019s take example of small projects like microsite, campaign site etc\\u2026 it is easier to divide files in three categories: \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_base.scss\"), \", \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_components.scss\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"_layouts.scss\"), \" and one \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"main.scss\"), \" file where all these files are imported for compilation.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Note:\"), \" Don\\u2019t choose flat file structure, even if project is small, always choose modular approach which is easy to extend. So your file structure should be like this:\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"base/\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"components/\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"layouts/\")), mdx(\"h2\", {\n    \"id\": \"large-projects\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#large-projects\",\n    \"aria-label\": \"large projects permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Large Projects\"), mdx(\"p\", null, \"SASS files structure becomes bloated if modular approach is not followed, so need to organize it in right ways is important. So how will you make it readable and extendable, what pattern to follow these questions arises.\"), mdx(\"p\", null, \"Well to make things easy for us, \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"a\", {\n    href: \"https://sass-guidelin.es/#the-7-1-pattern\",\n    target: \"_blank\",\n    rel: \"noopener noreferrer nofollow\"\n  }, \"Kitty Giraudel\\u2019s\"), \" \\u20187-1 pattern\\u2019\"), \" boilerplate comes to rescue. It is a widely adopted structure and it covers each and every aspect, but here i will share some very useful and hands-on tips.\"), mdx(\"p\", null, \"Though it is popularly known as 7-1, based on your project structure it could be 5-1/6-1 or even 8-1.\"), mdx(\"h2\", {\n    \"id\": \"default-file-structure\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#default-file-structure\",\n    \"aria-label\": \"default file structure permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Default File Structure\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"abstracts/\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"base/\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"components/\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"layouts/\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"pages/\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"themes/\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"vendors/\")), mdx(\"h2\", {\n    \"id\": \"5-16-1-pattern\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#5-16-1-pattern\",\n    \"aria-label\": \"5 16 1 pattern permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"5-1/6-1 Pattern\"), mdx(\"p\", null, \"So this is how sass/scss files are organized, but based on your project requirement you may not need themes and vendors folders all the time. When both of these are not required it will be referred as 5-1, and if either of one is not required it will be referred as 6-1.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Note:\"), \" There is no explicit rule that you have to create all 7 folders, based on project requirement and to keep things better organized for your team you can opt this pattern.\")), mdx(\"h3\", {\n    \"id\": \"usage-of-vendors\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#usage-of-vendors\",\n    \"aria-label\": \"usage of vendors permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Usage of Vendors\"), mdx(\"p\", null, \"Say you don\\u2019t want to use any third party library and focused on writing each and every components and utility at your own or may be there is no need, then you can escape vendors folder.\"), mdx(\"h3\", {\n    \"id\": \"usage-of-themes\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#usage-of-themes\",\n    \"aria-label\": \"usage of themes permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Usage of Themes\"), mdx(\"p\", null, \"Similarly themes can be escaped if your project is not multi tenant or your project don\\u2019t have role based interface like customer help portal/admin portal. Generally it is more useful in case SAAS based products where brands have option to select or create their own theme or you want to give end user an option to choose your own theme then you want to overwrite few styles and images/icons and place it in themes folder.\"), mdx(\"h2\", {\n    \"id\": \"8-1-pattern\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#8-1-pattern\",\n    \"aria-label\": \"8 1 pattern permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"8-1 Pattern\"), mdx(\"p\", null, \"This is an extension pattern, where you want to modify any third party library as per you application design, you want to keep core features of it and looking to extend it or modify few keys properties. Then the best way is to create \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"vendors-extensions\"), \" folder where you will override third party components and utility.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Note:\"), \" It is very important to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"@import vendors-extensions\"), \" folder exactly after vendors folder, in this way custom styles which you want to overwrite will work, placing it above will not work.\")), mdx(\"h2\", {\n    \"id\": \"conclusion\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#conclusion\",\n    \"aria-label\": \"conclusion permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Conclusion\"), mdx(\"p\", null, \"And that\\u2019s it! You got to know how you can organize your SASS/SCSS files in a modular way based on your project requirement. This way it will improve code readability and enhance overall developer experience.\"), mdx(\"style\", {\n    \"className\": \"grvsc-styles\"\n  }, \"\\n  .grvsc-container {\\n    overflow: auto;\\n    position: relative;\\n    -webkit-overflow-scrolling: touch;\\n    padding-top: 1rem;\\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\\n    padding-bottom: 1rem;\\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\\n    border-radius: 8px;\\n    border-radius: var(--grvsc-border-radius, 8px);\\n    font-feature-settings: normal;\\n    line-height: 1.4;\\n  }\\n  \\n  .grvsc-code {\\n    display: table;\\n  }\\n  \\n  .grvsc-line {\\n    display: table-row;\\n    box-sizing: border-box;\\n    width: 100%;\\n    position: relative;\\n  }\\n  \\n  .grvsc-line > * {\\n    position: relative;\\n  }\\n  \\n  .grvsc-gutter-pad {\\n    display: table-cell;\\n    padding-left: 0.75rem;\\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\\n  }\\n  \\n  .grvsc-gutter {\\n    display: table-cell;\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    user-select: none;\\n  }\\n  \\n  .grvsc-gutter::before {\\n    content: attr(data-content);\\n  }\\n  \\n  .grvsc-source {\\n    display: table-cell;\\n    padding-left: 1.5rem;\\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\\n    padding-right: 1.5rem;\\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\\n  }\\n  \\n  .grvsc-source:empty::after {\\n    content: ' ';\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    user-select: none;\\n  }\\n  \\n  .grvsc-gutter + .grvsc-source {\\n    padding-left: 0.75rem;\\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\\n  }\\n  \\n  /* Line transformer styles */\\n  \\n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\\n    content: ' ';\\n    position: absolute;\\n    width: 100%;\\n  }\\n  \\n  .grvsc-line-diff-add::before {\\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\\n  }\\n  \\n  .grvsc-line-diff-del::before {\\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\\n  }\\n  \\n  .grvsc-line-number {\\n    padding: 0 2px;\\n    text-align: right;\\n    opacity: 0.7;\\n  }\\n  \\n\"));\n}\n;\nMDXContent.isMDXComponent = true;"},{"frontmatter":{"title":"Custom Accessible Checkbox","slug":"/custom-accessible-checkbox/","date":"November 10, 2019","tags":["Form Design","Accessibility"],"showToc":true,"cover":{"source":"Vecteezy","url":"https://www.vecteezy.com/vector-art/273658-abstract-background-vector","caption":null,"img":{"alt":"checkbox","sharp":null,"src":"/static/ebaa62afb2188338c15a011ae58f534a/checkbox.svg","dataURI":null}}},"timeToRead":2,"excerpt":"Now a days custom checkbox styles are part of every design, while it's an enhancement over native element it possess…","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Custom Accessible Checkbox\",\n  \"slug\": \"/custom-accessible-checkbox/\",\n  \"date\": \"2019-11-10T00:00:00.000Z\",\n  \"cover\": {\n    \"img\": \"checkbox.svg\",\n    \"source\": \"Vecteezy\",\n    \"url\": \"https://www.vecteezy.com/vector-art/273658-abstract-background-vector\"\n  },\n  \"tags\": [\"Form Design\", \"Accessibility\"],\n  \"showToc\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Now a days custom checkbox styles are part of every design, while it\\u2019s an enhancement over native element it possess challenge if implementation goes wrong. Not only keyboard users, screen readers and even mouse users will face problem while filling up forms.\"), mdx(\"h2\", {\n    \"id\": \"key-consideration\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#key-consideration\",\n    \"aria-label\": \"key consideration permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Key Consideration\"), mdx(\"p\", null, \"Developing custom checkbox and make it easy to use, do consider these points:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Must be accessible\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Perfectly aligned to label\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Preventing text selection\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Focus styles\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Labels are associated with inputs\")), mdx(\"p\", null, \"Let\\u2019s look at sample design consist of various custom checkboxes, this is pretty much we are gonna build and implementing above points.\"), mdx(\"p\", null, mdx(\"span\", {\n    parentName: \"p\",\n    \"className\": \"gatsby-resp-image-wrapper\",\n    \"style\": {\n      \"position\": \"relative\",\n      \"display\": \"block\",\n      \"marginLeft\": \"auto\",\n      \"marginRight\": \"auto\",\n      \"maxWidth\": \"1200px\",\n      \"borderRadius\": \"0.5em\",\n      \"overflow\": \"hidden\"\n    }\n  }, \"\\n      \", mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-background-image\",\n    \"style\": {\n      \"paddingBottom\": \"60%\",\n      \"position\": \"relative\",\n      \"bottom\": \"0\",\n      \"left\": \"0\",\n      \"backgroundImage\": \"url('data:image/jpeg;base64,/9j/2wBDABALDA4MChAODQ4SERATGCgaGBYWGDEjJR0oOjM9PDkzODdASFxOQERXRTc4UG1RV19iZ2hnPk1xeXBkeFxlZ2P/2wBDARESEhgVGC8aGi9jQjhCY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2NjY2P/wgARCAAMABQDASIAAhEBAxEB/8QAFgABAQEAAAAAAAAAAAAAAAAAAAEF/8QAFQEBAQAAAAAAAAAAAAAAAAAAAAH/2gAMAwEAAhADEAAAAcUiAv8A/8QAFRABAQAAAAAAAAAAAAAAAAAAEBH/2gAIAQEAAQUCa//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQMBAT8BP//EABQRAQAAAAAAAAAAAAAAAAAAABD/2gAIAQIBAT8BP//EABQQAQAAAAAAAAAAAAAAAAAAACD/2gAIAQEABj8CX//EABoQAAICAwAAAAAAAAAAAAAAAAABEBEhMUH/2gAIAQEAAT8h4NRolSwXH//aAAwDAQACAAMAAAAQxA//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAEDAQE/ED//xAAUEQEAAAAAAAAAAAAAAAAAAAAQ/9oACAECAQE/ED//xAAbEAEBAAIDAQAAAAAAAAAAAAABEQAhEDFBkf/aAAgBAQABPxAKJV90YvcfmJO8bn5Shtu95t4cf//Z')\",\n      \"backgroundSize\": \"cover\",\n      \"display\": \"block\"\n    }\n  }), \"\\n  \", mdx(\"img\", {\n    parentName: \"span\",\n    \"className\": \"gatsby-resp-image-image\",\n    \"alt\": \"Custom checkbox graphics\",\n    \"title\": \"Custom checkbox graphics\",\n    \"src\": \"/static/358897d6c389def97affdac0d70a03fb/e5166/custom-checkbox.jpg\",\n    \"srcSet\": [\"/static/358897d6c389def97affdac0d70a03fb/f93b5/custom-checkbox.jpg 300w\", \"/static/358897d6c389def97affdac0d70a03fb/b4294/custom-checkbox.jpg 600w\", \"/static/358897d6c389def97affdac0d70a03fb/e5166/custom-checkbox.jpg 1200w\", \"/static/358897d6c389def97affdac0d70a03fb/b17f8/custom-checkbox.jpg 1600w\"],\n    \"sizes\": \"(max-width: 1200px) 100vw, 1200px\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"100%\",\n      \"margin\": \"0\",\n      \"verticalAlign\": \"middle\",\n      \"position\": \"absolute\",\n      \"top\": \"0\",\n      \"left\": \"0\"\n    },\n    \"loading\": \"lazy\"\n  }), \"\\n    \")), mdx(\"h2\", {\n    \"id\": \"checkbox-html\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#checkbox-html\",\n    \"aria-label\": \"checkbox html permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Checkbox HTML\"), mdx(\"p\", null, \"Basic markup of single checkbox is pretty much straight forward, \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input[type=\\\"checkbox\\\"]\"), \" followed by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \", and input id is associated with label for attribute using same value. This is all we need in terms of markup.\"), mdx(\"h3\", {\n    \"id\": \"html-code-snippet\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#html-code-snippet\",\n    \"aria-label\": \"html code snippet permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"HTML code snippet\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Single-checkbox\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"html\",\n    \"data-index\": \"0\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox-row\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"input\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"type\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"name\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox_default\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"id\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox_one\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"/>\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"for\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"checkbox_one\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"Checkbox Default\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"div\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))))), mdx(\"h2\", {\n    \"id\": \"checkbox-css\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#checkbox-css\",\n    \"aria-label\": \"checkbox css permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Checkbox CSS\"), mdx(\"p\", null, \"Here we see what modern CSS can do, let\\u2019s go step by step while creating custom checkbox:\"), mdx(\"h3\", {\n    \"id\": \"step-1\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#step-1\",\n    \"aria-label\": \"step 1 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Step 1:\"), mdx(\"p\", null, \"Visually hide \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input[type=checkbox]\"), \" using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"position:absolute\"), \" property. Then take it off screen and using left/right properties.\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Visually-hide-input\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"css\",\n    \"data-index\": \"1\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"position\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"absolute\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"-99999px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"right\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"auto\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))))), mdx(\"h3\", {\n    \"id\": \"step-2\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#step-2\",\n    \"aria-label\": \"step 2 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Step 2:\"), mdx(\"p\", null, \"Create new element using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"+\"), \" adjacent sibling and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"::before\"), \" pseudo properties. Combine checkbox class and pseudo \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<label>\"), \" element.\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Pseudo-and-adjacent-selector\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"css\",\n    \"data-index\": \"2\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" + \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label::before\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"content\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"width\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"28px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"height\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"28px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"position\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"absolute\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"top\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"border\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"2px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"solid\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"#000\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))))), mdx(\"h3\", {\n    \"id\": \"step-3\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#step-3\",\n    \"aria-label\": \"step 3 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Step 3:\"), mdx(\"p\", null, \"At his stage new element is created but things are scattered over places, as \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" element needs to styled. Align label horizontally and vertically using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"display:flex\"), \" properties and adding cursor property as well.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Note:\"), \" Here \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"user-select:none\"), \" is an important aspect, as it will prevent label text selection on check/un-check of checkbox. This is very annoying and leads to accessibility issues.\")), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"label\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"css\",\n    \"data-index\": \"3\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"display\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"flex\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"align-items\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"center\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"cursor\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"pointer\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"padding-left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"46px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"position\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"relative\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"min-height\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"32px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"user-select\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"none\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))))), mdx(\"h3\", {\n    \"id\": \"step-4\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#step-4\",\n    \"aria-label\": \"step 4 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Step 4:\"), mdx(\"p\", null, \"At this last step, tick mark is created using \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border\"), \" and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"transition\"), \" properties on pseudo element \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"::after\"), \". Tick mark visibility is managed by \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"opacity\"), \". And then add \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"background-color\"), \"  and \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"border-color\"), \" to highlight selection.\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Check-uncheck-checkbox\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"css\",\n    \"data-index\": \"4\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox:checked\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" + \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label::after\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"content\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"width\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"6px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"height\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"14px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"position\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"absolute\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"top\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"6px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"13px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"border\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"2px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"solid\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"border-left\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"border-top\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"opacity\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"transform\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk11\"\n  }, \"rotate\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"(\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"45deg\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \");\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"transition\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": opacity \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"0.2s\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"ease-in-out\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"color\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"#fff\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox:checked\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" + \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label::after\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"opacity\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"1\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox:checked\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" + \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label::before\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"background\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"#0f70d2\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"border-color\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"#0f70d2\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))))), mdx(\"h2\", {\n    \"id\": \"focus-style\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#focus-style\",\n    \"aria-label\": \"focus style permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Focus style\"), mdx(\"p\", null, \"Now custom checkboxes are build, let\\u2019s add focus style. It is important as we hide native checkbox which by default has focus. Here similar to step 2, outline styling will be added.\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Focus-outline\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"css\",\n    \"data-index\": \"5\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \".checkbox:focus\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" + \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk6\"\n  }, \"label::before\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" {\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"outline\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"2px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"solid\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"#f5bc0e\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"outline-offset\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \": \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk7\"\n  }, \"4px\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \";\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  }\"))))), mdx(\"p\", null, \"That\\u2019s it, we have developed custom checkboxes and implemented key points mentioned earlier in post. Final code with output can be seen in codesandbox.\"), mdx(\"h2\", {\n    \"id\": \"codesandbox\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#codesandbox\",\n    \"aria-label\": \"codesandbox permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Codesandbox\"), mdx(\"iframe\", {\n    \"src\": \"https://codesandbox.io/embed/custom-accessible-checkbox-tpih1?codemirror=1\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"500px\",\n      \"border\": \"0\",\n      \"borderRadius\": \"4px\",\n      \"overflow\": \"hidden\"\n    },\n    \"allow\": \"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\",\n    \"sandbox\": \"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n  }), mdx(\"h2\", {\n    \"id\": \"conclusion\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#conclusion\",\n    \"aria-label\": \"conclusion permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Conclusion\"), mdx(\"p\", null, \"While there are other ways to do it as well, such as use of image/svg etc\\u2026 You can find many articles explaining it very well, at the end it\\u2019s your choice which works better for you.\"), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Important:\"), \" Do not wrap \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input\"), \" element inside \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" and avoid putting \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" before input element, as it will cause issue in screen readers such as NVDA and Jaws. Specially when error messages are implemented it will create problem using assistive technologies. So stick to \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"input\"), \" then \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"label\"), \" structure.\")), mdx(\"style\", {\n    \"className\": \"grvsc-styles\"\n  }, \"\\n  .grvsc-container {\\n    overflow: auto;\\n    position: relative;\\n    -webkit-overflow-scrolling: touch;\\n    padding-top: 1rem;\\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\\n    padding-bottom: 1rem;\\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\\n    border-radius: 8px;\\n    border-radius: var(--grvsc-border-radius, 8px);\\n    font-feature-settings: normal;\\n    line-height: 1.4;\\n  }\\n  \\n  .grvsc-code {\\n    display: table;\\n  }\\n  \\n  .grvsc-line {\\n    display: table-row;\\n    box-sizing: border-box;\\n    width: 100%;\\n    position: relative;\\n  }\\n  \\n  .grvsc-line > * {\\n    position: relative;\\n  }\\n  \\n  .grvsc-gutter-pad {\\n    display: table-cell;\\n    padding-left: 0.75rem;\\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\\n  }\\n  \\n  .grvsc-gutter {\\n    display: table-cell;\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    user-select: none;\\n  }\\n  \\n  .grvsc-gutter::before {\\n    content: attr(data-content);\\n  }\\n  \\n  .grvsc-source {\\n    display: table-cell;\\n    padding-left: 1.5rem;\\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\\n    padding-right: 1.5rem;\\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\\n  }\\n  \\n  .grvsc-source:empty::after {\\n    content: ' ';\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    user-select: none;\\n  }\\n  \\n  .grvsc-gutter + .grvsc-source {\\n    padding-left: 0.75rem;\\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\\n  }\\n  \\n  /* Line transformer styles */\\n  \\n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\\n    content: ' ';\\n    position: absolute;\\n    width: 100%;\\n  }\\n  \\n  .grvsc-line-diff-add::before {\\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\\n  }\\n  \\n  .grvsc-line-diff-del::before {\\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\\n  }\\n  \\n  .grvsc-line-number {\\n    padding: 0 2px;\\n    text-align: right;\\n    opacity: 0.7;\\n  }\\n  \\n  .default-dark {\\n    background-color: #1E1E1E;\\n    color: #D4D4D4;\\n  }\\n  .default-dark .mtk1 { color: #D4D4D4; }\\n  .default-dark .mtk17 { color: #808080; }\\n  .default-dark .mtk4 { color: #569CD6; }\\n  .default-dark .mtk12 { color: #9CDCFE; }\\n  .default-dark .mtk8 { color: #CE9178; }\\n  .default-dark .mtk6 { color: #D7BA7D; }\\n  .default-dark .mtk7 { color: #B5CEA8; }\\n  .default-dark .mtk11 { color: #DCDCAA; }\\n  .default-dark .grvsc-line-highlighted::before {\\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\\n  }\\n\"));\n}\n;\nMDXContent.isMDXComponent = true;"},{"frontmatter":{"title":"CSS Grid and Accessibility","slug":"/css-grid-accessibility/","date":"November 4, 2019","tags":["CSS Grid","Accessibility"],"showToc":true,"cover":{"source":"Vecteezy","url":"https://www.vecteezy.com/vector-art/273771-flat-orange-abstract-vector-background","caption":null,"img":{"alt":"grid","sharp":null,"src":"/static/ff4b2a4b6439bfdd9fa44d2a1d7674cd/grid.svg","dataURI":null}}},"timeToRead":2,"excerpt":"Introduction of CSS Grid Layout is the best addition in modern css, it help us build more complex layout designs using a…","body":"function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"CSS Grid and Accessibility\",\n  \"slug\": \"/css-grid-accessibility/\",\n  \"date\": \"2019-11-04T00:00:00.000Z\",\n  \"cover\": {\n    \"img\": \"grid.svg\",\n    \"source\": \"Vecteezy\",\n    \"url\": \"https://www.vecteezy.com/vector-art/273771-flat-orange-abstract-vector-background\"\n  },\n  \"tags\": [\"CSS Grid\", \"Accessibility\"],\n  \"showToc\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, [\"components\"]);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", null, \"Introduction of CSS Grid Layout is the best addition in modern css, it help us build more complex layout designs using a two-dimensional way, using both rows and columns.\"), mdx(\"p\", null, \"While it solves complex layout design and opens new path for implementing any sort of design layouts across devices (laptop, large desktop, tablet, phone, phablet etc\\u2026). But at the same time incorrect implementation leads to accessibility issues for keyboard users and screen readers. Let\\u2019s dive straight into it.\"), mdx(\"h2\", {\n    \"id\": \"visual-vs-logical-reordering\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#visual-vs-logical-reordering\",\n    \"aria-label\": \"visual vs logical reordering permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Visual vs. Logical Reordering\"), mdx(\"p\", null, \"While CSS Grid enables reordering of content in various ways, but it should only be used for visual, not logical reordering of content. Here is an example of simple grid consist of 2 rows and 3 columns, both have common markup but different output based on styling:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"First one is correct order of grid\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"While second is tweaked with grid-row property\")), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"These columns have link, so visually user will see \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"4th link in 1st row\"), \", but screen readers and keyboard user will encounter problem, as tabbing will jump to \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"3rd link in 2nd row\"), \" then back to \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"4th link on 1st row\"), \".\")), mdx(\"h3\", {\n    \"id\": \"solution\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#solution\",\n    \"aria-label\": \"solution permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Solution\"), mdx(\"p\", null, \"Well solution is simple and elegant, just move 4th link in markup after 2nd and it will not be an issue any more. Below you can see code in action as well:\"), mdx(\"h3\", {\n    \"id\": \"codesandbox\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#codesandbox\",\n    \"aria-label\": \"codesandbox permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Codesandbox\"), mdx(\"iframe\", {\n    \"src\": \"https://codesandbox.io/embed/css-grid-ck85m?codemirror=1\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"500px\",\n      \"border\": \"0\",\n      \"borderRadius\": \"4px\",\n      \"overflow\": \"hidden\"\n    },\n    \"allow\": \"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\",\n    \"sandbox\": \"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n  }), mdx(\"h2\", {\n    \"id\": \"flat-markup-vs-semantic-markup\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h2\",\n    \"href\": \"#flat-markup-vs-semantic-markup\",\n    \"aria-label\": \"flat markup vs semantic markup permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Flat markup vs. Semantic markup\"), mdx(\"p\", null, \"Well CSS Grid solves lot of problems, but one should be extra careful while writing markup. To create a grid all items should be direct child of container, any items which are not direct child will not inherit \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"display: grid\"), \" property.\"), mdx(\"p\", null, \"So what happens next is, when some developer wants to create grid structure there may need arise to flatten out markup for whatever reason but it will break semantic meaning of layout and leads to accessibility issues. Let\\u2019s take a classic example of \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"header\"), \" layout consist of \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"logo and navigation\"), \" links.\"), mdx(\"p\", null, \"Below are the sample code snippets of flatten markup and semantic markup\"), mdx(\"h3\", {\n    \"id\": \"code-snippets\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#code-snippets\",\n    \"aria-label\": \"code snippets permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Code Snippets\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Flatten-Markup\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"html\",\n    \"data-index\": \"0\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"header\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"grid-container\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"#\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"logo\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"      \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"img\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"https://logoipsum.com/logo/logo-10.svg\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"#\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"nav-link\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"Home\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"#\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"nav-link\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"About\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"#\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"nav-link\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"Services\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"#\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"nav-link\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"Contact\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"header\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))))), mdx(\"h3\", {\n    \"id\": \"lost-semantic\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#lost-semantic\",\n    \"aria-label\": \"lost semantic permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Lost semantic\"), mdx(\"p\", null, \"Here comes the real issue with flatten markup and it will cause huge inconvenience to screen reader users, as there is no to communicate presence of navigation in it. It will announce flat links in header.\"), mdx(\"h3\", {\n    \"id\": \"the-correct-approach\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#the-correct-approach\",\n    \"aria-label\": \"the correct approach permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"The correct approach\"), mdx(\"p\", null, \"Using right semantic structure, we can achieve desired output as well as make things easier for screen reader users. Below markup in snippet is slightly different from above with right native HTML tags. Now screen reader will announce navigation with multiple list items of links.\"), mdx(\"div\", {\n    \"className\": \"gatsby-code-title\"\n  }, \"Semantic-Markup\"), mdx(\"pre\", {\n    \"className\": \"grvsc-container default-dark\",\n    \"data-language\": \"html\",\n    \"data-index\": \"1\"\n  }, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"grvsc-code\"\n  }, mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"header\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"grid-container grid-container-semantic\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"  grid-container--three\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"#\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"logo\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"      \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"img\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"src\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"https://logoipsum.com/logo/logo-10.svg\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"nav\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"top-nav top-nav--semantic\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"      \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"ul\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"        \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"><\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"#\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"nav-link\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"Home\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"></\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"        \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"><\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"#\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"nav-link\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"About\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"></\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"        \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"><\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"#\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"nav-link\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"Services\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"></\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"        \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"<\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"><\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"href\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"#\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \" \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk12\"\n  }, \"class\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"=\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk8\"\n  }, \"\\\"nav-link\\\"\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"Contact\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"a\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"></\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"li\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"      \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"ul\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"    \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"nav\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))), \"\\n\", mdx(\"span\", {\n    parentName: \"code\",\n    \"className\": \"grvsc-line\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"grvsc-source\"\n  }, mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk1\"\n  }, \"  \"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \"</\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk4\"\n  }, \"header\"), mdx(\"span\", {\n    parentName: \"span\",\n    \"className\": \"mtk17\"\n  }, \">\"))))), mdx(\"p\", null, \"You can see how both markup are slightly different, but desired output can be achieved using CSS Grid. See it in action:\"), mdx(\"h3\", {\n    \"id\": \"codesandbox-1\",\n    \"style\": {\n      \"position\": \"relative\"\n    }\n  }, mdx(\"a\", {\n    parentName: \"h3\",\n    \"href\": \"#codesandbox-1\",\n    \"aria-label\": \"codesandbox 1 permalink\",\n    \"className\": \"anchor before\"\n  }, mdx(\"svg\", {\n    parentName: \"a\",\n    \"aria-hidden\": \"true\",\n    \"focusable\": \"false\",\n    \"height\": \"16\",\n    \"version\": \"1.1\",\n    \"viewBox\": \"0 0 16 16\",\n    \"width\": \"16\"\n  }, mdx(\"path\", {\n    parentName: \"svg\",\n    \"fillRule\": \"evenodd\",\n    \"d\": \"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"\n  }))), \"Codesandbox\"), mdx(\"iframe\", {\n    \"src\": \"https://codesandbox.io/embed/css-grid-faltten-19s7d\",\n    \"style\": {\n      \"width\": \"100%\",\n      \"height\": \"500px\",\n      \"border\": \"0\",\n      \"borderRadius\": \"4px\",\n      \"overflow\": \"hidden\"\n    },\n    \"allow\": \"accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking\",\n    \"sandbox\": \"allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts\"\n  }), mdx(\"blockquote\", null, mdx(\"p\", {\n    parentName: \"blockquote\"\n  }, \"So, note to self always use semantic markup over flatten markup, though later one saves your time or say it will double your work, once you think of accessibility and decides to re-write it.\")), mdx(\"style\", {\n    \"className\": \"grvsc-styles\"\n  }, \"\\n  .grvsc-container {\\n    overflow: auto;\\n    position: relative;\\n    -webkit-overflow-scrolling: touch;\\n    padding-top: 1rem;\\n    padding-top: var(--grvsc-padding-top, var(--grvsc-padding-v, 1rem));\\n    padding-bottom: 1rem;\\n    padding-bottom: var(--grvsc-padding-bottom, var(--grvsc-padding-v, 1rem));\\n    border-radius: 8px;\\n    border-radius: var(--grvsc-border-radius, 8px);\\n    font-feature-settings: normal;\\n    line-height: 1.4;\\n  }\\n  \\n  .grvsc-code {\\n    display: table;\\n  }\\n  \\n  .grvsc-line {\\n    display: table-row;\\n    box-sizing: border-box;\\n    width: 100%;\\n    position: relative;\\n  }\\n  \\n  .grvsc-line > * {\\n    position: relative;\\n  }\\n  \\n  .grvsc-gutter-pad {\\n    display: table-cell;\\n    padding-left: 0.75rem;\\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\\n  }\\n  \\n  .grvsc-gutter {\\n    display: table-cell;\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    user-select: none;\\n  }\\n  \\n  .grvsc-gutter::before {\\n    content: attr(data-content);\\n  }\\n  \\n  .grvsc-source {\\n    display: table-cell;\\n    padding-left: 1.5rem;\\n    padding-left: var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem));\\n    padding-right: 1.5rem;\\n    padding-right: var(--grvsc-padding-right, var(--grvsc-padding-h, 1.5rem));\\n  }\\n  \\n  .grvsc-source:empty::after {\\n    content: ' ';\\n    -webkit-user-select: none;\\n    -moz-user-select: none;\\n    user-select: none;\\n  }\\n  \\n  .grvsc-gutter + .grvsc-source {\\n    padding-left: 0.75rem;\\n    padding-left: calc(var(--grvsc-padding-left, var(--grvsc-padding-h, 1.5rem)) / 2);\\n  }\\n  \\n  /* Line transformer styles */\\n  \\n  .grvsc-has-line-highlighting > .grvsc-code > .grvsc-line::before {\\n    content: ' ';\\n    position: absolute;\\n    width: 100%;\\n  }\\n  \\n  .grvsc-line-diff-add::before {\\n    background-color: var(--grvsc-line-diff-add-background-color, rgba(0, 255, 60, 0.2));\\n  }\\n  \\n  .grvsc-line-diff-del::before {\\n    background-color: var(--grvsc-line-diff-del-background-color, rgba(255, 0, 20, 0.2));\\n  }\\n  \\n  .grvsc-line-number {\\n    padding: 0 2px;\\n    text-align: right;\\n    opacity: 0.7;\\n  }\\n  \\n  .default-dark {\\n    background-color: #1E1E1E;\\n    color: #D4D4D4;\\n  }\\n  .default-dark .mtk1 { color: #D4D4D4; }\\n  .default-dark .mtk17 { color: #808080; }\\n  .default-dark .mtk4 { color: #569CD6; }\\n  .default-dark .mtk12 { color: #9CDCFE; }\\n  .default-dark .mtk8 { color: #CE9178; }\\n  .default-dark .grvsc-line-highlighted::before {\\n    background-color: var(--grvsc-line-highlighted-background-color, rgba(255, 255, 255, 0.1));\\n    box-shadow: inset var(--grvsc-line-highlighted-border-width, 4px) 0 0 0 var(--grvsc-line-highlighted-border-color, rgba(255, 255, 255, 0.5));\\n  }\\n\"));\n}\n;\nMDXContent.isMDXComponent = true;"}],"tags":[{"title":"Accessibility","count":3},{"title":"CSS Architecture","count":2},{"title":"CSS Grid","count":1},{"title":"CSS-in-JS","count":1},{"title":"Form Design","count":2},{"title":"SASS","count":1},{"title":"Usability","count":1}]},"img":null},"pageContext":{}},"staticQueryHashes":["2859407348","2882470331","3465932315","4145165279"]}