UIKit Rocks

When I published this site in June, it was insane. I had spent an entire day trying to rewrite the whole UI on UIKit and it didn’t work. With a splitting headache and spending 12 hours in front of my laptop I finally decided, to surrender to Bootstrap. After almost losing hope with UIKit and also tweeting about the terrible experience, I still relentlessly pursued it. 2 months gone and I love this –

Why do I like UIKit better than Bootstrap?

  • Feature set: Bootstrap has got a brilliant feature set but UIKit has it all and more. For example the UIKit JS library allows you to do what Bootstrap does (Accordian, Carousel, Modals etc.) and even much more (Off-canvas, Scrollspy, Slider, Parallax to name a few). This helps remove dependencies from other JS libraries.
  • Mobile design: UIKit defines the viewport and devices much differently from Bootstrap. I specifically like the “hidden” and “visible” classes. Instead of defining CSS media queries, I can use HTML classes to show/hide pieces of HTML. Of course the down side here is much more HTML code. NOTE – the post list that you see on the mobile version of my site is invisible on desktop using this feature.
  • Utility classes: One of the more useful features of UIKit is it’s utility class. Centering an element inside an element, or adding margins, removing padding already set and such simple utilities helped me not write excessive CSS and unnecessary class/id definitions. Bootstrap does have some of them but not all.
  • Class definition structure: I write HTML/CSS because I love them and when I look at my code, I can clearly differentiate which classes have been defined by me and which ones I have used by UIKit. Having a simple prefix such as “uk-” helped read code better than when I used Bootstrap.

These are just some of the top reasons for me liking UIKit. That said, I have not quite experimented with the UIKit JS library and I’m sure that is a different beast to tackle.

In closing, I am really thankful to both Bootstrap and UIKit for making web development so much easier than back in the day.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Powered by WordPress.com.

Up ↑