Introducing Semantic UI, an easy to understand responsive front-end framework.

If you have been a web designer for a long time, it is more than likely that you have come across, or at the very least, heard of Bootstrap. Much like jQuery, it is a front-end framework–-initially established by Twitter–-that tries to reduce the coding time of HTML/CSS/JS websites by centralizing common design elements into a single component library. Containing such pre-coded elements as a responsive grid system, form validation, lightbox, icons, fonts, essentially everything you need to get a website up-and-running in no time.

There are quite a few different front-end frameworks out there, but the two leading the ranks are Bootstrap and Zurb’s Foundation. Continually being updated with the latest in coding trends, such as Sass/less, these frameworks are only getting ever more popular, and easier to use.

However, there is a growing trend in the web industry among designers and developers alike, to move towards a more Semantic Web. According to W3Schools, “A semantic element clearly describes its meaning to both the browser and the developer.”  For example, <header>, <section>, <form>, <time>, etc.

Originally leaked back in March 2014, Semantic UI “is a component library implemented using a set of specifications designed around natural language.” These set of natural language specifications not only make the HTML and CSS code simpler to understand, but far easier to share among others.

Since the component library is based on natural language, it essentially turns coding into a kind of conversation with your code editor.  There is no longer a need to try and memorize intricate naming conventions when setting up things like a responsive grid system.

“Semantic is tag agnostic, meaning you can use any html tags with UI elements.”

The following is an example of how Bootstrap and Semantic UI create a three column grid.

Bootstrap

<div>

<div>1</div>

<div>2</div>

<div>3</div>

</div>

Semantic

<main>

<aside>1</aside>

<section>2</section>

<section>3</section>

</main>

Large rounded button with a heart icon:

Bootstrap

<button type="button" class="btn btn-primary btn-lg">

<span></span> Like

</button>

Semantic

<button>

<i></i>  Like it

</button>

While Semantic UI does not have the number of integrated components within its library as Bootstrap or Foundation, it certainly is gathering a large support group on GitHub quite rapidly.  With components being added regularly, fixes and updates daily, as well as being implemented on production sites even before reaching version 1.0, Semantic UI is certainly looking like it will be ready to come head-to-head with the big dogs.

So what do you think, does Semantic UI have the potential of giving Bootstrap a run for its money?

 

Resources - 6 Jun 2014 - by Rob Jennings

About Rob Jennings

When he found himself embroiled in a conversation with someone talking about their ‘customer-centric core competencies’ he realised it was time to create a Web Design Agency that was less about self promoting buzz-words and more about people and giving them the tools to understand the web.

The idea behind We Push Buttons was to create an environment where business owners can learn about building their organisation, whether it be with an outstanding website, SEO or any other marketing ideas. Coming from the art industry and online retail background he knows first hand the needs of growing a business in a tough environment.