{"id":30436,"date":"2017-06-14T20:01:46","date_gmt":"2017-06-14T12:01:46","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=30436"},"modified":"2018-04-24T19:34:13","modified_gmt":"2018-04-24T11:34:13","slug":"css-mint-ui-kit","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/","title":{"rendered":"Build Colorful Flat-Themed Websites with CSS Mint UI Kit"},"content":{"rendered":"<p><strong>Open-source frontend UI kits<\/strong> are all the rage in the development community. They save time on all aspects of laying out grids, styling page elements, and adding dynamic components such as dropdowns.<\/p>\n<p>There are plenty of kits using flat design but few come close to <strong><a href=\"https:\/\/arunmichaeldsouza.github.io\/CSS-Mint\/\" target=\"_blank\">CSS Mint<\/a><\/strong>. This 100% free open-source UI kit works great for all projects and any type of website you can imagine.<\/p>\n<p>At the very core of CSS Mint, there is the <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/normalized-css\/\">Normalize library<\/a><\/strong> along with other custom resets. This is meant to <strong>squash all cross-browser issues and bugs<\/strong> to keep the codebase consistent across the board.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/flat-design-resources\/\">Ultimate Guide to Flat Website Design<\/a>\n\t\t\t\t<\/p>\n<p>All CSS code follows <strong><a href=\"https:\/\/www.hongkiat.com\/blog\/basics-of-object-oriented-css\/\">OOCSS principles<\/a><\/strong>, so you should have an easy time adding to (or customizing) the existing codebase.<\/p>\n<p>To get started, you just <strong>add the CSS Mint stylesheet<\/strong> to your project. This can be installed via Bower, or through a <a href=\"https:\/\/cdn.jsdelivr.net\/css-mint\/1.4.3\/css-mint.min.css\" target=\"_blank\">CDN link<\/a>, or even hosted locally if you download a copy from <a href=\"https:\/\/github.com\/ArunMichaelDsouza\/CSS-Mint\" target=\"_blank\">GitHub<\/a>.<\/p>\n<p>When you create a new web page you\u2019ll be following standards-compliant HTML5 code. Grid systems are based on container <code>&lt;div&gt;<\/code> elements. Most default elements such as <code>&lt;header&gt;<\/code> are <strong>fully styled<\/strong>, with <strong>optional classes for different layouts<\/strong>.<\/p>\n<p>Out of the box, you\u2019ll find classes for <strong>buttons<\/strong>, <strong>typography<\/strong>, <strong>navigation menus<\/strong>, <strong>form inputs<\/strong> and <strong>rich page elements<\/strong> such as cards. You can see plenty of examples on the <a href=\"https:\/\/arunmichaeldsouza.github.io\/CSS-Mint\/\" target=\"_blank\">demo page<\/a> which includes code snippets as well.<\/p>\n<figure><a href=\"https:\/\/arunmichaeldsouza.github.io\/CSS-Mint\/\" target=\"_blank\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/css-mint-ui-kit\/02-mint-css-grids.jpg\" alt=\"CSS Mint grids\" width=\"1200\" height=\"683\"><\/a><\/figure>\n<p>The framework is <strong>constantly being updated<\/strong> with new styles and extra features, so Mint is likely to be around for the long haul.<\/p>\n<p>It does not offer as much control as the Sass and Less frameworks but the beauty of Mint lies in its simplicity. Just add the stylesheet to your page and you\u2019re good to go!<\/p>\n<p>To learn more visit the <strong><a href=\"https:\/\/github.com\/ArunMichaelDsouza\/CSS-Mint\" target=\"_blank\">GitHub repo<\/a><\/strong> for download links & installation instructions. And, you can share your thoughts with the creator Arun Michael Dsouza on his Twitter <a href=\"https:\/\/twitter.com\/amdsouza92\" target=\"_blank\">@amdsouza92<\/a>.<\/p>\n<p class=\"recommended_top\">\n\t\t\t\t\t<strong>Read Also:<\/strong>\u00a0\n\t\t\t\t\t<a target=\"_blank\" href=\"https:\/\/www.hongkiat.com\/blog\/web-mobile-ui-kits\/\">150+ Free UI Kits For Designers (Updated)<\/a>\n\t\t\t\t<\/p>","protected":false},"excerpt":{"rendered":"<p>Open-source frontend UI kits are all the rage in the development community. They save time on all aspects of laying out grids, styling page elements, and adding dynamic components such as dropdowns. There are plenty of kits using flat design but few come close to CSS Mint. This 100% free open-source UI kit works great&hellip;<\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3393],"tags":[507,2372,3869],"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.6) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Build Colorful Flat-Themed Websites with CSS Mint UI Kit - Hongkiat<\/title>\n<meta name=\"description\" content=\"Open-source frontend UI kits are all the rage in the development community. They save time on all aspects of laying out grids, styling page elements, and\" \/>\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\/css-mint-ui-kit\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Colorful Flat-Themed Websites with CSS Mint UI Kit\" \/>\n<meta property=\"og:description\" content=\"Open-source frontend UI kits are all the rage in the development community. They save time on all aspects of laying out grids, styling page elements, and\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/\" \/>\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=\"2017-06-14T12:01:46+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2018-04-24T11:34:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/css-mint-ui-kit\/02-mint-css-grids.jpg\" \/>\n<meta name=\"author\" content=\"Jake Rocheleau\" \/>\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=\"Jake Rocheleau\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Build Colorful Flat-Themed Websites with CSS Mint UI Kit\",\"datePublished\":\"2017-06-14T12:01:46+00:00\",\"dateModified\":\"2018-04-24T11:34:13+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/\"},\"wordCount\":330,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-mint-ui-kit\\\/02-mint-css-grids.jpg\",\"keywords\":[\"CSS\",\"Flat Design\",\"GUI Kits\"],\"articleSection\":[\"Toolkit\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/\",\"name\":\"Build Colorful Flat-Themed Websites with CSS Mint UI Kit - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-mint-ui-kit\\\/02-mint-css-grids.jpg\",\"datePublished\":\"2017-06-14T12:01:46+00:00\",\"dateModified\":\"2018-04-24T11:34:13+00:00\",\"description\":\"Open-source frontend UI kits are all the rage in the development community. They save time on all aspects of laying out grids, styling page elements, and\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-mint-ui-kit\\\/02-mint-css-grids.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/css-mint-ui-kit\\\/02-mint-css-grids.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/css-mint-ui-kit\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Colorful Flat-Themed Websites with CSS Mint UI Kit\"}]},{\"@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\\\/966b2daea15283b4145e71aa98a82c2a\",\"name\":\"Jake Rocheleau\",\"description\":\"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/jake\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Build Colorful Flat-Themed Websites with CSS Mint UI Kit - Hongkiat","description":"Open-source frontend UI kits are all the rage in the development community. They save time on all aspects of laying out grids, styling page elements, and","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\/css-mint-ui-kit\/","og_locale":"en_US","og_type":"article","og_title":"Build Colorful Flat-Themed Websites with CSS Mint UI Kit","og_description":"Open-source frontend UI kits are all the rage in the development community. They save time on all aspects of laying out grids, styling page elements, and","og_url":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-06-14T12:01:46+00:00","article_modified_time":"2018-04-24T11:34:13+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/css-mint-ui-kit\/02-mint-css-grids.jpg","type":"","width":"","height":""}],"author":"Jake Rocheleau","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Jake Rocheleau","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Build Colorful Flat-Themed Websites with CSS Mint UI Kit","datePublished":"2017-06-14T12:01:46+00:00","dateModified":"2018-04-24T11:34:13+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/"},"wordCount":330,"commentCount":3,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-mint-ui-kit\/02-mint-css-grids.jpg","keywords":["CSS","Flat Design","GUI Kits"],"articleSection":["Toolkit"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/","url":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/","name":"Build Colorful Flat-Themed Websites with CSS Mint UI Kit - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-mint-ui-kit\/02-mint-css-grids.jpg","datePublished":"2017-06-14T12:01:46+00:00","dateModified":"2018-04-24T11:34:13+00:00","description":"Open-source frontend UI kits are all the rage in the development community. They save time on all aspects of laying out grids, styling page elements, and","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/css-mint-ui-kit\/02-mint-css-grids.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/css-mint-ui-kit\/02-mint-css-grids.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/css-mint-ui-kit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Colorful Flat-Themed Websites with CSS Mint UI Kit"}]},{"@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\/966b2daea15283b4145e71aa98a82c2a","name":"Jake Rocheleau","description":"Jake is a writer and designer with over 10 years experience working on the web. He writes about user experience design and cool resources for designers","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/jake\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-7UU","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30436","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\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=30436"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30436\/revisions"}],"predecessor-version":[{"id":30438,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/30436\/revisions\/30438"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=30436"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=30436"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=30436"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=30436"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}