Your posts match “ css ” tag:

Comparing Foundation to Bootstrap

As far as I know, most web designers / developers are using Bootstrap as front-end framework in their projects. But today I wanna talk about another framework: Foundation .

What's the other guys talking about this

However Felippe Nardi has a very well post Top 5 Core Differences Between Bootstrap 3 and Foundation 5 about this topic, and summarized his opinion as below:

ZURB and Twitter made their objectives and intentions very clear when naming each CSS Frameworks: Bootstrap tries to give you everything you’ll ever need to bootstrap your project. Foundation just gives you the foundation to build upon.

Strongly recommend you to read.

The components

Foundation is more light weight comparing to Bootstrap, so it provides less complements built in - but doesn't mean that Foundation comes with no component.

Check out Foundation's documentation here and you'll see, hmm, lot of "things". Bootstrap has a well-organized doc set than Foundation does.

Anyway, basically you can find most components you'll use in common web projects - the grid system, buttons, forms, navigations and other add-on javascripts, in its own way.

Again, Bootstrap tires to provide you everything (and more options) you may need in web development, while Foundation only provides the necessary parts.

I think it is good to me because, with the basis by Foundation I use the framework only for architecture but leave the details to alternative, better choices. Not everything should be bootstyle.

Since make your own customized components cost more time, it is just a balance between full-stacks and flexibilities. You're the boss.

REM vs. Pixel

To honest I have never use REM in my projects before. But now I'm thinking about how to use REM in future projects and what's side effects (maybe, but who knows?).

By REM you're granted the ability to "scale" your website including the components as you want and easy to go. With SASS it is just a line to change. Although you can do the same in pixels by defining a variable and then make the components using metrics calculated from the variable.

Save it and just try a shoot with REM.

The only problem is that REM is supported by modern browsers. I'm okay with that.

Why I prefer to Foundation

I use Bootstrap in past projects but I believe I'll seriously consider to using Foundation if possible. My reasons? Foundations let you

  • write cleaner Semantical HTML
  • mobile first
  • be different

Personally I really enjoy playing with new stuffs like this one. And during this you may find out something really useful and helpful to yourself. Keep learning is not bad, right?

Dig deeper through a real rails application

In order to have a much clear image of the differences between Foundation and Bootstrap, I decide to spend some time to dig deeper. It takes me about a day to switch an existing project from Bootstrap to Foundation 5, through Ruby on Rails 4.

  • It won't take you a long time if you know well about the design principle behind "grid system". Both of these two are based on a 12-columns pattern.
    Of course it depends on how many pages you have in your project.
  • Foundation as another front-end framework, there's also a gem called foundation-rails, by which you could build your very own stylings using SASS.
  • Also simple_form provides support to foundation but need some more tweaks. I haven't pay my time on this part yet so I just using the native form builder in this project.

Since both Bootstrap & Foundation a front-end framework, there's not much thing to do with Rails the server side.

By the way, fortunately simple_form supports both of them by providing flexible form builder wrapper. If you're using simple_form's form builder in your Rails application it would save you some time.

Which one should you take

As coins have two sides, Bootstrap have more related documents / libraries, more support which Foundation is not. Secondary you really should discuss with your teammates if they want to play with a new toy.

  1. If you're facing serious business, need more support and components, take Bootstrap
  2. Or if you'd like to build your very own website, enjoy reinventing things, take Foundation

Float Label Pattern

Though we're meeting forms everyday while surfing the Internet, there always be tons of great ideas to improve user's experiences on filling forms.

Inspired by Float Label with CSS and Float Label Pattern, I totally agree with that the placeholder is not a replacement of label, even it is not semantic.

So I spent some time to make my own implement.

Here's the showcase

Checkout the codes on gist.github.com.

Principle Behind

  1. First of all, as I said, the placeholder is not a replacement to label, even you're just wanna save some space in design. Alternatively you could use a float / dymanic label like this.
  2. Color hints / labels is really a good choice responding to user's input. Besides it is easy to implement and need no change to your HTML stracture.

The Real Tricks

As mentioned in the source posts, there're some tricks on implementing this effect using pure CSS:

  1. Label status & color based on valid or invalid input values
  2. Combination of :focus, :valid, :invalid to highlight label status
  3. transition on label to make the animation

Problem?

Yep, I'm still feeling that the HTML code a little bit ugly, because the label tag comes after the input. However, I cannot found the way to select the previous sibling element by pure css selectors.

If anybody knows how to fix it, please kindly let me know :)