Categories
IT Development Web Development

Semantic UI or Bootstrap? Discover the pros and cons of each framework

Among the multiple frameworks currently available to web developers, Boostrap remains the guild’s favorite. However, now, various frameworks compete for the love of front-end developers, and some, like Semantic-UI, have made their first steps and have more and more followers.

Let’s start by learning a little about the history and characteristics of Bootstrap and Semantic UI, and then review the pros and cons of each.

What is Bootstrap?

Bootstrap is the framework behind several of the popular websites such as Netflix, Espn.com, and CNN.com. This tool allows web developers to create projects that, without it, could take several days or weeks.

Developed by Mark Otto and Jacob Thornton at Twitter offices, Bootstrap sought to save time for web designers on the social network while ensuring that the website maintained a similar style across all sites.

The Bootstrap Community

Currently, this framework has one of the largest and most active communities. At the time of this writing, there are close to a hundred thousand questions on StackOverflow tagged as twitter-bootstrap, of which over 70% are resolved. About the latest version of Bootstrap (Bootstrap 4), there are 20 thousand questions, 85% of them fixed.

In addition to the essential help of the StackOverflow community, Bootstrap maintains communication with the developers through its official blog, Twitter account, and Slack and IRC chats on Freenode.

In short, Bootstrap is the most popular framework. But also Windows and the QWERTY keyboard are the most popular in their respective areas and, for that reason, they are not the best. Let’s see below some of its strengths.

Pros of Bootstrap as a framework

To retain the title of the most popular framework, you must do at least one or two things well. If not, the developer community will either quickly find other solutions or develop them themselves.

These are some of the advantages that the developers point out about Bootstrap:

  1. Fewer cross-platform errors. An advantage of having a large community is that it is easier to detect a mistake and correct it. The web design solutions offered by Bootstrap work in most browsers.
  2. A consistent framework that considers most compatibility issues. The design looks great in your latest version of Chrome, but not in your client’s Internet Explorer 7. With Bootstrap, it is possible to avoid most of these problems.
  3. Light and customizable. Whether you use it externally or within your project, Bootstrap optimizes resources and allows you to make your design changes.
  4. Responsive styles and structures. This feature is one of the favorites by developers, who must take it more seriously than they do web pages for multiple platforms. With Bootstrap, it is possible to make responsive sites from scratch.
  5. JavaScript plugins that use jQuery. Making dynamic sites is easier even for front-end developers with little JavaScript experience.
  6. Well documented support and an active community. We mentioned it before, but it’s worth mentioning again. If there is a problem with Bootstrap, someone probably already has a solution.
  7. Hundreds of free and professional templates, WordPress themes, and plugins. Another consequence of having an active community is the large number of free resources that exist made with the framework.
  8. A grid system easy to implement. This Bootstrap feature has now been improved in version 4 thanks to the incorporation of flexbox.

Cons of Bootstrap

But if Bootstrap were perfect, there would be no room for other frameworks like Foundation, Bulma, or Semantic UI, which will be discussed later.

These are some of the Bootstrap features that can cause a headache:

  1. Departing from Bootstrap’s predefined layout can be a pain. To make changes to the base design of the framework, you will probably have to overwrite styles or rewrite some files, which can take as long as having done the project from scratch.
  2. Departing from Bootstrap’s predefined layout can be a pain. To make changes to the base design of the framework, you will probably have to overwrite styles or rewrite some files, which can take as long as having done the project from scratch.
  3. You will need to take extra steps to customize a site. If not, you run the risk of all sites looking the same.
  4. Styles can be very bulky, causing a lot of unnecessary output for HTML.
  5. Since JavaScript is tied to JQuery, there may be many plugins that will not be used.
  6. Unpleasant HTML. The large number of classes that are sometimes necessary can make the HTML used not very pleasant to review later. Also, the name of the classes can be less intuitive than Semantic UI.

Where can I learn to use Bootstrap?

In English, you will find a lot of info and tutorials for using Bootstrap. One of my favorite sites is w3schools, which has tutorials for both Bootstrap 3 and Bootstrap 4. It is best to learn how to use version four as Bootstrap 3 will soon be discontinued.

What is Semantic UI?

Semantic UI is a framework for CSS, like Bootstrap. Full-stack developer Jack Lukic created this framework based on natural language principles, becoming one of the leading JavaScript projects on GitHub.

Semantic UI has a small but very loyal and enthusiastic community. In a short time, it managed to overgrow. In 2015, the community had already created more than 3,000 themes for the framework, in addition to more than 50 components for the user interface, and carried out 3,800 commits on GitHub.

Semantic UI Pros

  1. Very easy to use. This reason is one of the main ones for developers. Semantic UI is very intuitive. Do you want three columns? Type “three columns.” You want a dropdown. Type “dropdown”.
  2. Less time to design a page. Naming Semantic UI classes with meaningful names not only make the learning curve shorter but also makes developing projects more intuitive and faster.
  1. Wide variety of themes available. Layout variety is a weak point of Bootstrap and a strong point for Semantic UI. You can probably find a theme for the projects you are developing.

Cons of Semantic UI

  1. Less browser compatibility. Semantic UI does not support Internet Explorer 7, which Bootstrap does. Being an old version, this is probably not a significant problem.
  2. Less responsive design. Unlike the previous point, this can be a bigger problem, considering that web designers are increasingly forced to think about a wide variety of devices. We will have to wait for development to grow to find better solutions to these issues.
  3. Smaller community. On GitHub, Bootstrap has more than 50,000 followers, while Semantic UI does not reach 1,000. Meanwhile, on StackOverflow, there are only 2,500 questions about Semantic UI, with about 25% of the questions unsolved.
  4. Few recent updates. Perhaps this is the most worrying point about Semantic UI, and that caused concern among its followers just over a year ago. The development of Semantic UI seemed to be abandoned for a long time, more than a year passed without any commit between 2018 and 2019. This situation caused the same community to create some forks for Semantic UI, as in the case of Fomantic-UI. However, developers commented last year that the new version was taking longer, but was almost ready.

Part of the delay Semantic UI has shown was due to differences between Jack Lukic and Levi Thomason, one of the main collaborators in the project, about the necessary changes. Thomason considers CSS in JS to be the future of web development and insisted on leading the project in that direction.

Currently, Semantic UI is still in development and now with other forks as an alternative for those who do not fully agree with the changes of the main collaborators. On its website, the framework has detailed documentation, and there are already some materials to learn how to use it in English, like this video:

Which is better: Bootstrap or Semantic UI?

This cliche question merits a cliche answer: it depends on the project. If a unique design is not the main thing, you have time to spare, and you prefer to have a lot of resources available online to solve problems, Bootstrap may be the most reliable alternative. On the other hand, Semantic UI can be an alternative worth trying for a project that needs to be completed in a short time, and that requires unique design, but keep in mind that the fact that the community is still small can cause trouble if you get stuck somewhere.

Categories
IT Development Web Development

CSS Layouts: Know why Flexbox and Grid are getting popular

For some people with many years on web development, float positioning was a default option for creating a CSS Layout. But nowadays, web developers have more options and fewer bugs with Flexbox or CSS Grid.

Creating CSS Layouts with Flexbox and CSS Grids is super easy. However, the learning curve could be the first blocker for many web developers. So, many of them still trust the unreliable floats, the unflexible positioned elements, or the complex Bootstrap.

A brief layout’s story

Websites have changed a lot in the last decades. They started as static pages without any format. Now, you can find an utterly interactive webpage with a lot of users creating content at the same time. 

Websites have advanced because web-development has done. In the early years, Web-developers figured out how to create layouts using tables; a practice punished nowadays by search-engines and semantic web advocates. 

Float and position properties became a better solution for CSS Layouts for a while. Float property started like a valuable way to give webpages a magazine look-a-like feeling. So, developers can arrange an image and let the text flow around it, or they can create boxes with particular box info aside from the main article. 

After a while, web-developers realized that they also could use float property for building more dynamic and responsive layouts. However, developing CSS layouts wasn’t the first aim of the float property. So, sometimes it can be a real headache when trying to design a responsive site, or it couldn’t be the most elegant solution when you need to specify to clear in each element after a float.

In recent years, two new CSS modules have arrived to revolutionize the way that we create CSS Layouts: Flexbox and CSS Grid. These CSS techniques allow web-developers to build more complex and responsive design layouts that work in many browsers.

Know the Grid

Since October 2017, all major browsers -Chrome, Firefox, Safari, and Edge- offer support on CSS Grid Layout without vendors prefixes. Now, web-developers have a powerful two-dimension tool for developing CSS layouts in less time and with fewer problems.

For some people, Grid offers “the most powerful layout system available in CSS.” Like a two-dimensional system, developers can set columns and rows up. 

How easy is using a Grid Layout in CSS? It’s incredibly easy. The first step is creating a Grid container element. It could be a “main” or “aside” element, or a div with a particular class. For example:

.my-first-grid {
  display: grid;

Then, specify how many columns and rows will the Grid have:

  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 20px);

The last lines mean four columns of the same proportion and four rows of 20 pixels each one. So, your code will look like this:

.my-first-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 20px);
}

Then, place the child elements of the grid-column and grid-row:

.my-first-child-element {
  grid-column: 1/2;
  grid-row: 2/3;
}

That means “place these class on the first column and the second row.”

You can find more detailed documentation about Grid in A complete guide to Grid or play this game meanwhile mastering the basic concepts.

Think inside the Flexbox

The Flexible Box Layout or Flexbox is a module aiming to distribute space or aligning items inside a container in the easiest way possible. Currently, it’s a W3C Recommendation with its last update in November 2018. 

A crucial difference between Flexbox and Grid it’s that Flexbox is a one-dimension system. Creating columns and rows in flexbox isn’t possible, but that’s a core part of its flexibility. Web-developers can order items and manage the space between them, even without knowing the size of the container.

This feature is convenient nowadays when web-developers need to design websites that users will retrieve in a wide variety of devices, like smartphones, laptops, or tablets.

Flexibility is an asset, and Flexbox gives that.

For displaying Flexbox, you select Flexbox in the display property of a container:

my-first-flexbox-container {
	display: flexbox;
}

Pretty easy, isn’t it? Yes, but beginners will need to learn some basic things about flexbox to take full advantage of this tool.

First, the default axis is horizontal-based and goes from left to right. If there’re four elements inside a container, they will order in this way by default:

Image from Mozilla Developer´s page.

For changing the order of the elements, add flex-direction property. For changing the initial position of the items, add justify-content property. For example, for ordering items like a column in the center, the code would be:

my-first-flexbox-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

Master the basic concepts of Flexbox with A complete Guide to Flexbox and get fun playing this game.

Which is better: Flexbox, or Grid?

Both Grid and Flexbox can be used for building responsive design and complex layouts, but they are different techniques, and, like every web project, one is better than the other depending on what do you want to achieve.  

Flexbox is a simple, reliable, and fast solution for small-layouts and the elements of an application. Meanwhile, Grid is a more reliable technique for big-scale layouts.