{"id":26678,"date":"2016-06-23T23:01:45","date_gmt":"2016-06-23T15:01:45","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=26678"},"modified":"2018-04-09T20:43:17","modified_gmt":"2018-04-09T12:43:17","slug":"best-living-style-guide-tools","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/","title":{"rendered":"Ten Living Style Guide Tools for Web Designers &#8211; Best of"},"content":{"rendered":"<p>A <strong>living style guide<\/strong> is a <strong>documentation of UI elements and patterns<\/strong> collected from a site or application with the purpose to allow developers to use <strong>consistent styles across their whole project<\/strong>. In the past, developers created style guides manually, which is a lot of work. After a while, they started to automate the workflow, and style guide tools that transform front-end code into <strong>well-organized UI libraries<\/strong> have begun to appear.<\/p>\n<p>Living style guides are different from <em>code style guides<\/em>, as the latter contain rules about how to write readable and maintainable code, while living style guides are <strong>collections of front-end patterns, such as CSS classes for buttons, widgets, and typographical elements<\/strong>. Code style guides ensure <strong>code consistency<\/strong>, while living style guides ensure <strong>visual consistency<\/strong> across a site.<\/p>\n<p class=\"note\"> <strong>Recommended Reading:<\/strong> <a href=\"https:\/\/www.hongkiat.com\/blog\/css-optimization-using-code-style-guides\/\">How to optimize CSS with Code Style Guides<\/a><\/p>\n<p>In this post, we have put together 10 handy tools that can help you <strong>generate your own living style guide<\/strong>.<\/p>\n<h2>1. <a rel=\"nofollow\" target=\"_blank\" href=\"http:\/\/stylifyme.com\">Stylify Me<\/a><\/h2>\n<p>This tool is a lot of fun: just paste the link of the website you would like to analyze, and watch as its style guide is generated in one click of a mouse. With <strong>Stylify Me<\/strong>, you can quickly gain an overview of the patterns of a site, including colours, fonts, sizing and spacing. Once the process is complete, you can <strong>download the style guide in PDF<\/strong>.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"http:\/\/stylifyme.com\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/1-stylify-me.jpg\" alt=\"stylifyme\" width=\"700\" height=\"403\"><\/a><\/figure>\n<h2>2. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/fbrctr.github.io\">Fabricator<\/a><\/h2>\n<p><strong>Fabricator<\/strong> allows you to build your own UI toolkit, organize your design system, and generate a style guide from your toolkit code. If you work in a team, you can write the documentation in Markdown to make it easier for other developers to use. It can help you to <strong>organize your design\/coding routine<\/strong> in the way you like.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/fbrctr.github.io\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/2-fabricator.jpg\" alt=\"fabricator\" width=\"700\" height=\"430\"><\/a><\/figure>\n<h2>3. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/frontify.com\/styleguide\">Frontify<\/a><\/h2>\n<p><strong>Frontify<\/strong> includes everything from digital mockups to wireframing. They also have a style guide tool which offers a clean minimalistic design process with no hassle. You can sign up for free, and insert all the necessary information manually. The process should include color palette, font choices, icons, logos, possibly slogans or preferred web copy.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/frontify.com\/styleguide\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/3-frontify.jpg\" alt=\"frontify\" width=\"700\" height=\"430\"><\/a><\/figure>\n<h2>4. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/pxgrid.github.io\/aigis\/\">Aigis<\/a><\/h2>\n<p>With <strong>Aigis<\/strong>, you can generate style guides from any text files (e.g. <code>.css<\/code>, <code>.scss<\/code>, <code>.styl<\/code>, <code>.md<\/code>). You can also write documentation in Markdown, and customize your site theme.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/pxgrid.github.io\/aigis\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/4-aigis.jpg\" alt=\"aigis\" width=\"700\" height=\"429\"><\/a><\/figure>\n<h2>5. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/github.com\/trulia\/hologram\">Hologram<\/a><\/h2>\n<p><strong>Hologram<\/strong> was created by Trulia, and is a great solution for generating style guides. It is a Ruby gem that <strong>parses comments in your CSS<\/strong> in order to generate awesome style guides. Hologram has a templating system with some basic styles and navigation to make your style guide generating even easier.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/github.com\/trulia\/hologram\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/5-hologram.jpg\" alt=\"hologram\" width=\"700\" height=\"487\"><\/a><\/figure>\n<h2>6. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/github.com\/styledown\/styledown\">Styledown<\/a><\/h2>\n<p>With <strong>Styledown<\/strong>, you can write CSS style guides with ease, as it\u2019s a <strong>Markdown-based style guide generator<\/strong>. It will work with most web development setups, as it\u2019s platform-neutral. It requires very little to get it up and running. Also, the comments you need to add to your CSS are very minimal. You can create your CSS documentation in either inline CSS comments, or as a <a href=\"https:\/\/github.com\/styledown\/styledown\/blob\/master\/docs\/Format.md\" rel=\"nofollow\" target=\"_blank\">separate Markdown file<\/a>.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/github.com\/styledown\/styledown\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/6-styledown.jpg\" alt=\"styledown\" width=\"700\" height=\"534\"><\/a><\/figure>\n<h2>7. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/github.com\/kneath\/kss\">KSS<\/a><\/h2>\n<p><strong>KSS (Knyle Style Sheets)<\/strong> is primarily a <strong>documentation specification<\/strong> and a style guide format that has <strong>its own commenting syntax<\/strong>. KSS also includes a <a href=\"https:\/\/github.com\/kneath\/kss#ruby-library--\" rel=\"nofollow\" target=\"_blank\">Ruby library<\/a> that parses <code>.sass<\/code>, <code>.scss<\/code>, and <code>.css<\/code> files documented with the KSS guidelines into a neat style guide. KSS is for more advanced users and professional teams, as <a href=\"https:\/\/warpspire.com\/kss\/styleguides\/\" rel=\"nofollow\" target=\"_blank\">generating a style guide<\/a> with it requires coding knowledge.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/github.com\/kneath\/kss\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/7-kss.jpg\" alt=\"kss\" width=\"700\" height=\"487\"><\/a><\/figure>\n<h2>8. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/styleguide.sc5.io\">SC5 Style Guide Generator<\/a><\/h2>\n<p>With the <strong>SC5 Style Guide Generator<\/strong> you can create and edit style guides directly in your browser. It is <strong>based on KSS<\/strong> with some cool features included, such as an AngularJS powered UI that helps you view, search and test your styles. SC5 uses the same document notation as KSS. It supports SASS, LESS, PostCSS and pure CSS stylesheets.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/styleguide.sc5.io\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/8-sc5.jpg\" alt=\"solid\" width=\"700\" height=\"398\"><\/a><\/figure>\n<h2>9. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/jacobrask.github.io\/styledocco\/\">Styledocco<\/a><\/h2>\n<p><strong>StyleDocco<\/strong> is a handy Node.js app that <strong>creates style guides from your stylesheets<\/strong>. You can <a href=\"https:\/\/github.com\/jacobrask\/styledocco#installation\" rel=\"nofollow\" target=\"_blank\">install<\/a> it with npm. In the generated styleguide, StyleDocco shows a preview with the styles you have applied and an example of the HTML code.<\/p>\n<p>On StyleDocco\u2019s home page, you can find two style guide examples, one <a href=\"https:\/\/jacobrask.github.io\/styledocco\/styledocco\/examples\/styledocco\/docs.html\" rel=\"nofollow\" target=\"_blank\">generated from a default stylesheet<\/a>, and another one <a href=\"https:\/\/jacobrask.github.io\/styledocco\/styledocco\/examples\/bootstrap\/docs\/buttons.html\" rel=\"nofollow\" target=\"_blank\">generated from a Bootstrap site<\/a>. The examples can also help you pick up the documentation syntax SytleDocco uses.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/jacobrask.github.io\/styledocco\/\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/9-styledocco.jpg\" alt=\"styledocco\" width=\"700\" height=\"407\"><\/a><\/figure>\n<h2>10. <a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/patternlab.io\">Pattern Lab<\/a><\/h2>\n<p><strong>Pattern Lab<\/strong> is a collection of tools that help you create a <strong>modular design system<\/strong>. Pattern Lab is a custom <a href=\"https:\/\/www.hongkiat.com\/blog\/static-site-generators\/\">static site generator<\/a> that stitches together all style elements on a site, and forms templates and pages from them. It can serve as your project\u2019s <strong>pattern library<\/strong> and <strong>frontend style guide<\/strong>. Pattern Lab allows you to see your style components simultaneously <strong>abstractly<\/strong> and <strong> in context<\/strong>.<\/p>\n<figure><a rel=\"nofollow\" target=\"_blank\" href=\"https:\/\/patternlab.io\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/10-patternlab.jpg\" alt=\"patternlab\" width=\"700\" height=\"421\"><\/a><\/figure>\n<p class=\"note\"><strong>Now Read: <\/strong><a href=\"https:\/\/www.hongkiat.com\/blog\/why-documentation-essential\/\">Why developers shouldn\u2019t skip documentation<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>A living style guide is a documentation of UI elements and patterns collected from a site or application with the purpose to allow developers to use consistent styles across their whole project. In the past, developers created style guides manually, which is a lot of work. After a while, they started to automate the workflow,&hellip;<\/p>\n","protected":false},"author":124,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[352],"tags":[3414,510],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Ten Living Style Guide Tools for Web Designers - Best of - Hongkiat<\/title>\n<meta name=\"description\" content=\"A living style guide is a documentation of UI elements and patterns collected from a site or application with the purpose to allow developers to use\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Ten Living Style Guide Tools for Web Designers - Best of\" \/>\n<meta property=\"og:description\" content=\"A living style guide is a documentation of UI elements and patterns collected from a site or application with the purpose to allow developers to use\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2016-06-23T15:01:45+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-09T12:43:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/1-stylify-me.jpg\" \/>\n<meta name=\"author\" content=\"Nancy Young\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nancy Young\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/\"},\"author\":{\"name\":\"Nancy Young\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/943d20daf5b8c7638175cba309ef6e32\"},\"headline\":\"Ten Living Style Guide Tools for Web Designers &#8211; Best of\",\"datePublished\":\"2016-06-23T15:01:45+00:00\",\"dateModified\":\"2018-04-09T12:43:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/\"},\"wordCount\":776,\"commentCount\":14,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/best-living-style-guide-tools\\\/1-stylify-me.jpg\",\"keywords\":[\"toolkit\",\"Web Designers\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/\",\"name\":\"Ten Living Style Guide Tools for Web Designers - Best of - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/best-living-style-guide-tools\\\/1-stylify-me.jpg\",\"datePublished\":\"2016-06-23T15:01:45+00:00\",\"dateModified\":\"2018-04-09T12:43:17+00:00\",\"description\":\"A living style guide is a documentation of UI elements and patterns collected from a site or application with the purpose to allow developers to use\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/best-living-style-guide-tools\\\/1-stylify-me.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/best-living-style-guide-tools\\\/1-stylify-me.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/best-living-style-guide-tools\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Ten Living Style Guide Tools for Web Designers &#8211; Best of\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/943d20daf5b8c7638175cba309ef6e32\",\"name\":\"Nancy Young\",\"description\":\"Nancy has over seven years of experience in writing for different online mediums. Her expertise lies in creating inspirational articles with beautiful images.\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/nancy_young\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Ten Living Style Guide Tools for Web Designers - Best of - Hongkiat","description":"A living style guide is a documentation of UI elements and patterns collected from a site or application with the purpose to allow developers to use","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/","og_locale":"en_US","og_type":"article","og_title":"Ten Living Style Guide Tools for Web Designers - Best of","og_description":"A living style guide is a documentation of UI elements and patterns collected from a site or application with the purpose to allow developers to use","og_url":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2016-06-23T15:01:45+00:00","article_modified_time":"2018-04-09T12:43:17+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/1-stylify-me.jpg","type":"","width":"","height":""}],"author":"Nancy Young","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Nancy Young","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/"},"author":{"name":"Nancy Young","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/943d20daf5b8c7638175cba309ef6e32"},"headline":"Ten Living Style Guide Tools for Web Designers &#8211; Best of","datePublished":"2016-06-23T15:01:45+00:00","dateModified":"2018-04-09T12:43:17+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/"},"wordCount":776,"commentCount":14,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/1-stylify-me.jpg","keywords":["toolkit","Web Designers"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/","url":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/","name":"Ten Living Style Guide Tools for Web Designers - Best of - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/1-stylify-me.jpg","datePublished":"2016-06-23T15:01:45+00:00","dateModified":"2018-04-09T12:43:17+00:00","description":"A living style guide is a documentation of UI elements and patterns collected from a site or application with the purpose to allow developers to use","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/1-stylify-me.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/best-living-style-guide-tools\/1-stylify-me.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/best-living-style-guide-tools\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Ten Living Style Guide Tools for Web Designers &#8211; Best of"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/943d20daf5b8c7638175cba309ef6e32","name":"Nancy Young","description":"Nancy has over seven years of experience in writing for different online mediums. Her expertise lies in creating inspirational articles with beautiful images.","url":"https:\/\/www.hongkiat.com\/blog\/author\/nancy_young\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-6Wi","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26678","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/124"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=26678"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26678\/revisions"}],"predecessor-version":[{"id":30229,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/26678\/revisions\/30229"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=26678"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=26678"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=26678"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=26678"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}