Como uma metodologia tão simples pode resolver problemas na organização dos componentes de um produto?
FRONTENDBACKharmoniaAtomic Designemcom&
View Slide
SOU@matheusagcostaEU?QUEM@fintechdev #comunidade <3
DESIGNOI?ATOMICmetodologia
átomosBOTÃOParágrafoTítulo LINK#8ABE5E
moléculasTítulo EstilizadoAÇÃO 2AÇÃO 1Item 1Item 2Item 3Item 4
organismosAlertaAÇÃO 2Mensagem de confirmaçãoAÇÃO 1LOGO Link AtivoLinkLinkLink Link Texto de rodapéLink
ModelosLOGO Link AtivoLinkLinkLink Link texto de rodapéLinkIMAGEM
páginasDevTalks ContactAboutBlogHome Sitemap copyright © 2017Terms
Bootstrapstiny
organizandoquímicatoda a
http://patternlab.io/
http://demo.patternlab.io/
MAS…
https://www.sitepoint.com/setting-up-a-living-styleguide-in-jekyll/
case fintechdev
navegação detalhes códigodemonstração
demo time
atomic designCSS?no
“…atomic design has nothing to dowith CSS or JavaScript architecture.”http://bradfrost.com/blog/post/atomic-design-is-for-user-interfaces/- Brad Frost
arquiteturaCSS
http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
metodologiaCSS
BLOCKELEMENTMODIFIER- .header- .header__title- .header__title--dark
!atomicdesign.bradfrost.comtableless.com.br/o-que-é-design-atomic"