Front End Frameworks

Sat Jul 06 2019

TL/DR: A quick rundown of UI frameworks that help developers frame out sites efficiently and professionally. We take a look at 5 well-known UI systems and 2 honorable mentions that can help any developer.

design

Table Of Contents

The Good Fellas Agency Front End Frameworks
All Posts Related Posts

Front-end Frameworks

Front-End Frameworks are every developer’s best friend. You get thrown into situations where you need to be able to generate a website quickly and professionally, even if the client has no direction where to start. There a lot of different options out there but these are some of my favorites and the most useful. Some are perfect to take small portions or segments of code, while others are great to create a whole system and build professional sites with UI itself. I have them broken down to the basics, more complex sits, and my personal favorite that I save for last.

The Basics

  1. Bootstrap

    2. Bootstrap was the original smart grid that allows everyone to make a responsive site with minimal effort. The smart grid alone was enough to add it to our list. It allows you to show and hide components based on your user's screen size, align them inside of content rows, and smart align objects very quickly. This great framework allows you to use individual components to customize your site the way you want it. It hooks on jQuery to allow you to have some animation without having to be a JavaScript pro. Its also nice they wrote some JS code themselves to create animation so your site isn't entirely stale and completely like other sites that use Bootstrap. I love the ability to take their components and then add your own CSS styling on top of their predefined classes.

    PROS: Lightweight, easy to use, the original UI framework most others compare themselves too and try to duplicate and its FREE

    CONS: Rigid, requires you to do a lot of touches to make it professional, can look very similiar to other sites since its very modular

  2. Pure.CSS

    3. Pure.CSS was the original competitor to Bootstrap. It took the idea of creating a smart grid to auto-align your content and have it be responsive over any device screen. Lacking in some of the finer design areas, its simple modular design lets you build sites quickly and efficiently. its simplistic design is great for minimal design. They were very smart to design some simple layouts that can be added to Wordpress, or you can take small components and add them to your site.

    PROS: modular, simplistic design, smart grid for responsiveness, FREE

    CONS: Rigid, requires you to do a lot of touches to make it professional, can look very similiar to other sites since its very modular

    More Complex for Pesonalization

  3. UI Kit

    4. UI Kit is known for having several modules that you can customize and implement to your site. It is most known for being a building block for a lot of themes in Wordpress. With a bevy of components to customize you can take any of the components you need and customize your site with exactly what you need only. While it might not be as well known or as popular as Bootstrap or Pure.CSS, it might be considered a hidden gem because you can create your own themes based on its flexible components.

    PROS: lots of components, simple theming, robust code, FREE

    CONS: requires a lot of personal coding, you have to know some JS code yourself, requires a bit of a learning curve and coding experience

  4. Symantic UI

    5. Symantic UI is a comprehensive UI system that feels similar to Bootstrap but has some cosmetic differences in the CSS and it requires you to write your own JS for every animation and DOM manipulation. While this might feel like is a lot more work than necessary it actually allows you to be more precise and use your coding skills to make it more personal. Thankfully it keeps bootstraps lightweight frame and smart grid inside so your site is still responsive, and it lets you take individual components and put a site together with how you want it to feel.

    PROS: Lots of components, a more comprehensive bootstrap layout, solid building bloacks and dynamic layouts, FREE

    CONS: Requires a lot of personal coding, you have to know JavaScript and be willing to write it, has a sharp learning curve and requires some coding experience

    My Personal Favorite

  5. Material Bootstrap

    6. Material Bootstrap is by far my favorite UI system because it takes the core of bootstrap, its smart grid, and combines the Material design of Google to make a simple, out of box UI that creates sites that look professional and unique with minimal customization. They have a free plan and a PRO plan that includes templates and exclusive sections that I think are totally worth the price. Its fluid animation, design, and add-ons make this comprehensive UI system by far the best. Its also super helpful that they have taken a lot of time to perfect their CSS and JS components that go with their building blocks to give you some easy animation. The best part is that it is still lightweight and the material design makes it sleek and welcoming on all screens.

    PROS: Almost unlimited components and layouts, professional design, unique animations that can be added anywhere

    CONS: Has paid components, code can be bulky... Seriously, thats it.

Honorable Mentions

Two other ones that were close but just didn't quite make the list were Foundation by Zurb and Materialize. They are both simple UI systems that make for great foundations for sites, but both of them lacked some necessary components that others covered. Feel free to check them out as well and let your creativity flow. There is no wrong answer when it comes to a UI framework, just always make sure you do soem customization yourself so it doesn't look exactly like a template for their demo pages!

All Posts Related Posts