SEMANTIC UI

SEMANTIC UI

What is Semantic UI?

Semantic UI (User Interface) is a modern front-end development framework, powered by LESS and jQuery. It has a sleek, subtle, and flat design look that provides a lightweight user experience.

Website or web application interface usually consists of:

 

  • HTML code that is responsible for a structure (information order),
  • CSS (Cascading Style Sheets) which main task is to visually format website,
  • JavaScript code, used to incorporate dynamic elements, e.g. slideshows, calculators or expanding menu.

Framework is a platform, foundation on which ready software solutions are built, in this particular case – web interfaces. For this purpose front-end framework consists of ready components, which are used by a developer when working on a project. What is more, aforementioned components, if necessary, can be modified or adjusted to current needs

 

Difference between Semantic UI and Bootstrap

The structure of Semantic UI components is much more difficult than Bootstrap, as is the installation process. While Bootstrap provides only one basic theme, Semantic UI includes more than 20+ themes in its basic package, in addition to CSS, JS, and fonts files. It also includes Composer, Bower, and Gulp config files.

How to use this Semantic UI

You can just copy files to your project and link .js and .css files to HTML code and start using it. But Semantic UI’s recommended way of using the framework is different than what we described above. First of all, the best practice is to install Gulp and Composer to your server, rather than just copying files.

Columns

Grids divide horizontal space into indivisible units called “columns”. All columns in a grid must specify their width as proportion of the total available row width.

All grid systems choose an arbitrary column count to allow per row. Bootstrap’s grid system allows up to 12 columns across the page but, Semantic UI Grid layout is composed with 16 columns. You apply class names to HTML elements and you get a nice looking webpage.

How to create an Image Grid in Bootstrap

Code

<div class=”row”>

<div class=”col-md-4″>

<div class=”thumbnail”>

<a href=”lights.jpg”>

<img src=”lights.jpg” alt=”Lights” style=”width:100%”>

<div class=”caption”>

<p>Lorem ipsum…</p>

</div>

</a>

</div>

</div>

<div class=”col-md-4″>

<div class=”thumbnail”>

<a href=”nature.jpg”>

<img src=”nature.jpg” alt=”Nature” style=”width:100%”>

<div class=”caption”>

<p>Lorem ipsum…</p>

</div>

</a>

</div>

</div>

<div class=”col-md-4″>

<div class=”thumbnail”>

<a href=”fjords.jpg”>

<img src=”fjords.jpg” alt=”Fjords” style=”width:100%”>

<div class=”caption”>

<p>Lorem ipsum…</p>

</div>

</a>

</div>

</div>

</div>

 

How to create an Image Grid in Semantic UI

Code

<div class=”ui five column grid”>

<div class=”column”>

<div class=”ui segment”>

<img src=”/images/avatar/large/elliot.jpg” class=”ui fluid image”>

</div>

</div>

<div class=”column”>

<div class=”ui segment”>

<img src=”/images/avatar/large/matt.jpg” class=”ui fluid image”>

</div>

</div>

<div class=”column”>

<div class=”ui segment”>

<img src=”/images/avatar/large/jenny.jpg” class=”ui fluid image”>

</div>

</div>

<div class=”column”>

<div class=”ui segment”>

<img src=”/images/avatar/large/steve.jpg” class=”ui fluid image”>

</div>

</div>

<div class=”column”>

<div class=”ui segment”>

<img src=”/images/avatar/large/stevie.jpg” class=”ui fluid image”>

</div>

</div>

<div class=”column”>

<div class=”ui segment”>

<img src=”/images/avatar/large/veronika.jpg” class=”ui fluid image”>

</div>

</div>

<div class=”column”>

<div class=”ui segment”>

<img src=”/images/avatar/large/justen.jpg” class=”ui fluid image”>

</div>

</div>

<div class=”column”>

<div class=”ui segment”>

<img src=”/images/avatar/large/tom.jpg” class=”ui fluid image”>

</div>

</div>

<div class=”column”>

<div class=”ui segment”>

<img src=”/images/avatar/large/helen.jpg” class=”ui fluid image”>

</div>

</div>

<div class=”column”>

<div class=”ui segment”>

<img src=”/images/avatar/large/christian.jpg” class=”ui fluid image”>

</div>

</div>

</div>

 

Semantic UI design is better than Bootstrap framework. Easy to use, light weight and the documentation is very useful for create our own Web App.

Hope this blog inspires you to embrace change and grow. Whether you are an XPLORER or not, feel free to glance through our blogs and help us guide and support you in your voyage to success. Happy Learning!

0 responses on "SEMANTIC UI"

Leave a Message

Your email address will not be published. Required fields are marked *

About Xplore IT Corp

XIC is home to several global certified trainers who are subject matter experts in their respective domains. XIC has Vast experienced resources who are top experts including that of Microsoft, Cisco, Oracle, VMware, Red Hat, Novell, EC Council, Adobe, among others.

top
© Xplore IT Corp 2017. All rights reserved. Designed by Web Design Company
Xplore WhatsApp Chat
Send via WhatsApp
X