Jump to content
Gazley

UI Kit & Semantic UI CSS Frameworks - Opinions?

Recommended Posts

Hi there,

I've been looking at these two CSS frameworks and wonder whether anyone uses them and has recommendations?

I currently use Foundation but it lacks in V5 and some of the stuff I want to do seems so easy in the two frameworks I've mentioned.

Many thanks!

Share this post


Link to post
Share on other sites

At first glance, my personal preference is Semantic. (Keep in mind I have not seen it before.)

It seems much more refined than UIKit, and has a whole bunch of features that I'd need for a few projects coming up. It's also less Bootstrap-like, carrying it's own design 'language', if you will. Have never been a fan of Bootstrap's default UI/UX experience, and so this is a big plus for me.

As for actually working with these two frameworks - I haven't done so myself, and, therefore, wouldn't be able to say anything about it. Upon looking at the Semantic docs, I much prefer it in comparison to other frameworks. Grid looks pretty wicked as well.

Just my 2c. ;-)

Share this post


Link to post
Share on other sites

@OrganizedFello

OffCanvas is pretty half-assed in Foundation. You have to arrange your markup containership in a certain way. In both UIKit & Semantic UI, you only need to add your OffCanvas div almost anywhere, set some properties and your away. Also Parallax and Sticky control are better.

@MikeRockett

The grid in Semantic UI is Bootstrap-like in that you still have to create non-semantic markup to create rows that contain columns. I don't think UI Kit needs the concepts of "row" divs. Currently, I don't use Foundation's grid and use the Susy 2 framework for my grids, doing away with non-semantic markup, at least where grids are concerned.

UI Kit and Semantic UI both look really good but there must be a compelling reason to use one over the other, hence the question :)

Share this post


Link to post
Share on other sites

Off Canvas in Foundation is not really half-assed, but rather a mediocre compromise. I've yet to find any off canvas solution which works well in every situation (without js).

  • Like 1

Share this post


Link to post
Share on other sites

@LostKobrakai

It's half-assed in that it is precisely a mediocre compromise from a framework that claims to be the "The most advanced responsive front-end framework in the world" (this claim is on their homepage).

It's not just the way Off Canvas is implemented but the fact that they haven't officially published definitive recipes for having both a regular NavBar working in tandem with the Off Canvas menu/trigger.

Don't mean to bash Foundation - I've been using it for several years now but, it seems to be getting a bit long in the tooth.

Share this post


Link to post
Share on other sites

I've yet to find any off canvas solution which works well in every situation (without js).

I just made one which works well, the only thing it doesn't do is multi-level items. What's your preferences?

Share this post


Link to post
Share on other sites

@Gazley

True the docs around it are shitty.

@tpr

Is it automatically expanding to 100% viewport height even with smaller content? That's what Foundation for example cannot do (at least in v4).

Share this post


Link to post
Share on other sites

Actually it does. I've sent you a PM with a live link.

Share this post


Link to post
Share on other sites

Don't forget Materialize, "a modern responsive CSS framework based on Material Design by Google.".

And in case, Materialize is supported by Pinegrow (like Bootstrap and Foundation).

NB:  I don't know if I will ever use it. Perhaps UIkit one day. Semantic UI is apparently less simple to setup.

I have been using Kraken CSS recently.

Share this post


Link to post
Share on other sites

I use Ui Kit religiously, I have tried many different frameworks. I must admit I haven't used Semantic before, however it does seem to be missing some modules that UI Kit has. 

Share this post


Link to post
Share on other sites

Hi Tom

What are the missing modules that are important to you? Ta!

Share this post


Link to post
Share on other sites

Hi @Gazley,

Hi Tom

What are the missing modules that are important to you? Ta!

There is no denying, Semantic UI is very beautiful. However UI Kit has a few more modules that lets me get work out of the door quicker (and make a bigger profit). Here are a few things that I really really like about UI Kit and some things that I don't.

Grid

1. data-uk-grid-margin 
This will add a top margin based on the grid margin when the column is collapsed. This means on mobile no elements are sitting right on top of each other. Instead they have a nice margin between each section. 

2. data-uk-grid-match

Great for having columns in which you want equal heights, you can do some pretty nice visual designs with this. Such as 50%/50% full width layouts.

Components

1. Parallax

Like most things with UI Kit it's completely modular and I only include elements I want to use, this makes it super easy. Parallax is one of those elements, it means I can easily add in Parallax elements and still keep it all in the UI Kit Framework. Other useful components include...

2. Dynamic Grid

Much like Isotope js, this allows you to create dynamic filterable grids. 

3. Sliders

There is many options here, there is Slider which allows for mouse scroll and is great for mobile. Slideset which is filterable, great for showing things like clients and Slideshow which is just your usual slider. This comes with plenty of animations, which is all also modular.

Core

1. Flex components 

While not completely supported by older browsers, this gives great control over positioning of content, such as centering content in a div. Combine this with data-uk-grid-match and .uk-flex-middle, you can create absolutely beautiful looking sites.

2. Text Columns

Responsive text columns are great, while they are relatively new in not widely supported in browsers, it's great you have that option for modern browsers.

3. Scrollspy 

Great for the elements that animate on scroll, you can add any class to this also (or even use the javascript event) to have full controls. 

Javascript Events

You can easily hook into Ui Kits javascript events to add custom javascript when certain things happen when using the modules. I know most frameworks have this, but it's a nice things to have.

Here is a CodePen showing off a few things that I mentioned (I've tried to put in as many as possible): http://codepen.io/anon/pen/dYVRgQ

---

The Bad

So here is the bad, not all the components are well polished and require little fixed. For example sliders (used in my example), I much prefer showing them 1 by 1 as it's nice for iPhone uses to use touch controls. However, if there is less than 4 elements, there is sometimes a white flicker on the previous slide as you slide through. It's subtle but it happens. I get around this by making the background black to the slider. It isn't a fix but it makes it less noticeable. The sticky menu doesn't play nicely with the offCanvas and will sometimes stick, I use CSS to get around this applying left: auto !important. Resizing the screen while offCanvas is open will not recalculate the width, breaking the responsive. I got around this by applying width: 100% !important; to the offCanvas overlay. 

One more thing is that it doesn't apply box-sizing: border-box globally by default, while this isn't much of a problem and more of a personal preference. 

Overall, these problems are being ironed out and github is getting more active. I do wish for the github community to grow as there are plenty of talented coders out there and UI Kit for me is a great framework which comes with many useful features and most importantly is modular to keep sites lightweight. 

  • Like 10

Share this post


Link to post
Share on other sites

A great and really informative answer, Tom! Very many thanks for taking the time to explain all of this for me. This is really where it's at - a real users perspective, warts 'n all.

Cheers!

  • Like 1

Share this post


Link to post
Share on other sites

I really enjoyed reading your answer @Tom, I've seen great sites built with it, but I've never really digged in the code. I think you may have talked me in to trying out a build with it. 

  • Like 1

Share this post


Link to post
Share on other sites

I've used a metric ton of different CSS frameworks on a wide variety of projects. I'm always searching for "the one" and I have yet to find it. They all have let me down badly in one way or another. My bread and butter framework is Foundation, but that's only because it's the devil I know. Personally, I hate it. I could go off about so many things that are wrong with Foundation and other frameworks.

A framework that is modular is an absolute must! The problem with frameworks is that they enforce too much of their own way of doing things (I guess that's the point). While a couple of their "modules" may be great, others are a complete let down and you end up having to roll-in all sorts of 3rd party tools to get the job done. MaterializeCSS is an excellent example of this: their modals suck. Sure they're gorgeous, but the lack of control over them is brutal. I always end up having to bring in FancyBox2 just so I can have the level of control I want. That's just the start with MaterializeCSS, like other frameworks a lot of their "modules" are half-baked implementations. Sure, everyone gets the grid and typography right (more or less), but there's so much more to it than that.

In the end my projects always feel like bastardized gluing together of a framework I'm only using part of along with a bunch of other code all slammed together and then I hope it all plays nice.

My leaning these days is to just find some majorly stripped down framework to handle the basics and then bring in anything I need on a modular / piece-meal basis. To that end, I'm looking heavily at Google's Material Design Lite, but I absolutely hate how they handle grids among other issues.

There's a few SASS frameworks out there that look really great, but my SASS knowledge sucks.

Sorry this wasn't constructive. I'll be following this topic closely. Please, someone, save us from CSS framework hell!

Share this post


Link to post
Share on other sites

Thanks all for your thoughts, I like this topic!

There's surely no "the one" CSS framework. In fact each project may require another fw that fits. Larger projects may benefit of large fws with extra stuffs like carousel, lightbox, etc, while a very simple one requires only a grid and some helpers.

Here are my findings with some fws:

Fluidable

It's only a small grid system but sometimes that's all I need. There are many similar out there, I found this one first and it worked fine.

UIkit

I liked it much but of course I had to manually tweak things here and there. Unlike other large fws I like its feel and design.

Foundation

I used this only in a few project but always felt it's too much. Usually I don't participate in projects where such a big fw would be beneficial.

Bootstrap

That's the de-facto CSS framework and if you do frontend you can't avoid it. I won't start a project with it unless I have to, but I manage many sites where it is used. Most of them are using only its grid and the menu component but they are pulling the full fw.

Base

That's the one I use the most. It's a grid and some nifty helpers. I started with v1 back then until it turned out that it's not mobile-first. This was fixed in v2, now it's a great starting point. It doesn't have any extra (js) components but that's good - I prefer doing such stuffs with 3rd party plugins.

Pure

I'm trying this out right now. It's really tiny and works fine so far. I'm not sure I will use it in the future instead Base, time will tell.

What I would really like to see is some kind of class name standardization. Almost all have different namings (e.g grids), so it takes some time to get in picture when switching projects.

  • Like 4

Share this post


Link to post
Share on other sites

Pure

I'm trying this out right now. It's really tiny and works fine so far. I'm not sure I will use it in the future instead Base, time will tell.

What I would really like to see is some kind of class name standardization. Almost all have different namings (e.g grids), so it takes some time to get in picture when switching projects.

Pure is actually pretty great. I've used it on a few projects and it really suits my desire for something minimalist and solid. My only beef with it is the navigation. I feel navigation is handled better in other frameworks (especially mobile / off-canvas).

With Base, I've heard nothing but positive ravings about it. My problem with it is that it uses LESS. Not only is LESS on it's way out the door (SASS is killing it), I'm not a fan of frameworks that force me to use a compiler for the CSS.

Another suggestion would have been GUMBY, but sadly they've closed up shop. Which brings up a point: it's probably worth sticking to a major framework as you will be more assured that it sticks around.

Share this post


Link to post
Share on other sites

Base: 

There's scss also recently: https://github.com/matthewhartman/base/tree/master/src/scss

v2.5 was out just today with a major class name changes (cite: "I also renamed all the grid classes, containers, etc to all be consistent.")

Pure:

it was a negative surprise to see that there's no grid offset and push-pull features. Fortunately there are unofficial additions to overcome this but it should be part of the framework imo, at least in a modular way.

Share this post


Link to post
Share on other sites

I've been using Pure almost exclusively for personal and work projects for a couple of years now and really like it. I can quite comfortably build lots of things on top of the existing components and have some of my own LESS additions that help out with responsive stuff.

It doesn't excel at complex form layouts as much as I'd like, but I've come up with some acceptable solutions for that.

Share this post


Link to post
Share on other sites

I mostly just need a grid and a solid typography solution.

In the above scenario, what do you use for handling menus? I'm still on the look-out for good stand-alone menu code that collapses to mobile well and has good backward compatibility. I find most framework's menu/nav modules to be flawed in some ways. In an ideal world my menu code would be:

- CSS only (maybe a bit of javascript with graceful fallback)

- IE9+

- mobile collapse (with custom breakpoint)

- drop-down capability

- icon friendly (a lot of menus suck when using icons AND text)

- easy to style

- minimal animation / fast

- minimal filesize

- fixed support

- sticky support

- ability to have sticky when menu not at absolute top (ie: below logos, etc.)

- bonus points for mega menu capability

Currently I'm using Sky Menu for some projects these days. It addresses most of my needs, but feels heavy (lots of built-in themes) and redundant (it uses it's own grid system for mega menus).

Share this post


Link to post
Share on other sites

cool topic, i am building one css/scss framework myself so keep talking about what dont like about other frameworks ;) 

Share this post


Link to post
Share on other sites

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...