{"id":38073,"date":"2017-09-19T21:01:32","date_gmt":"2017-09-19T13:01:32","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=38073"},"modified":"2022-07-13T19:41:52","modified_gmt":"2022-07-13T11:41:52","slug":"semantic-ui-framework","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/","title":{"rendered":"Build Responsive Websites Faster with Semantic UI"},"content":{"rendered":"

Frontend frameworks such as Bootstrap<\/a> are still all the rage. There are dozens of great choices<\/a> to pick from but one that recently caught my attention is Semantic UI<\/a><\/strong>.<\/p>\n

Granted this library has been around for a while, dating back a few years. However, the newest release of version 2.2 comes with a bunch of added features<\/strong> and proves that Semantic is gonna be around for the long haul.<\/p>\n

With dozens of CSS variables<\/strong>, simple responsive classes<\/strong>, and easy-to-setup layouts<\/strong>, you\u2019ll have no trouble working with Semantic UI on your own.<\/p>\n

Read Also:<\/strong> Customizing Bootstrap Layouts: Trends, Tools & Frameworks<\/a><\/p>\n

The simple class names and grid structures<\/strong> really give meaning to this framework being called \u201cSemantic\u201d. The classes are very sensible and this makes your HTML easy to read at a distance.<\/p>\n

It even comes with jQuery support for dynamic page elements<\/strong> such as carousels and dropdown select menus.<\/p>\n

Every HTML element under the sun is customized and fully functional<\/strong> with Semantic UI. This includes HTML5 elements plus extra functionality like ratings<\/a> and custom tabs<\/a>.<\/p>\n

\"custom<\/figure>\n

But, perhaps the best part of Semantic is the theming setup<\/strong>. Not only do you get tons of pre-designed styles and dynamic elements, but you can also restyle these yourself<\/strong> building on top of Semantic\u2019s code.<\/p>\n

The entire library totals 3,000+ theming variables<\/strong> you can alter in Sass<\/a> or by extending your own stylesheet. Plus, Semantic UI comes packaged with nine default themes<\/strong>:<\/p>\n

    \n
  1. Semantic Default<\/li>\n
  2. Chubby<\/li>\n
  3. Raised<\/li>\n
  4. Classic<\/li>\n
  5. Google Material<\/li>\n
  6. Amazon<\/li>\n
  7. Bootstrap<\/li>\n
  8. GitHub<\/li>\n
  9. Twitter<\/li>\n<\/ol>\n

    These are just the tip of the iceberg and they act more like starting points to design your own theme<\/strong>.<\/p>\n

    \"Semantic<\/a><\/figure>\n

    If you\u2019re building a new landing page or custom website from scratch then seriously consider working with Semantic UI. It\u2019s totally free and open source with great documentation<\/a> online<\/strong>.<\/p>\n

    You can browse through layout styles<\/a><\/strong>, along with guides for all the main elements and custom theming<\/a><\/strong>.<\/p>\n

    And, you can download a copy of the source code<\/strong> directly from GitHub<\/a>, which also includes a guide for beginners<\/strong>.<\/p>\n

    Read Also:<\/strong> Vital CSS \u2013 A Minimally Invasive Web Framework<\/a><\/p>","protected":false},"excerpt":{"rendered":"

    Frontend frameworks such as Bootstrap are still all the rage. There are dozens of great choices to pick from but one that recently caught my attention is Semantic UI. Granted this library has been around for a while, dating back a few years. However, the newest release of version 2.2 comes with a bunch of…<\/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":[352],"tags":[4646,2066],"topic":[4520],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"\nBuild Responsive Websites Faster with Semantic UI - Hongkiat<\/title>\n<meta name=\"description\" content=\"Frontend frameworks such as Bootstrap are still all the rage. There are dozens of great choices to pick from but one that recently caught my attention is\" \/>\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\/semantic-ui-framework\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Build Responsive Websites Faster with Semantic UI\" \/>\n<meta property=\"og:description\" content=\"Frontend frameworks such as Bootstrap are still all the rage. There are dozens of great choices to pick from but one that recently caught my attention is\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/\" \/>\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-09-19T13:01:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-07-13T11:41:52+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/semantic-ui-framework\/custom-tabs.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\\\/semantic-ui-framework\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/\"},\"author\":{\"name\":\"Jake Rocheleau\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/966b2daea15283b4145e71aa98a82c2a\"},\"headline\":\"Build Responsive Websites Faster with Semantic UI\",\"datePublished\":\"2017-09-19T13:01:32+00:00\",\"dateModified\":\"2022-07-13T11:41:52+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/\"},\"wordCount\":350,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/semantic-ui-framework\\\/custom-tabs.jpg\",\"keywords\":[\"Mobile Website Design & Dev\",\"Responsive Web Design\"],\"articleSection\":[\"Web Design\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/\",\"name\":\"Build Responsive Websites Faster with Semantic UI - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/semantic-ui-framework\\\/custom-tabs.jpg\",\"datePublished\":\"2017-09-19T13:01:32+00:00\",\"dateModified\":\"2022-07-13T11:41:52+00:00\",\"description\":\"Frontend frameworks such as Bootstrap are still all the rage. There are dozens of great choices to pick from but one that recently caught my attention is\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/semantic-ui-framework\\\/custom-tabs.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/semantic-ui-framework\\\/custom-tabs.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/semantic-ui-framework\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Build Responsive Websites Faster with Semantic UI\"}]},{\"@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 Responsive Websites Faster with Semantic UI - Hongkiat","description":"Frontend frameworks such as Bootstrap are still all the rage. There are dozens of great choices to pick from but one that recently caught my attention is","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\/semantic-ui-framework\/","og_locale":"en_US","og_type":"article","og_title":"Build Responsive Websites Faster with Semantic UI","og_description":"Frontend frameworks such as Bootstrap are still all the rage. There are dozens of great choices to pick from but one that recently caught my attention is","og_url":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2017-09-19T13:01:32+00:00","article_modified_time":"2022-07-13T11:41:52+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/semantic-ui-framework\/custom-tabs.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\/semantic-ui-framework\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/"},"author":{"name":"Jake Rocheleau","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/966b2daea15283b4145e71aa98a82c2a"},"headline":"Build Responsive Websites Faster with Semantic UI","datePublished":"2017-09-19T13:01:32+00:00","dateModified":"2022-07-13T11:41:52+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/"},"wordCount":350,"commentCount":0,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/semantic-ui-framework\/custom-tabs.jpg","keywords":["Mobile Website Design & Dev","Responsive Web Design"],"articleSection":["Web Design"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/","url":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/","name":"Build Responsive Websites Faster with Semantic UI - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/semantic-ui-framework\/custom-tabs.jpg","datePublished":"2017-09-19T13:01:32+00:00","dateModified":"2022-07-13T11:41:52+00:00","description":"Frontend frameworks such as Bootstrap are still all the rage. There are dozens of great choices to pick from but one that recently caught my attention is","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/semantic-ui-framework\/custom-tabs.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/semantic-ui-framework\/custom-tabs.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/semantic-ui-framework\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Build Responsive Websites Faster with Semantic UI"}]},{"@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-9U5","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38073","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=38073"}],"version-history":[{"count":2,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38073\/revisions"}],"predecessor-version":[{"id":60397,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/38073\/revisions\/60397"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=38073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=38073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=38073"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=38073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}