Hozaka's Weblog

I upgraded to Yosemite in the day when Apple release its first DP, on my primary laptop unfortunately. I have to say the hand-off feature is really impressive, but in the meanwhile I was suffering from frequent system crashes.

When I decided to downgrade my Macbook to Mavericks, I find out it's not that easy.

After some googling I found out a painless way to do this.

Step 1. Backup your system

At the very first, make sure you have already backup your documents by Time Machine.

Step 2. Get Mac App Store ready

Launch the Mac App Store, navigate to page of OS X Mavericks. DO NOT click the download button here, or you'll be prompt kinda "OS X 10.10 has already been installed.". Just leave the window open and we'll get back to here very soon.

Setp 3. Update the system version number

Then open this file /System/Library/CoreServices/SystemVersion.plist using XCode (or other apps which could edit a plist file, like TextMate). Open it and find two string of current version number 10.10. Cause we're gonna to downgrade to 10.9 Mavericks, to ensure the download could start we change it to 10.8.

Save the changes and enter your password when you see the dialog.

Step 4. Download OS X Mavericks & install

Now get back to Mac App Store, click the download button of Mavericks. After entering your Apple ID it would start downloading. Just wait it to finish then the installer will automatically start.

Now the only thing you need to do is to complete the install process as usually. All your settings, documents will remain in your system.

What's the other guys talking about this

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.

If you're facing serious business, need more support and components, take Bootstrap

Or if you'd like to build your very own website, enjoy reinventing things, take Foundation