Since I founded Gittr with my business partner, Brennan, we’ve used the MaterializeCSS front-end framework. It’s got all of the standard components a modern framework should have: a decent grid, modals, tooltips, navigation options, dropdowns, buttons, and more. It also offers SASS and JS source files so it’s modular, expandable, and you don’t have to load anything you don’t need. I really like all these things. I also really like how it looks and how easy it is to use. It’s pretty forgiving and building custom components using both pre-existing components and customized SASS/JS is a breeze.

With all that said, it does have its fallbacks. An issue that we constantly came across was tables in modals. While that’s not a huge worry (honestly probably not a good design choice, either), small annoyances like this were popping up all over the place and more frequently as time went on. When we launched in January, a big issue reported by some of our clients was double-loading navigation. Basically, when switching a phone or tablet from landscape to portrait (or vice-versa), the navigation would “double up” on itself, causing the visual element to be over a tap-target and making the navigation useless until the page gets refreshed.

Aside from the issues we had, we looked at MaterializeCSS 1.0 Alpha. Though some things to seem to be improved, I’m sad to say that the framework doesn’t seem to be much more useful. We used it to build our Documentation and I have to say I was not happy with it. A lot of the features they include don’t work out of the box (Timepicker, Datepicker, and Scrollspy, to name a few) and it seems like the quality has overall gone down.

Enough about all that though – here’s the point of this post: we’re looking for a new framework. We’ve selected three to try out: Bootstrap, Bulma.io, and Semantic UI. We’re going to score these frameworks against each other based on a few benchmarks:

• Ease of Use
• Filesize
• Components
• Accessibility
• Extendability
• Durability

We don’t have a “scientific” way of breaking down these qualifiers – pretty much we’re going to see what works best.

I’m going to be using all three to rebuild my portfolio iteravely. I’ll have three versions and keep up the version I liked building most. I’ll also be writing a review for each version. So this post is the first in a 4 or 5 part series, I guess.

Short overviews

We did go through a short selection process before deciding what frameworks to try out. We looked at the framework’s documentation and tried to look for a few key elements: a good grid system, logical HTML, class names, and a standard set of components. Here’s my thoughts on the three frameworks selected for further review.

Bootstrap

I think Bootstrap is an obvious candidate. They set a lot of standards in the industry and are a role model for other frameworks. Their grid system is really reliable, but not all that modern. We were really looking for something that utilizes the new CSS Grid system. The HTML is a little bloated and doesn’t seem all that semantic, but their focus on accessibility is definitely a plus. The thing I can’t get over is the class naming. Peruse the following from their documentation:

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md, lg, and xl.

So an element could have a class of pt-md-3 pt-lg-4 pt-xl-5, rather than just a single CSS declaration based on relative units, say padding-top: 1.25rem;. That seems messy.
Bootstrap does offer a great set of default components, though, and is very extendable, which is a huge plus because we do use a few custom components.

Read my Bootstrap Review here

Bulma

Bulma was Brennan’s suggestion. On the surface, I think it looks much better than Bootstrap. Their grid system is based on Flexbox, which I utilize regularly, so I’m very comfortable with it. The features of their grid are all very standard – multiple ways to set width, offsets, and utilize breakpoints. Vertical centering is a breeze (big plus). I like how easy it is to understand their naming conventions, too. Their components are a standard set, but they also have media objects, tiles, and panels (I really like panels). It’s also SUPER lightweight with no JavaScript required. Dang!

Read my Bulma Review here

Semantic UI

Semantic UI sounds really interesting on the surface. I first hear of it about a year ago from some podcast as the only real “modern” framework. I think the visual design looks okay. Their grid system is also flexbox based, but the naming conventions seem…clunky. The HTML is rather slim, though. They definitely check all the boxes with the components and then some. Just browsing through the docs, I’m really really excited to use it.

Read my Semantic UI review here

No Comments...yet