Why Do I Even Need This?

  • Make development faster, period
  • Enforces DRY on your front-end code
  • Provides a consistent way to structure all of your projects and makes it easier for teammates to pick-up
  • Provides a lot of boilerplate code that every project needs (grids)
  • Is modular and compatible with SASS

Why I like Foundation over Bootstrap?

1. More Modular and Easier Customization

I decided to start using Foundation because when I wanted to use Boostrap grids I would do the following:

1. Go to the Boostrap website

2. Go to customize:

Screen Shot 2014-03-02 at 11.42.12 PM

 

3. Uncheck everything except grids:
Screen Shot 2014-03-02 at 11.43.39 PM

4. Configure My Grid Settings:

Screen Shot 2014-03-02 at 11.44.10 PM

5. Copy-Paste Files

Screen Shot 2014-03-02 at 11.45.25 PM

6. Rename files to .scss

Screen Shot 2014-03-02 at 11.45.44 PM

 

If I needed to change something, I had to do this process all over again. Terrible workflow!

In Foundation, I just do the following:

1. Setup a foundation project


foundation new PROJECT_NAME --libsass

2. Add the grid modules in the app.scss

Screen Shot 2014-03-02 at 11.53.05 PM

 

3. Configure my grid in the settings file:

Screen Shot 2014-03-02 at 11.55.23 PM

Screen Shot 2014-03-02 at 11.54.43 PM

Basically, if you’re using a SASS based workflow, Foundation is much more maintainable and extensible.

2. Not as Much Visual Undoing

Bootstrap impose a very specific visual style that is hard to undo or overwrite, especially without SASS support.

For example buttons in Boostrap:

Screen Shot 2014-03-02 at 11.59.29 PM Screen Shot 2014-03-02 at 11.59.41 PM

 

VS buttons in Foundation:
Screen Shot 2014-03-03 at 12.03.56 AM

Bootstrap is getting a lot better about not imposing certain visual styles, but Foundation is still a lot better.

So, for example, if I wanted to change the styles of buttons I could just do the following:

 


// Change Default Font-Family
$body-font-family: courier, 'new courier', "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;

// Import Buttons Module
@import "foundation/components/button-groups";
@import "foundation/components/buttons";

// Re-write SCSS For Buttons
.button {
  background-color: white;
  color: $primary-color;
  border: 1px solid $primary-color;
  &.secondary {
  background-color: white;
  color: $secondary-color;
  border: 1px solid $secondary-color;
  }
  &.success {
    color: $success-color;
    background-color: white;
    border: 1px solid $success-color;
  }
  &.alert {
    color: $alert-color;
    background-color: white;
    border: 1px solid $alert-color;
  }
}

This ends up looking something like this:

Screen Shot 2014-03-03 at 12.23.20 AM

What Can I Do With Foundation? Features and Functionality

1. Grids

Personally my favorite foundation feature is grids. This is the biggest time-saver and it will completely change your workflow.

Grids in Foundation are based on a 12 column system, so if, for example, I want something to span the width of the container I would add a row make it 12 columns long.


<div class="row">
  <div class="large-12 columns"> 
    <h1>Welcome to Foundation</h1>
  </div>
</div>

If we want two columns that span half the width of the page we would write this:

 <div class="row">
  <div class="large-6 columns">
    <h2>I really Like Grid</h2>
    <p>Lorem ip... ac leo mollis, sed volutpat libero rhoncus. Nullam adipiscing convallis nisi id faucibus.</p>
  </div>
  <div class="large-6 columns">
    <h2>I Really Like Buttons</h2>
    <p>Lorem...d faucibus.</p>
  </div>
</div>

This would look something like this:

Screen Shot 2014-03-03 at 12.57.32 AM

The best part about all this is that we don’t need to worry about it being responsive. It’s already responsive right out of the box.

Screen Shot 2014-03-03 at 12.57.40 AM

 

These grid patterns can become very complicated and have layers upon layers of different grid structures. That’s perfectly fine, as long as the structure is clear. The other good thing about these grids is that they can be targeted by size, so that in different ways depending on screen size.

A Real World Example

Recently, I redesigned this website using Foundation. It was one of the quickest projects I have ever worked on, despite the fact that this was my first time using the framework.