We frequently get asked by graphic designers and other new clients, “What’s the difference between Foundation and Bootstrap?” In this blog post, we try to answer that question.
Bootstrap vs Foundation: The Primary Difference
We have heard it said that Developers should use Bootstrap and “Front Enders” (UI/UX specialists) should use Foundation. This is because Bootstrap provides almost every User Interface (UI) element you can think of while Foundation provides very few – leaving their appearance to the UI/UX designer/coder.
This does not mean that Bootstrap cannot handle custom UI elements … it can and does. What it does mean is that for someone who is a “Developer” (aka coder) as opposed to a “Front Ender” (aka designer), Bootstrap allows them to create a beautiful website with consistent UI elements that are called from what amounts to a library as opposed to created in PSD files and uploaded to websites.
What are some other differences between Bootstrap and Foundation?
- Foundation is setup to encourage you to develop mobile first, desktop second because anything not under a media query will be considered mobile. Bootstrap does it the other way around.
- Bootstrap uses pixels for declaring heights, widths, padding and margins. This means that you have to declare and explicit height and width for media queries to adjust to different device sizes. Foundation uses REM’s (Root EM’s).
- Both frameworks give you a default grid system to work with which enables the columnar layout of information on the pages. The grids are customizable for both. Foundation uses Sass to customize the grids, Bootstrap uses Less.
