When comparing Foundation vs Semantic Grid System, the Slant community recommends Foundation for most people. In the question“What is the best CSS framework?”Foundation is ranked 3rd while Semantic Grid System is ranked 27th. The most important reason people chose Foundation is:

Pros

Pro

Responsive design philosophy

Pro

Uses REMs instead of pixels

Foundation uses REMs instead of pixels, meaning you don't have to state an explicit height, width, padding, etc, for every device. Simply put, using REMs means you can just state font-size: 80%; and have the whole component (and its nested elements) shrink by 20%.

This is great for making your site mobile friendly. There is also a Sass function in Zurb that converts pixels to REMs so if you're used to thinking in pixels, you don't have to learn a different system.

Pro

RTL support

Allows easily changing text direction.

<html class="no-js" lang="ar" dir="rtl">

Pro

No style lock-in

Styles are purposefully undeveloped to encourage differentiation between different sites using Foundation.

Pro

Block grid

Foundation has a feature called block grid. Block grid gives designers the power to divide the contents of an unordered list into a grid that is evenly spaced. Furthermore, Foundation also takes care of collapsing columns as well as removing gutters.

Easily extensible with a selection of add-ons

Pro

Uses Interchange to load responsive content

Foundation comes with Interchange, it makes use of media queries to load images responsively and create content that's suited to different browsers and devices.

Pro

Easy customization

Just by looking at the name, Foundation merely provides designers with a foundation of sorts on which they can build their design. It can be customized easily through SASS, a powerful CSS pre-processor or by overriding the default CSS styles.

Pro

Support for off-canvas navigation

Foundation comes with an easy way of creating off-canvas menus.

Pro

Built-in form validation

Pro

Good mobile support

Foundation was one of the first frameworks to adopt a mobile-first philosophy. By focusing on mobile design first, Foundation makes designers think on what kind of content is important, relevant and interesting to the users without thinking too much on the space.

Pro

Fixed and fluid layouts

By default Semantic Grid System has a fixed layout. But switching to fluid, percentage-based layouts is easy. To switch from pixels to percentages, simply add one variable:

@total-width: 100%;

Pro

Runs on SCSS, LESS, or Stylus

Semantic.gs supports all modern CSS pre-processors sucha as Sass, LESS and Stylus.

Ad

Cons

Con

Documentation is not that good

Con

Can be hard for beginners to grasp

Since Foundation is built to be customizable, it's default style may not be very appealing for most. While it's true that most production-ready websites shouldn't be using the default style of a css framework (they would all end up looking the same), this is even more true for Foundation.

Con

Not UMD pattern in core

This problem will bring attention when used with Angular, React and other JS framework. It is important to know that they create app version of this framework.

No cons yet!

Alternative Products

Each month, over 2.8 million people use Slant to find the best products and share their knowledge. Pick the tags you’re passionate about to get a personalized feed and begin contributing your knowledge.