Blog

Weekend read: Foundation vs. Bootstrap

Sep 25th, 2015 by Max Tokman

The answer to question "What is better, Bootstrap or Foundation" is that it depends. Here are a few pointers to make this decision a little easier to make.
 

Grid System
Foundation started having the upper hand by allowing responsiveness with percentages first, but since Bootstrap added the .row-fluid class this difference has disappeared.

Sizing Units
In order to calculate typography Bootstrap uses pixels while Foundation uses rems. If you are more comfortable working with pixels then Bootstrap is your better option.

Features

  

Foundation:

  • Built in validation provided by Abide
  • Relies on media queries to load responsive content for different browsers
  • Right-to-Left support
  • Off-canvas navigation
  • Tours
  • Pricing tables

Bootstrap:

  • Productivity oriented, its default behaviors are more fine tuned to get you started faster.
  • Responsive Embeds makes easy to incorporate responsiveness to different elements.


Ability to Customize
Bootstrap has a more recognizable default look that can make a little harder to make a site look different from the rest. On the other hand, Foundation has a default appearance closer to the browser specific look, which means that custom styling can be done easier even though it takes a little longer.

Mobile
Foundation was created with mobile-first in mind so it's more suited for this kind of design pattern. Bootstrap is still a little more desktop-oriented.  But as commercial project are almost always designed desktop-first, that should

Browser Support and Performance
There are not really noticeable performance differences between these two frameworks. The biggest difference is that Foundation does not support IE8.  If IE legacy support is important for your project then Bootstrap is your best option.

Community and Support
Here, as expected, Bootstrap has the upper hand. It has a larger developer community and a wealth of plugins and widgets that can be used to extend its functionality.

wordpressSEOADAWeb Developmentweb designDrupalproductionHTML5responsive designcompliancesecurityCSSdesignTestingPhotoshopproduction tipsFlashtechnologiestoolsgoogletypographyGoogle Analyticsmarketingautomationharness-bbeta testingbrowserSSLE-commercethemesweb standardsplug-inQAwebsite buildingapp developmentweb preflightfirefoxJavaScriptquality controlintegrationsAdobe MuseAPImobile websiteAppleweb imagesite speedfontsiOSMicrosoftmodulesOpenSSLserver securityIE8Androidtabletsmobile devicesclientcommunicationimage compressionimage size cloudPDFresponsive statebreakpointInternet Explorer 8Windows XP FacebooktechnologyWebOSLong TailInteraction MetricsLinkedInhostsoftwareAdvertisingJSONapp lifespanabletmobile app challengeRGBgammacodecvideo sizeinstant video playback solutionBacklinksweb colorsvideo playbackintegration3rd partyParfaitvertical layoutiPad screen templatehorizontal layoutcustom fontsweb-fontsnon-Flash animationHTML5 animationEdge ReflowAdobe Edgeoptimizeddevelopmentresponsive buildAdobeCMS for FlashHTML4interactive banner adsWordpress pluginsconvertingfailseleniumW3Csony playstationnintendo wiiaugmented realityVideos and animations3D views of modelsDetroit Diesel CorporationMercedes-BenziTunesfragmented technology landscapeUDIDInDesign to Photoshop conversionExporting from InDesign to Photoshophtmlweb design softwareweb compatibilitynDesignRIAsAdobe AiroutsourcingCVE-2014-0224dudInDesignformatvideowireframeCMSwebsiteiPhonebrochurewareweb development awardmp4web awardweb developerssidney garberhigh fidelityawardupdatevulnerabilityCKEditorAdobe Edge Reflowprogramming awardrevolutionary softwarewebmonline subscriptionInDesign to HTMLFoundationBootstrapICANNgTLDscustom domain suffixesPhotoshop Layer compsdesign best practicesogvHeartbeatcollaborateconceptOSSrelationship marketingCSS3Ps. and CSS HatProject ParfaitAppleScriptecommercemicrosoft’s project natal

Jan 8th, 2016 by Max Tokman

On January 12, 2016 Microsoft is switching off life support for older versions of Internet Explorer, with only IE11 remaining officially supported. This should help them consolidate the approximately 40% of their market share currently spread across multiple versions of IE, and will also be in line with competito...

Sep 23rd, 2015 by Max Tokman

Released earlier this week, Firefox 41 uses different algorithm for processing DIV rotations via graphics/video card. That affects CSS “ transform” property by creating screen artifacts or freezing browser altogether. Many an award winning website with fancy CSS animations will be humbled by this unexpected...