How do you start building some stylish UI elements? Do some Google search, copy paste some CSS and style the elements? CSS Front-End UI Frameworks allow you to do just that. CSS frameworks are pre-prepared software frameworks that are meant to allow for easier, more standards-compliant web design. And by the virtue of their very specific purpose, they are built for the modern web, contain core elements like responsive grids and many other design elements that come to life with some simple markup and CSS classes.
These CSS frameworks typically come with a reset CSS (typically normalize.css), a responsive grid, well defined typography, some provision for icons typically implemented via a font like fontawesome etc. and many other interface elements and other helper classes. Here are 4 CSS frameworks that you can incorporate into your next WordPress theme for rapid design development.
1. Bootstrap
Bootstrap by far is the most popular. One of the reasons for it’s popularity is perhaps because it’s one of the oldest in this list and was built by Twitter. Having personally tried each of the frameworks here I found Bootstrap to be evolved and mature though with dated styles.
2. Foundation
Foundation is the second popular choice and is used by sites like Facebook, Mozilla and several other big-shots. Foundation calls itself the most advanced UI framework.
3. Semantic UI
I like Semantic UI because it’s got the most modern styles and is the most cutting-edge framework in the list. It’s one of the newer entrants in the CSS framework world.
4. UI Kit
UI Kit is the smallest in this group as far as file-size is concerned. It’s also one of the newer entrants in the CSS framework world. I also found that they are still in the process of building more UI elements into it.
How To Integrate A UI Framework Into Your WordPress Theme
Integration of CSS UI Framework into WordPress can be tricky if you are doing it into your existing theme. The reason is that your existing CSS styles could interfere with the framework CSS or vice-versa. Even if you are building a theme from scratch, the key to getting the integration right likes in the order your styles are enqueued.
- Reset First …and only once. All CSS frameworks come with their own reset css built-in. So the first stylesheet that is enqueued must be the framework itself, because that’s the one that starts with the reset.
- The CSS Framework: After the reset, the CSS framework stylesheets must be enqueued. This gives you an awesome base to start building upon.
- Your Theme’s Stylesheet: And finally it’s time to enqueue your theme’s stylesheet. Now that you already have a reset and a framework integrated, your theme’s stylesheet doesn’t need to re-implement a reset. And you can also get rid of the bulk of the core styles. You only have to style what isn’t already there in the framework; and these are typically the WordPress styles for elements like captions, header-elements etc.
- JS in the footer Yup, because it looks the most beautiful in the footer. Wrong! The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won’t start any other downloads, even on different hostnames.
I’ve found that UI Frameworks come in handy when you are designing landing pages or critical UI elements that affect the user-experience and the conversion rates on your website. However building a UI framework into your theme means that you start with a solid base and code minimal to get the max.
