1"use strict";(self.webpackChunkvarya_me=self.webpackChunkvarya_me||[]).push([[7661],{7705:function(e,t,n){n.r(t),n.d(t,{default:function(){return v}});var a=n(8453),r=n(6540);function s(e){const t=Object.assign({h2:"h2",a:"a",span:"span",p:"p"},(0,a.RP)(),e.components);return r.createElement(r.Fragment,null,r.createElement(t.h2,{id:"components-publications",style:{position:"relative"}},r.createElement(t.a,{href:"#components-publications","aria-label":"components publications permalink",className:"anchor before"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" 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"></path></svg>'}})),"@components publications"),"\n",r.createElement(t.p,null,'"@components publications" is a collection of articles, tutorials, and resources about design systems by EightShapes. It aims to provide a complete guide for anyone looking to establish and maintain a design system. The topics covered in the publications range from the basics of design systems to more advanced aspects such as team formation, governance and strategy creation. The publications cover everything that one needs to know to start a design system and make it successful. Whether you are a newbie to design systems or an experienced design system designer, developer or manager, this collection of publications will provide you with in-depth understanding of various aspects of design systems.'),"\n",r.createElement(t.p,null,r.createElement(t.a,{href:"https://eightshapes.com/components/"},"https://eightshapes.com/components/")," by ",r.createElement(t.a,{href:"https://eightshapes.com/nathan-curtis/"},"Nathan Curtis")),"\n",r.createElement(t.h2,{id:"the-component-gallery",style:{position:"relative"}},r.createElement(t.a,{href:"#the-component-gallery","aria-label":"the component gallery permalink",className:"anchor before"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" 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"></path></svg>'}})),"The Component Gallery"),"\n",r.createElement(t.p,null,'The Component Gallery is designed to serve as a reference for anyone building component-based user interfaces. The components in the gallery are not intended to be ready-made solutions, but rather inspiration for designers and developers to create their own solutions for the problems they are working to solve. The concept for this site comes from the 1977 book "A Pattern Language" which describes over 250 patterns for the physical world, but this site adapts this idea to the web, focusing on design patterns commonly referred to as "components".'),"\n",r.createElement(t.p,null,r.createElement(t.a,{href:"https://component.gallery/"},"https://component.gallery/")," by ",r.createElement(t.a,{href:"https://twitter.com/iainmbean"},"Iain Bean")),"\n",r.createElement(t.h2,{id:"wallace-css-analyzer",style:{position:"relative"}},r.createElement(t.a,{href:"#wallace-css-analyzer","aria-label":"wallace css analyzer permalink",className:"anchor before"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" 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"></path></svg>'}})),"Wallace CSS Analyzer"),"\n",r.createElement(t.p,null,"The Wallace CSS Analyzer is a powerful tool for analyzing production CSS. It is designed to provide developers and designers with insights into their CSS over a longer period of time, making it a valuable resource for keeping track of changes and identifying potential issues. The tool is visually appealing with its report generation, providing information such as the usage of units and colors. Wallace was created in response to the limitations of other CSS analyzers which only provide a one-time analysis. This tool provides developers and designers a way to keep track of complexicity of their CSS and ensuring that the colors and fonts are being used as intended. Its a great tool for keeping your co
1debase maintainable and clean."),"\n",r.createElement(t.p,null,r.createElement(t.a,{href:"https://www.projectwallace.com/analyze-css"},"https://www.projectwallace.com/analyze-css")," by ",r.createElement(t.a,{href:"https://twitter.com/bartveneman"},"Bart Veneman")),"\n",r.createElement(t.h2,{id:"the-design-system-guide",style:{position:"relative"}},r.createElement(t.a,{href:"#the-design-system-guide","aria-label":"the design system guide permalink",className:"anchor before"},r.createElement(t.span,{dangerouslySetInnerHTML:{__html:'<svg aria-hidden="true" focusable="false" height="16" version="1.1" viewBox="0 0 16 16" width="16"><path fill-rule="evenodd" 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"></path></svg>'}})),"The Design System Guide"),"\n",r.createElement(t.p,null,"The step-by-step guideline on how to set up your own design system and make your process more consistent, organized, and efficient. The book guides you through doing a complete design audit, by showing how to gather all branding and design materials, click through all User Interfaces, take screenshots and record user flows, it also suggests starting with the most commonly used components and foundations, and defining what you want your final design system to include, Not all design systems are created equal, but the guide will help you to adapt the process to your needs."),"\n",r.createElement(t.p,null,r.createElement(t.a,{href:"https://thedesignsystem.guide/"},"https://thedesignsystem.guide/")," by ",r.createElement(t.a,{href:"https://www.linkedin.com/in/rominakavcic/"},"Romina Kavcic")),"\n",r.createElement("div",{Style:"text-align: right;"},r.createElement("small",null,r.createElement(t.p,null,"Cover photo by ",r.createElement("a",{href:"https://unsplash.com/@venczakjanos?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"},"János Venczák")," on ",r.createElement("a",{href:"https://unsplash.com/s/photos/treasure?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText"},"Unsplash")))))}var o=function(e={}){const{wrapper:t}=Object.assign({},(0,a.RP)(),e.components);return t?r.createElement(t,e,r.createElement(s,e)):s(e)},i=n(5556),l=n.n(i),c=n(3433),m=n(9868),h=n(7037),d=n(3928),u=n(4449);const p={Box:c.a,Button:m.$,Text:h.E,Heading:d.DZ,Paragraph:d.fz,PatternJourney:d.Rl,PureHtml:d.Qi,Section:d.wn,Hero:d.lq,Widget:d.x0,PatternJourney:d.Rl,WidgetContainer:d.uM,Workshop:d.cR,ProjectRoles:d.JV,DsAspects:d.nD,Link:d.N_,Image:d._V,ImageBlock:d.Dq,Map:d.T5,YandexImage:d.zX,Instagram:d.pd},g=e=>({children:t})=>r.createElement(d.DZ,{level:e},t),f={h1:g(1),h2:g(2),h3:g(3),h4:g(4),h5:g(5),h6:g(6),p:({children:e})=>r.createElement(d.fz,{standout:!0},e),a:d.N_,ul:d.Ul,ol:d.Ol,div:({"data-excerpt":e,children:t,...n})=>e?r.createElement(d.fz,{as:"div",lead:!0},t):r.createElement("div",n,t)};f.h1.propTypes={children:l().node};const y=({data:{mdx:e,site:{siteMetadata:{siteUrl:t}}},children:n,pageContext:{next:s,prev:o,fileSourceUrl:i}})=>{const{readingTime:l,slug:m,disqusIdentifier:h}=e.fields,{date:g,title:y,subTitle:v,cover:b,tumblr:w}=e.frontmatter,E=e.frontmatter.tags&&e.frontmatter.tags.split(","),S=m.startsWith("blog/");return e?r.createElement(d.PE,null,r.createElement(d.I0,{imageUrl:b&&b.childImageSharp.gatsbyImageData.images.fallback.src,tags:E,date:g,readingTime:S&&parseInt(l.minutes)>0?`${Math.round(l.minutes).toFixed(1)} min read`:null,title:y,subTitle:v}),r.createElement(d.G$,{data:e}),r.createElement(c.a,{flex:"grow",width:"xlarge",margin:{horizontal:"auto"},pad:"medium",direction:"column"},r.createElement(a.xA,{components:{...f,...p}},n),r.createElement(c.a,{direction:"row",fill:"horizontal",justify:"center",margin:{bottom:"auto"},pad:{vertical:"medium"}},E&&E.length>0&&E.map(e=>r.createElement(d.vw,{key:e,name:e.trim(),slug:(0,u.fX)(e),margin:"xsmall"}))),S&&r.createElement(r.Fragment,null,r.createElement(d.WB,{flex:!1,prevSlug:o&&`/${o.fields.slug}`,nextSlug:s&&`/${s.fields.slug}`,prevTitle:o&&o.frontmatter.title,nextTitle:s&&s.frontmatter.title,pad:{vertical:"medium"}}),r.createElement(d.Sn,{link:i}),r.createElement(d.Hw,{slug:m,title:y,disqusIdentifier:h,tumblr:w,siteUrl:t})))):null};function v(e){return r.createElement(y,e,r.createElement(o,e))}},8453:function(e,t,n){n.d(t,{RP:function(){return s},xA:function(){return i}});var a=n(6540);const r=a.createContext({});function s(e){const t=a.useContext(r);return a.useMemo(()=>"function"==typeof e?e(t):{...t,...e},[t,e])}const o={};function i({components:e,children:t,disableParentContext:n}){let i;return i=n?"function"==typeof e?e({}):e||o:s(e),a.createElement(r.Provider,{value:i},t)}}}]); 2//# sourceMappingURL=component---src-templates-post-js-content-file-path-content-design-systems-gems-index-md-c080b3ecb69b603074e4.js.map
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.