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 added features and proves that Semantic is gonna be around for the long haul.

With dozens of CSS variables, simple responsive classes, and easy-to-setup layouts, you’ll have no trouble working with Semantic UI on your own.

Read Also: Customizing Bootstrap Layouts: Trends, Tools & Frameworks

The simple class names and grid structures really give meaning to this framework being called “Semantic”. The classes are very sensible and this makes your HTML easy to read at a distance.

It even comes with jQuery support for dynamic page elements such as carousels and dropdown select menus.

Every HTML element under the sun is customized and fully functional with Semantic UI. This includes HTML5 elements plus extra functionality like ratings and custom tabs.

custom tabs

But, perhaps the best part of Semantic is the theming setup. Not only do you get tons of pre-designed styles and dynamic elements, but you can also restyle these yourself building on top of Semantic’s code.

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

  1. Semantic Default
  2. Chubby
  3. Raised
  4. Classic
  5. Google Material
  6. Amazon
  7. Bootstrap
  8. GitHub
  9. Twitter

These are just the tip of the iceberg and they act more like starting points to design your own theme.

Semantic UI Amazon theme

If you’re building a new landing page or custom website from scratch then seriously consider working with Semantic UI. It’s totally free and open source with great documentation online.

You can browse through layout styles, along with guides for all the main elements and custom theming.

And, you can download a copy of the source code directly from GitHub, which also includes a guide for beginners.

Read Also: Vital CSS – A Minimally Invasive Web Framework

The post Build Responsive Websites Faster with Semantic UI appeared first on Hongkiat.

Similar Posts

How to Update Old Content on Your WordPress Site

How to Update Old Content on Your WordPress Site

Maintaining a steady flow of traffic to your WordPress site isn’t only dependent on constantly producing brand new content. Updating old content is a great practice to keep benefitting from the posts you’ve already worked on. It’s possible to take advantage of Google’s freshness algorithm and generate a new burst of traffic for the updated content, as well as provide a better user experience for visitors to your site ensuring they never find old or irrelevant information. 

In this post I’ll cover:

  • The easiest way to update existing posts in WordPress
  • How to push your content to the top of your blog feed again
  • How to let Google know your content has been updated without pushing it to the top of your blog feed again

How to set up a cornerstone content strategy with Yoast SEO

On your site, you’ll probably have a few articles that are most dear to your heart. Articles you desperately want people to read. Articles you want people to find in Google. At Yoast, we call these articles your cornerstone articles. How does the Yoast SEO plugin help you set up a cornerstone content strategy? I’ll […]

The post How to set up a cornerstone content strategy with Yoast SEO appeared first on Yoast.