Category: Web Design

HTML5, Responsive Design, CSS, Frameworks and all matters related to building a website.


Curving Pixels

I Like Curves

Too many websites are still nothing but straight lines and 90 degree angles. I enjoy sites with rounded curves though.

Straight lines are just boring.
When working on a website, one of the first things that I add is a CSS rule similar to : .curvy { border-radius:20px; }
I also add something like: .curvysmall { border-radius:10px; }
As I design a site, I can then add a couple of different sizes of curves using either of the two CSS classes above.
Did I mention that I like curves? I love border-radius.
If you’re new to CSS, border-radius allows us to add rounded corners to elements.
Adding .curvy or .curvysmall to an img or div adds a nice visual touch. Toss in a border too if you are inclined.

        .curvy {
            border-radius:20px;
            border:1px solid #555;
            }
        

The above example adds curves to all four corners of an element. You can dig deeper into this property by reading. Border-radius: create rounded corners with CSS!
If you just want a generator for this, check out: http://border-radius.com/. Just add whatever size of pixels you want to use in the boxes along the corners and watch the effects. Copy and paste the code where you want to use it.

The HTML side might end up looking something like this:

    <div class="curvy">
    <img>
    </div>

The green border around this blog is an example of some curving.
Maybe, it’s just me, but rounded corners are just more appealing. I do tend to sprinkle this CSS style around my sites a bit liberally though.
I hope you don’t mind the extra curves.

Please Keep Using Twitter Bootstrap

Bootstrap Foundation

[Update]: This site was flavored with Bootstrap 3 but is now Foundation 6 built. (more on that later)

Let’s be honest : A great many of us like sites that pop. Starting from a foundation that is quick to implement and solid on the standards allows us to build something that can shine from mobile to desktop – quickly.

Twitter Bootstrap is a great foundation that allows developers and designers to begin a site on a well thought out foundation. I won’t spend time on the technical reasons why Bootstrap rocks, but want to address why it might be good to forget those who tell the web, “Please, stop using Twitter Bootstrap.”

Ok, designers have an eye for detail and quickly get bored. However, just because a foundation begins with some common eye candy – like a dark navbar, large hero area or Helvetica Neue – doesn’t mean that creativity stops there, or should stop there.

From my personal experience, Bootstrap is fun to work with and quick to adapt in many situations – from hand-rolled sites, boxed and ready to go Initializr solutions or WordPress layouts.

Starting from a standard Bootstrap foundation, the real creative work can begin. You can do whatever you want with that navbar and some solutions on the web allow you to customize it in different ways – or just tackle the CSS/LESS yourself.

A Bootstrap site does not have to look like a Bootstrap site. Take a look at some of these sites:

Built With Bootstrap

Here’s one I’m playing with:

skyrisere.com

Bootstrap is just a starting point. It saves time with the fundamental stuff and frees up the creative juices for making a site look however you want it to look.

Times New Roman does not describe what Bootstrap is or needs to be. A good designer, can make anything pop. Some look only at the surface and not the possibilities though.

Bootstrap offers much in the way of possibilities.

Please keep using Bootstrap – it will lead to more interesting sites as you play with the look. If you’re not feeling the love, there’s nothing that prevents us from mixing it up.

Helpful Links