{
    "componentChunkName": "component---src-templates-post-jsx",
    "path": "/blog/atomic-design-ui",
    "result": {"data":{"post":{"id":"4a9b550b-5e3d-561b-84c0-231211efb5e9","body":"var _excluded = [\"components\"];\nfunction _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }\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; }\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/* @jsxRuntime classic */\n/* @jsx mdx */\n\nvar _frontmatter = {\n  \"title\": \"Atomic Design UI\",\n  \"slug\": \"/atomic-design-ui\",\n  \"description\": \"A modern and refined user-interface for Atom\",\n  \"date\": \"2016-09-18T00:00:00.000Z\",\n  \"category\": \"Design\",\n  \"image\": \"./img/atomic-design.png\",\n  \"header\": \"https://cloud.githubusercontent.com/assets/16360374/22689194/ab4e61f4-ece4-11e6-8732-b613ffaeb2e7.png\",\n  \"repo\": \"Atomic-Design-UI\",\n  \"tags\": [\"atom\", \"design\", \"ui design\", \"tools\", \"projects\"],\n  \"published\": true\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"p\", {\n    \"className\": \"badges flex\"\n  }, \"\\n\\t\", mdx(\"a\", {\n    parentName: \"p\",\n    \"className\": \"pr-3\",\n    \"href\": \"https://atom.io/themes/atomic-design-ui\"\n  }, \"\\n\\t\\t\", mdx(\"img\", {\n    parentName: \"a\",\n    \"src\": \"https://img.shields.io/apm/v/atomic-design-ui.svg?\",\n    \"height\": 20,\n    \"alt\": \"version\",\n    \"title\": \"Version\"\n  }), \"\\n\\t\"), \"\\n\\t\", mdx(\"a\", {\n    parentName: \"p\",\n    \"className\": \"pr-3\",\n    \"href\": \"https://opensource.org/licenses/MIT\"\n  }, \"\\n\\t\\t\", mdx(\"img\", {\n    parentName: \"a\",\n    \"src\": \"https://img.shields.io/apm/l/atomic-design-ui.svg?\",\n    \"height\": 20,\n    \"alt\": \"license\",\n    \"title\": \"License\"\n  }), \"\\n\\t\"), \"\\n  \", mdx(\"a\", {\n    parentName: \"p\",\n    \"className\": \"pr-3\",\n    \"href\": \"https://atom.io/themes/atomic-design-ui\"\n  }, \"\\n    \", mdx(\"img\", {\n    parentName: \"a\",\n    \"src\": \"https://img.shields.io/apm/dm/atomic-design-ui.svg?maxAge=2592000?\",\n    \"height\": 20,\n    \"alt\": \"downloads\",\n    \"title\": \"Downloads\"\n  }), \"\\n  \"), \"\\n\\t\", mdx(\"a\", {\n    parentName: \"p\",\n    \"className\": \"pr-3\",\n    \"href\": \"https://atom.io/themes/atomic-design-ui\"\n  }, \"\\n\\t\\t\", mdx(\"img\", {\n    parentName: \"a\",\n    \"src\": \"https://badges.frapsoft.com/os/v1/open-source.svg?v=103\",\n    \"height\": 20,\n    \"alt\": \"open source\",\n    \"title\": \"Open Source\"\n  }), \"\\n\\t\"), \"\\n\"), mdx(\"p\", {\n    \"align\": \"center\"\n  }, \"\\n  \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://user-images.githubusercontent.com/16360374/59972362-78e27d00-9542-11e9-8a51-2bf0ce345661.png\",\n    \"alt\": \"preview\",\n    \"title\": \"Preview\",\n    \"width\": 950\n  }), \"\\n\"), mdx(\"h2\", null, \"Description\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Atomic Design\"), \" aims to provide a modern and refined interface to compliment any dark syntax-theme.\", \" In addition, this theme also includes a custom icon set and improved integration of some of the most popular \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://atom.io/packages\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Atom packages\"), \".\\nThe screenshot above features the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://atom.io/themes/atomic-monokai-pro-syntax\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Atomic Monokai Pro\")), \" syntax-theme and the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, mdx(\"a\", {\n    parentName: \"em\",\n    \"href\": \"https://www.typography.com/fonts/operator/styles/\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Operator Mono\")), \" font.\"), mdx(\"p\", null, mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"In Progress:\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Experimenting with functionalities to improve adaptability.\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Adding improved integration for common packages.\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Features\"), mdx(\"h3\", null, \"Dark Refined Interface\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Atomic Design\"), \" features a carefully selected color\", \"\\u2013\", \"palette and meticulously styled components, which provides the interface with a sense of depth, receptiveness, and adaptability. Allowing this theme to be wonderfully complimented by any dark syntax theme.\"), mdx(\"h3\", null, \"Package Styling\"), mdx(\"p\", null, \"This UI\", \"\\u2013\", \"theme includes supplementary styling for an expanding collection of popular Atom packages, providing the same refined interface to all aspects of the user experience.\"), mdx(\"h3\", null, \"Custom Icon Set\"), mdx(\"p\", null, mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Atomic Design\"), \" also features a custom icon set, which aims to integrate distinct custom icons with the best aspects of popular icon packages to provide improved visual\", \"\\u2013\", \"grepping of project files, while also preventing the alignment issues that plague many icon package and theme combinations.\"), mdx(\"h3\", null, \"Modular Theme-Settings\"), mdx(\"p\", null, \"This UI\", \"\\u2013\", \"theme includes custom settings, which allow users to fine\", \"\\u2013\", \"tune various aspects of the interface to suit their preference. These settings are accessible via the \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://cloud.githubusercontent.com/assets/16360374/22728369/572ca3fc-ed92-11e6-8f35-5f1da6078b4f.png\",\n    \"className\": \"inline-flex bg-opacity-80 max-w-8 h-6 mx-0\",\n    \"height\": 23,\n    \"alt\": \"settings\"\n  }), \" button, once the theme is enabled.\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Install\"), mdx(\"p\", null, \"This package is distributed via \", mdx(\"em\", {\n    parentName: \"p\"\n  }, mdx(\"a\", {\n    parentName: \"em\",\n    \"href\": \"https://atom.io/themes\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"apm\")), \". After \", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://github.com/atom/apm#installing\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"installing apm\"), \", you can install the UI\", \"\\u2013\", \"theme with this command.\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-bash\"\n  }, \"$ apm install atomic-design-ui\\n\")), mdx(\"p\", null, \"After installation, the theme can be activated by going to the \", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"Themes\"), \" section in the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"Settings\"), \" view and selecting it from the \", mdx(\"em\", {\n    parentName: \"p\"\n  }, \"UI Theme\"), \" drop-down menu.\"), mdx(\"hr\", null), mdx(\"h2\", null, \"Settings:\"), mdx(\"p\", null, \"Once selected, you can select the  \", mdx(\"img\", {\n    parentName: \"p\",\n    \"src\": \"https://cloud.githubusercontent.com/assets/16360374/21959455/1719f490-da7d-11e6-9137-65089a686d52.png\",\n    \"className\": \"inline-flex bg-opacity-80 max-w-8 h-6 mx-0\",\n    \"height\": 18,\n    \"alt\": \"settings\",\n    \"title\": \"Settings\"\n  }), \"  icon to access the modular aspects of the theme, including:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Adaptive Tabs\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Light/Dark Tree-view\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"Custom Icons\")), mdx(\"hr\", null), mdx(\"h2\", null, \"Screenshots\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://cloud.githubusercontent.com/assets/16360374/18231369/234c6126-726d-11e6-8858-d9ed8df8e7e3.png\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Java\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://cloud.githubusercontent.com/assets/16360374/18231558/6cba7498-7271-11e6-9575-d4448e5910d5.png\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"HTML\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://cloud.githubusercontent.com/assets/16360374/18231352/9642c068-726c-11e6-857a-7e3d76293f88.png\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Markdown\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, mdx(\"a\", {\n    parentName: \"strong\",\n    \"href\": \"https://cloud.githubusercontent.com/assets/16360374/18231373/3048eb88-726d-11e6-9ae8-a87e24c11f67.png\",\n    \"target\": \"_blank\",\n    \"rel\": \"nofollow noopener noreferrer\"\n  }, \"Settings-View\")))));\n}\n;\nMDXContent.isMDXComponent = true;","fields":{"slug":"/atomic-design-ui"},"frontmatter":{"title":"Atomic Design UI","description":"A modern and refined user-interface for Atom","date":"18 September 2016","category":"Design","image":{"childImageSharp":{"gatsbyImageData":{"layout":"fullWidth","backgroundColor":"#282838","images":{"fallback":{"src":"/static/8634ee51da26b6dc32f757237b02a97e/d6daf/atomic-design.png","srcSet":"/static/8634ee51da26b6dc32f757237b02a97e/5381b/atomic-design.png 750w,\n/static/8634ee51da26b6dc32f757237b02a97e/d6daf/atomic-design.png 800w","sizes":"100vw"},"sources":[{"srcSet":"/static/8634ee51da26b6dc32f757237b02a97e/dd23a/atomic-design.webp 750w,\n/static/8634ee51da26b6dc32f757237b02a97e/09c54/atomic-design.webp 800w","type":"image/webp","sizes":"100vw"}]},"width":1,"height":0.42125}}}}},"avatar":{"childImageSharp":{"gatsbyImageData":{"layout":"constrained","backgroundColor":"#f8f8f8","images":{"fallback":{"src":"/static/b24b72d8f366da7af02542a735d82fa0/f9edd/me.jpg","srcSet":"/static/b24b72d8f366da7af02542a735d82fa0/93848/me.jpg 60w,\n/static/b24b72d8f366da7af02542a735d82fa0/73bb6/me.jpg 120w,\n/static/b24b72d8f366da7af02542a735d82fa0/f9edd/me.jpg 240w,\n/static/b24b72d8f366da7af02542a735d82fa0/97a19/me.jpg 480w","sizes":"(min-width: 240px) 240px, 100vw"},"sources":[{"srcSet":"/static/b24b72d8f366da7af02542a735d82fa0/927d1/me.webp 60w,\n/static/b24b72d8f366da7af02542a735d82fa0/507b0/me.webp 120w,\n/static/b24b72d8f366da7af02542a735d82fa0/8d565/me.webp 240w,\n/static/b24b72d8f366da7af02542a735d82fa0/21b1a/me.webp 480w","type":"image/webp","sizes":"(min-width: 240px) 240px, 100vw"}]},"width":240,"height":240}}}},"pageContext":{"slug":"/atomic-design-ui"}},
    "staticQueryHashes": []}