Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to SafariFoundation vs NPM
When comparing Foundation vs NPM, the Slant community recommends NPM for most people. In the question“What are the best web design tools?” NPM is ranked 9th while Foundation is ranked 11th. The most important reason people chose NPM is:
NPM is compatible with any CLI the developer wants to use.
Specs
Question Ranking
Pros
Pro Responsive design philosophy
Foundation allows designing for multiple screen sizes simultaneously easily, meaning your content will always fit.
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 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.
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 Easily extensible with a selection of add-ons
There's a variety of front-end templates, icon fonts, responsive table examples, SVG icons and stencils that help you quick-start or easily improve on your site.
Pro Support for off-canvas navigation
Foundation comes with an easy way of creating off-canvas menus.
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 RTL support
Allows easily changing text direction.
<html class="no-js" lang="ar" dir="rtl">Pro Built-in form validation
Foundation comes with Abide plugin, an HTML5 form validation library.
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 Compatible with any CLI
NPM is compatible with any CLI the developer wants to use.
Pro Plenty of helpful NPM modules/plugins
NPM has a strong community that has developed plenty of libraries and plugins that are useful to developers.
Pro Very concise configuration
NPM scripts require fewer lines of code to run a given task. This is true even when it's for running build processes. Using Unix pipes lots of tasks can be reduced to one-liners.
Pro Does not need any wrapper modules
With other task runners, you need to install wrapper modules for tools you may already have installed. When using NPM that's not necessary, to use the tools you need, just install them directly through NPM.
Pro Part of node.js distribution
Pro You're most likely using NPM already
Pro Uncomplicated package management system
When it works...
Cons
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 Needs more pre-built components
Example would be a scroll-spy not only for one cell, but cell to cell.
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.
Con Documentation is a bit better than average
Documentation could be written better and clearer, with many more example than they currently have. Sometimes hard to find solutions for detailed css problems.
Con Custom tasks require additional keyword 'run'
Only a few standard tasks support being executed without the run keyword (e.g., npm start vs npm run customtask)
Con Not a build system, only a task runner
It is supposed to be used for running gulp, webpack or whatever. But it is not supposed to be used as a build system.
Con Passing parameters is awkward
In order to pass additional parameters to npm you must add them after -- (e.g., npm run build -- --custom='foo').
Con Badly documented
Less than bare minimum official documentation leaves users in the dark without taking often expensive external courses. Even the --help text has unpluggable gaps. One official source notes the documentation isn't adequate yet nothing has been done to fix this.
Con Lot of issues with authentication and random node problems
Unable to recover from common depencies conflicts consistantly. Error messages are not always helpful to debugging. Doesn't account well for users with different versions of node.
Con Does not run well with Windows
Since a lot of projects that use NPM as a build tool most of the time make use of Bash scripts as well. This means that open source projects that run the command npm run may run into issues when used in a Windows environment.
Con Doesn't allow you to create build process with complicated logic on its own
In complex heterogeneous app you will quickly migrate to gulp, webpack or whatever leaving to NPM only simple task running responsibility.
