Beautiful web design frameworks

For my upcoming WordPress-based web application I need to create a nice design of its front-end. The first step is to wireframe the site so you have a basic idea of its layout. After that, the wireframes are transformed into a usable and appealing design. Nowadays, there are plenty of HTML/CSS frameworks which can constitute the basis for the web pages design. Going through countless sites, I’ve selected a few which really got my attention. Let’s look at them!


From the first look, Pure.css is astonishing. Small but with a feeling of being complete. It is based on flat design principles: buttons are rectangular with a single color, each component is minimalistic, etc.

Pure.css demo layout
Figure 1: Pure.css demo layout

The whole library is only 4KB in size, which is undoubtedly remarkable. On the other hand, I find it too bare, like something is missing. It might be enough if you are comfortable with having to style components not included in the framework. However, as I want to focus more on the programming parts of the WordPress-powered web application, I’m not choosing Pure.css for my project.

Bootstrap with Material Design

Twitter Bootstrap is a well-known CSS framework in the web design community. It contains fundamental components such as a navigation bar, dropdown menus, tables, icons and much more. Bootstrap is a trend setter and de facto the web design framework. The problem is, if I use it as it is, my site will hardly differentiate from zillions of other sites out in the wild.

Luckily, I discovered an amazing Bootstrap theme — Material Design.

Material Design Bootstrap theme
Figure 2: Material Design Bootstrap theme

Just try it. Click on a button, type something in a form, check a checkbox or toggle a button! It feels so natural, so polished. And the typography, wow…

Material design is Google’s invention, all props to them. As they state in the goal section: “Create a visual language that synthesizes classic principles of good design with the innovation and possibility of technology and science.” Exactly like that.

At the moment, I’m sold on this Bootstrap theme. But wait, there is another very popular CSS library I forgot to mention — ZURB Foundation

ZURB Foundation

To be honest, I have no experience with the Foundation. Their landing page brags about it being “the most advanced responsive front-end framework in the world” [emphasis mine]. Well then, I gotta try it too!

Foundation has quite a lot of predefined grid templates out of the box. Hmm, that’s nice. Oh, the off-canvas menu — something I’m definitely going to use in my web application. They have also Sass support. I cannot stress enough adopting a CSS preprocessor such as Sass or LESS in your web designing workflow. Unimaginable how I was able to work without it before.

Anyways, one size fits all doesn’t apply here so you should always consider different aspects when deciding between various CSS/HTML frameworks and libraries. Share your favorite ones so we can have a flame war. I love them!

Bonus: Material Design Hamburger

Material design hamburger — closed
Figure 3: Material design hamburger — closed
Material design hamburger — open
Figure 4: Material design hamburger — open


Leave a comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your 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

%d bloggers like this: