├── README.md ├── about-components.md ├── css-architecture.md ├── design-process.md ├── mindset-and-motivations.md ├── styleguides-and-pattern-libraries.md └── workflow.md /README.md: -------------------------------------------------------------------------------- 1 | # Modular User Interface Directory 2 | 3 | ## About 4 | This directory is a set of references on new perspectives and approaches for building user interfaces and design systems. It covers the motivations behind this mindset, as well as ways to achieving it on design and front-end workflows. You'll find several articles, tools, methodologies and techniques written by awesome people from the Web community. I hope that they inspire you as they inspired me. 5 | 6 | Please, feel free to collaborate by opening [pull requests](https://github.com/modular-ui/modular-ui-directory/pulls) – with new links or other section/topic ideas, for example – or creating [issues](https://github.com/modular-ui/modular-ui-directory/issues) with suggestions. 7 | 8 | > Related subjects: components (a.k.a. modules, blocks, objects, patterns), design systems, atomic design, modularity, user interfaces, css architecture, css guidelines, front-end design, front-end architecture, ui development, content structure visual design deliverables, design process, designing in the browser, styleguide-driven development, pattern libraries, living styleguides, responsive workflow, design/development collaboration... 9 | 10 |
11 | 12 | ## Sections 13 | 14 | #### [1) Mindset and Motivations](mindset-and-motivations.md) 15 | #### [2) About Components](about-components.md) 16 | #### [3) Workflow](workflow.md) 17 | #### [4) Design Process](design-process.md) 18 | #### [5) CSS Architecture](css-architecture.md) 19 | #### [6) Styleguides and Pattern Libraries](styleguides-and-pattern-libraries.md) 20 | 21 |
22 | -- 23 | 24 | *Curated by [Thiago Victorino](https://github.com/tfvictorino) with help from [Ítalo Mendonça](http://www.italomen.com.br/).* 25 | -------------------------------------------------------------------------------- /about-components.md: -------------------------------------------------------------------------------- 1 | ## 2) About Components 2 | 3 | ### General Concept 4 | - https://medium.com/eightshapes-llc/picking-parts-products-people-a06721e81742#.3o1oltiqb 5 | 6 | #### Naming Components 7 | - http://danielmall.com/articles/content-display-patterns/ 8 | - http://seesparkbox.com/foundry/naming_css_stuff_is_really_hard 9 | 10 | #### Reviewing Components 11 | - http://product.voxmedia.com/2016/4/20/11458814/how-designers-can-use-unit-testing-to-build-resilient-and-happy-design-systems 12 | 13 | 14 |
15 | 16 | 17 | ### References 18 | #### Common UI Patterns 19 | - http://codepen.io/patterns/ 20 | - http://blog.cloudfour.com/common-patterns/ 21 | 22 | #### UI Kits 23 | - http://semantic-ui.com/ 24 | - http://getuikit.com/ 25 | - http://getbootstrap.com/ 26 | - http://foundation.zurb.com/ 27 | 28 | 29 |
30 | ___ 31 | 32 | #### Sections 33 | [Summary](README.md) • [Mindset and Motivations](mindset-and-motivations.md) • **About Components** • [Workflow](workflow.md) • [Design Process](design-process.md) • [CSS Architecture](css-architecture.md) • [Styleguides and Pattern Libraries](styleguides-and-pattern-libraries.md) 34 | -------------------------------------------------------------------------------- /css-architecture.md: -------------------------------------------------------------------------------- 1 | ## 5) CSS Architecture 2 | 3 | **People to keep an eye on:** [Harry Roberts](http://csswizardry.com/) • [Jonathan Snook](http://snook.ca/) • [Mark Otto](http://markdotto.com/) 4 | **Other lists to keep an eye on:** [Scalable CSS Reading List](https://github.com/davidtheclark/scalable-css-reading-list) • [Awesome CSS](https://github.com/sotayamashita/awesome-css) 5 | 6 | 7 |
8 | 9 | 10 | ### General Concept 11 | - http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ 12 | - http://philipwalton.com/articles/css-architecture/ 13 | - http://www.sitepoint.com/series/css-architectures/ 14 | - http://engineering.appfolio.com/2012/11/16/css-architecture/ 15 | - [pt-br] https://medium.com/@shankarcabus/css-escalavel-parte-1-41e7e863799e 16 | - [pt-br] https://medium.com/@shankarcabus/css-escalavel-parte-2-acb9f0144c9d 17 | - [pt-br] https://medium.com/@shankarcabus/css-escalavel-parte-3-b970ae49acb7 18 | - [pt-br] https://medium.com/@shankarcabus/css-escalavel-parte-final-ff845a62ec4a 19 | - http://drewbarontini.com/articles/everything-is-a-module/ 20 | - https://speakerdeck.com/sugarenia/xxlcss-how-to-scale-css-and-keep-your-sanity 21 | - https://www.ckl.io/blog/css-architecture-first-steps/ 22 | - https://blog.prototypr.io/evolving-product-css-from-dinosaur-to-juicy-snake-4e4392fce8e8 23 | - http://bradfrost.com/blog/post/css-architecture-for-design-systems/ 24 | - https://seesparkbox.com/foundry/thoughtful_css_architecture 25 | 26 | #### Specific concepts 27 | - https://speakerdeck.com/csswizardry/css-for-software-engineers-for-css-developers 28 | - http://blog.millermedeiros.com/solid-css/ 29 | - http://drewbarontini.com/articles/single-responsibility/ 30 | - http://csswizardry.com/2015/06/contextual-styling-ui-components-nesting-and-implementation-detail/ 31 | - http://csswizardry.com/2015/04/cyclomatic-complexity-logic-in-css/ 32 | - http://csswizardry.com/2015/03/immutable-css/ 33 | 34 | #### Counterpoints 35 | - http://snugug.com/musings/css-strategy 36 | - http://www.kapowaz.net/articles/cargo-cult-css 37 | - http://mrmrs.io/writing/2016/03/24/scalable-css/ 38 | - http://alistapart.com/article/meaningful-css-style-like-you-mean-it 39 | 40 | 41 |
42 | 43 | 44 | ### Methodologies 45 | - http://sixrevisions.com/css/css-methodologies/ 46 | - http://clubmate.fi/oocss-acss-bem-smacss-what-are-they-what-should-i-use/ 47 | - http://www.sitepoint.com/atomic-oobemitscss/ 48 | - http://viget.com/inspire/css-squareoff 49 | - [pt-br] https://speakerdeck.com/rafaelrinaldi/arquitetura-css 50 | - [pt-br] http://tableless.com.br/oocss-smacss-bem-dry-css-afinal-como-escrever-css/ 51 | - **SMACSS:** https://smacss.com/ 52 | - **OOCSS:** https://github.com/stubbornella/oocss/ 53 | - **BEM:** http://bem.info/ 54 | - **DRY:** http://vimeo.com/38063798 55 | - **MVCSS:** http://mvcss.github.io/ 56 | - **ComponentCSS:** http://componentcss.com/ 57 | - **CCSS:** http://sathify.github.io/CCSS/ 58 | - **DoCSSa:** http://mlarcher.github.io/docssa/ 59 | - **MCSS:** http://operatino.github.io/MCSS/en/ 60 | - **AMCSS:** http://amcss.github.io/ 61 | - **ITCSS:** https://speakerdeck.com/dafed/managing-css-projects-with-itcss 62 | - **CSS For Grownups:** https://speakerdeck.com/andyhume/css-for-grown-ups-maturing-best-practises-sxsw-2012 63 | - **f(CSS):** http://www.jon.gold/2015/07/functional-css/ 64 | - **Enduring CSS:** http://ecss.io/slides1/#/ 65 | - **rscss:** http://rscss.io/ 66 | - **Title CSS:** http://www.sitepoint.com/title-css-simple-approach-css-class-naming/ 67 | - **Classy CSS:** http://una.im/classy-css/ 68 | - **MaintanableCSS:** http://maintainablecss.com/ 69 | - **Atomic CSS:** http://www.smashingmagazine.com/2013/10/21/challenging-css-best-practices-atomic-approach/ 70 | - **CSS Bliss:** https://github.com/gilbox/css-bliss 71 | 72 | 73 |
74 | 75 | 76 | ### Code Guidelines and Best Practices 77 | - http://cssguidelin.es/ 78 | - https://github.com/necolas/idiomatic-css 79 | - https://css-tricks.com/css-style-guides/ 80 | - http://sass-guidelin.es/ 81 | - http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml 82 | - http://mdo.github.io/code-guide/ 83 | - http://primercss.io/guidelines/ 84 | - https://github.com/chris-pearce/css-guidelines 85 | - https://make.wordpress.org/core/handbook/coding-standards/css/ 86 | - https://web-design-weekly.com/2015/07/21/creating-better-css/ 87 | - https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Writing_efficient_CSS 88 | - [pt-br] http://tableless.com.br/principios-para-escrever-css-de-forma-consistente 89 | - http://gotofritz.net/blog/geekery/structuring-css/ 90 | - http://learn.shayhowe.com/advanced-html-css/performance-organization/ 91 | - https://github.com/byrichardpowell/CSS-Style 92 | - http://pointnorth.io/ 93 | - https://blog.colepeters.com/some-things-ive-learned-about-css-so-far/ 94 | - http://workmanship.io/ 95 | - https://www.smashingmagazine.com/2016/01/variables-in-css-architecture/ 96 | 97 | 98 |
99 | 100 | 101 | ### Examples 102 | - **Salesforce:** https://medium.com/salesforce-ux/building-an-enterprise-framework-is-hard-1e8d8b33e082 103 | - **GitHub:** http://markdotto.com/2014/07/23/githubs-css/ 104 | - **CodePen:** http://codepen.io/chriscoyier/blog/codepens-css 105 | - **Medium:** https://medium.com/@fat/mediums-css-is-actually-pretty-fucking-good-b8e2a6c78b06 106 | - **Trello:** http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/ 107 | - **Lonely Planet:** http://ianfeather.co.uk/css-at-lonely-planet/ 108 | - **Groupon:** http://mikeaparicio.com/2014/08/10/css-at-groupon/ 109 | - **Buffer:** http://blog.brianlovin.com/buffers-css/ 110 | - **GOV.UK:** https://github.com/alphagov/govuk_frontend_toolkit 111 | - **BigCommerce:** http://www.bigeng.io/how-we-css-at-bigcommerce 112 | - **BBC Sport:** https://medium.com/@shaunbent/css-at-bbc-sport-part-1-bab546184e66 113 | 114 | 115 |
116 | 117 | 118 | ### Books 119 | - **Scalable and Modular Architecture for CSS:** https://smacss.com/book/ 120 | - **Enduring CSS:** https://leanpub.com/enduringcss 121 | - **Frontend Architecture for Design Systems:** http://www.amazon.com/Front-End-Architecture-Blueprint-Scalable-Sustainable/dp/1491926783 122 | - **CSS Eficiente:** [pt-br] http://www.casadocodigo.com.br/pages/sumario-css-eficiente 123 | 124 | 125 |
126 | 127 | 128 | ### Frameworks / Boilerplates 129 | - http://www.sitepoint.com/component-driven-css-frameworks/ 130 | - https://developers.google.com/web/starter-kit 131 | - http://skyline.is/ 132 | - https://github.com/suitcss 133 | - https://github.com/inuitcss 134 | - https://github.com/mvcss 135 | - http://dropbox.github.io/scooter/ 136 | - http://primercss.io/ 137 | - http://www.basscss.com/ 138 | - http://tachyons.io/ 139 | - http://scally.chris-pearce.me 140 | - http://acss.io 141 | 142 | 143 |
144 | ___ 145 | 146 | #### Sections 147 | [Summary](README.md) • [Mindset and Motivations](mindset-and-motivations.md) • [About Components](about-components.md) • [Workflow](workflow.md) • [Design Process](design-process.md) • **CSS Architecture** • [Styleguides and Pattern Libraries](styleguides-and-pattern-libraries.md) 148 | -------------------------------------------------------------------------------- /design-process.md: -------------------------------------------------------------------------------- 1 | ## 4) Design Process 2 | 3 | ### Project Guidance 4 | #### Design studio 5 | - http://goodkickoffmeetings.com/2010/04/design-studioprototyping-exercise/ 6 | - [pt-br] http://blog.taller.net.br/serie-lean-redesign-ui-t01-episodio-01-kick-off/ 7 | 8 | #### Visual inventory 9 | - http://danielmall.com/articles/visual-inventory/ 10 | - https://speakerdeck.com/danielmall/sifter-visual-inventory 11 | 12 | #### Interface inventory 13 | - http://bradfrost.com/blog/post/interface-inventory/ 14 | 15 | 16 |
17 | 18 | 19 | ### Content Structure 20 | #### General Concept 21 | - http://get.invisionapp.com/chapter-4-of-making-a-product-designer 22 | 23 | #### Methods 24 | - **Content Priority Guide:** http://seesparkbox.com/foundry/content_priority_guide 25 | - **Priority Guide:** http://www.smashingmagazine.com/2012/05/design-process-responsive-age/ 26 | - **Content Inventory:** https://responsivedesign.is/design/content-first-design 27 | - **Content Matrix:** [pt-br] http://blog.taller.net.br/lean-redesign-ui-episodio-03-arquitetura-da-informacao/ 28 | - **Object-oriented UX:** http://alistapart.com/article/ooux-a-foundation-for-interaction-design 29 | 30 | 31 |
32 | 33 | 34 | ### Design Exploration / Look and Feel 35 | - **Style Tiles:** http://styletil.es/ 36 | - **Style Prototype:** http://seesparkbox.com/foundry/our_new_responsive_design_deliverable_the_style_prototype 37 | - **Element Collages:** http://danielmall.com/articles/rif-element-collages/ 38 | 39 | 40 |
41 | 42 | 43 | ### Software Workflow 44 | - http://blog.invisionapp.com/modular-design/ 45 | - https://medium.com/@tristanminor/how-to-be-more-organized-while-designing-ui-90d2d69cfb4f 46 | - https://medium.com/blablacar-design/stop-designing-interfaces-start-designing-experiences-d82def0b802c#.sjqzlodgh 47 | - https://medium.com/@lloyd/sketch-symbol-best-practices-c957511f1188 48 | 49 | 50 |
51 | ___ 52 | 53 | #### Sections 54 | [Summary](README.md) • [Mindset and Motivations](mindset-and-motivations.md) • [About Components](about-components.md) • [Workflow](workflow.md) • **Design Process** • [CSS Architecture](css-architecture.md) • [Styleguides and Pattern Libraries](styleguides-and-pattern-libraries.md) 55 | -------------------------------------------------------------------------------- /mindset-and-motivations.md: -------------------------------------------------------------------------------- 1 | ## 1) Mindset and Motivations 2 | 3 | ### Modularity 4 | - https://www.w3.org/DesignIssues/Modularity.html 5 | 6 | 7 |
8 | 9 | 10 | ### Design Systems 11 | > "We’re not designing pages, we’re designing systems of components." — Stephen Hay 12 | 13 | **People to keep an eye on:** [Brad Frost](http://bradfrost.com/) • [Nathan Curtis](http://www.eightshapes.com/nathan-curtis.html) • [Jina Bolton](http://jina.me/) 14 | 15 | - http://bradfrostweb.com/blog/post/atomic-web-design/ 16 | - http://lukebrooker.com/presentations/improving-your-responsive-workflow-with-style-guides/ 17 | - http://24ways.org/2012/design-systems/ 18 | - https://css-tricks.com/design-systems-building-future/ 19 | - http://cognition.happycog.com/article/sweet-systems 20 | - http://tao.wearefriday.com/engineering/frontend/component-approach/ 21 | - http://stuffandnonsense.co.uk/blog/about/an-extract-from-designing-atoms-and-elements 22 | - http://trentwalton.com/2016/02/26/atomic-classification/ 23 | - https://medium.com/eightshapes-llc/on-classification-in-design-systems-6b33b97f4a8f 24 | - http://blog.invisionapp.com/atomic-design-principles/ 25 | 26 | #### Books 27 | - **Atomic Design Book:** http://atomicdesign.bradfrost.com/ 28 | - **Modular Web Design:** http://www.amazon.com/Modular-Web-Design-Components-Documentation/dp/0321601351 29 | 30 | 31 |
32 | 33 | 34 | ### Styleguide-driven Development 35 | > "Styleguides help solve these problems by acting as common ground for how a site should look and feel, and how it should be built." — Tamara Chu 36 | 37 | - https://www.smashingmagazine.com/2016/06/designing-modular-ui-systems-via-style-guide-driven-development/ 38 | - http://getflexin.com/styleguide-driven-development/ 39 | - http://webuild.envato.com/blog/styleguide-driven-development/ 40 | - https://engineering.eventbrite.com/styleguide-driven-development-at-eventbrite-introduction/ 41 | - http://blog.bitovi.com/style-guide-driven-development/ 42 | - https://www.phase2technology.com/blog/your-frontend-methodology-is-all-of-them-atomic-design-patternlab/ 43 | - https://medium.com/salesforce-ux/designing-products-that-scale-c8f3001f709b#.ym25oygc0 44 | - https://css-tricks.com/style-guide-driven-development-atomic-docs/ 45 | - https://speakerdeck.com/broccolini/empowering-designers-to-code-2 46 | - [pt-br] http://shipit.resultadosdigitais.com.br/blog/a-trajetoria-para-um-produto-com-design-escalavel/ 47 | 48 | 49 |
50 | 51 | 52 | ### Design/Development Collaboration 53 | > "The modern Web design process requires intense collaboration between designers and front-end developers. Real collaboration and communication are difficult, but we must get over that awkwardness in order to overcome the design/development divide." — Brad Frost 54 | 55 | - http://bradfrostweb.com/blog/post/development-is-design/ 56 | - http://cognition.happycog.com/article/make-sweet-systems-sweeter 57 | - https://www.bloco.io/blog/2016/why-you-need-developers-for-designing-a-product 58 | - https://www.bloco.io/blog/2016/stop-making-your-developers-design-your-product 59 | - http://blog.fullstory.com/2016/04/engaging-engineering-in-design/ 60 | - https://blog.intercom.io/there-is-no-hand-off-product-design/ 61 | - https://www.ckl.io/blog/collaboration-interdisciplinarity-product-development/ 62 | - http://blog.invisionapp.com/design-questions-developers/ 63 | - http://blog.invisionapp.com/designer-developer-collaboration/ 64 | 65 | 66 |
67 | 68 | 69 | ### Deliverables 70 | > "In order to effectively design for today and tomorrow’s Web, we must replace outdated design artifacts with real collaboration and communication." — Brad Frost 71 | 72 | - http://bradfrostweb.com/blog/post/the-post-psd-era/ 73 | - http://danielmall.com/articles/the-post-psd-era/ 74 | - https://medium.com/@bkrall/what-does-designing-in-the-browser-mean-3ccb1dfad980 75 | - http://daverupert.com/2013/04/responsive-deliverables/ 76 | - https://medium.com/@astralwave/designing-for-outcomes-a6484e1682cc 77 | - http://tympanus.net/codrops/2013/09/23/so-youre-a-web-designer-right/ 78 | - https://stuffandnonsense.co.uk/blog/about/time_to_stop_showing_clients_static_design_visuals/ 79 | 80 | 81 |
82 | ___ 83 | 84 | #### Sections 85 | [Summary](README.md) • **Mindset and Motivations** • [About Components](about-components.md) • [Workflow](workflow.md) • [Design Process](design-process.md) • [CSS Architecture](css-architecture.md) • [Styleguides and Pattern Libraries](styleguides-and-pattern-libraries.md) 86 | -------------------------------------------------------------------------------- /styleguides-and-pattern-libraries.md: -------------------------------------------------------------------------------- 1 | ## 6) Styleguides and Pattern Libraries 2 | 3 | **People to keep an eye on:** [Anna Debenham](http://maban.co.uk/) • [Brad Frost](http://bradfrost.com/) 4 | **Other lists to keep an eye on:** [Styleguides.io](http://styleguides.io) • [Pattern Library Directory]( https://github.com/marcelosomers/pattern-library-directory) • [Styleguide Generators](https://github.com/davidhund/styleguide-generators) 5 | 6 | 7 |
8 | 9 | 10 | ### General Concept 11 | - https://www.nngroup.com/articles/front-end-style-guides/ 12 | - http://24ways.org/2011/front-end-style-guides/ 13 | - http://boagworld.com/design/pattern-library/ 14 | - http://alistapart.com/article/writingainterfacestyleguide 15 | - http://alistapart.com/article/creating-style-guides 16 | - http://sideproject.io/front-end-and-ui-style-guides/ 17 | - https://blog.engineyard.com/2011/front-end-maintainability-with-sass-and-style-guides 18 | - https://the-pastry-box-project.net/jina-bolton/2015-march-28 19 | - http://snugug.com/musings/style-guide-questionnaire-results 20 | - https://www.springload.co.nz/blog/introduction-pattern-libraries/ 21 | - http://clearleft.com/thinks/382 22 | 23 | #### Automatization 24 | - http://www.smashingmagazine.com/2015/03/05/automating-style-guide-driven-development/ 25 | - http://ianfeather.co.uk/a-maintainable-style-guide/ 26 | - http://marcelosomers.com/keeping-pattern-libraries-in-sync 27 | 28 | 29 |
30 | 31 | 32 | ### Tools 33 | - https://medium.com/@operatino/living-style-guide-tools-in-depth-overview-28cfffb92d05 34 | - http://welchcanavan.com/styleguide-roundup/ 35 | - http://byrichardpowell.co.uk/post/48682993574/on-css-documentation 36 | 37 | - **KSS:** http://warpspire.com/kss 38 | - **Pattern Lab:** http://patternlab.io/ 39 | - **Rock Hammer:** http://malarkey.github.io/Rock-Hammer/ 40 | - **Hologram:** http://trulia.github.io/hologram/ 41 | - **StyleDocco:** http://jacobrask.github.io/styledocco/ 42 | - **SC5:** http://styleguide.sc5.io/ 43 | - **DocumentCSS:** http://documentcss.com/ 44 | - **Styleguide:** http://devbridge.github.io/Styleguide/ 45 | - **Fractal:** https://github.com/frctl/fractal 46 | - **Fabricator:** https://fbrctr.github.io/ 47 | 48 | 49 |
50 | 51 | 52 | ### Examples 53 | - http://styleguides.io/examples.html 54 | - https://github.com/marcelosomers/pattern-library-directory 55 | 56 | 57 |
58 | 59 | 60 | ### Books 61 | - **Front-end Style Guides:** http://maban.co.uk/projects/front-end-style-guides/ 62 | 63 | 64 |
65 | ___ 66 | 67 | #### Sections 68 | [Summary](README.md) • [Mindset and Motivations](mindset-and-motivations.md) • [About Components](about-components.md) • [Workflow](workflow.md) • [Design Process](design-process.md) • [CSS Architecture](css-architecture.md) • **Styleguides and Pattern Libraries** 69 | -------------------------------------------------------------------------------- /workflow.md: -------------------------------------------------------------------------------- 1 | ## 3) Workflow 2 | 3 | ### General Concept 4 | - https://medium.com/@jaceyleigh/great-responsive-web-design-is-a-matter-of-process-270048a88c70 5 | - http://bundlr.com/clips/4fd5ff99433682000100049e 6 | - http://bradfrost.com/blog/post/email-responses-1-workflow-educating-clients/ 7 | - [pt-br] http://www.uxdesign.blog.br/design-responsivo/responsive-design-workflow/ 8 | - [pt-br] http://www.felipefialho.com/blog/2013/um-conto-sobre-componentizacao-e-quebra-de-paradigmas/ 9 | - https://www.smashingmagazine.com/2016/05/design-systems-responsive-design-sell-output-not-workflow/ 10 | 11 | 12 | ### Cases 13 | - http://bradfrostweb.com/blog/post/entertainment-weekly/ 14 | - http://bradfrostweb.com/blog/post/techcrunch/ 15 | - http://danielmall.com/articles/rif-design-flexibility/ 16 | - http://danielmall.com/articles/responsive-mobile-entertainment-weekly/ 17 | - http://csswizardry.com/case-studies/nhs-nhsx-elearning-platform/ 18 | - http://codepen.seesparkbox.com/ 19 | - http://wearemudlark.com/blog/the-new-mudlark-website/ 20 | - https://medium.com/swlh/building-the-ui-for-the-new-the-times-website-26dc4e6569e 21 | 22 | 23 | ### Tools 24 | - https://sympli.io/ 25 | - http://theprotein.io/ 26 | 27 | 28 | ### Books 29 | - **Responsive Design Workflow:** http://responsivedesignworkflow.com/ 30 | 31 | 32 |
33 | ___ 34 | 35 | #### Sections 36 | [Summary](README.md) • [Mindset and Motivations](mindset-and-motivations.md) • [About Components](about-components.md) • **Workflow** • [Design Process](design-process.md) • [CSS Architecture](css-architecture.md) • [Styleguides and Pattern Libraries](styleguides-and-pattern-libraries.md) 37 | --------------------------------------------------------------------------------