Bootstrap — The professional’s choice

All of the students in the Iron Yard’s Tampa Bay’s backend cohort 5 and Whitney Smith (@whitneysmith) from the front end cohort attended a meetup and presentation on Bootstrap at the offices of 352inc.com yesterday, August 25, 2016. The presentation was facilitated by Zach Winnie, senior interface designer at MercuryNewMedia.com

Our backend cohort was introduced to Bootstrap about a week ago and honestly yours truly impression was that it was just a rudimentary tool or add on to the Ruby on on Rails environment. Appeared, at the time, that is was limited and it was just a way to quickly produced or provide the front end interface for databases. I could not have been further off the mark.

Mercury New Media’s (http://www.mercurynewmedia.com/Portfolio) counts a number of fortune 500 companies with sizeable in house design departments (i.e. Coca Cola, Solarguard, SmithMicro, etc.) as clients and their tool of choice is Bootstrap. Quoting the presentation facilitator, Zach Winnie, everyone of our sites and mobile apps are prototyped and produced solely in Bootstrap.

The results are truly impressive, the following are examples of what they have done with Bootstrap:
http://www.voltairengineers.com
http://lykesinsurance.com
http://quala.us.com
http://www.bhappeals.com
http://www.fairwarning.com

and countless others. Needless to say, the UX and development teams at MercuryNewMedia.com are customizing, extending and stretching the standard Bootstrap with professional grade visuals, interactions, animations, system states, etc. For example they have incorporated the flex box component from the upcoming Bootstrap version 4 into their production. Nonetheless, the results speak for themselves, the capabilities of and results that can be achieved from Bootstrap are truly amazing.

Zach did mention worthy Bootstrap competitors and alternatives as well as primary reasons for using Bootstrap:
 Free user testing & updates
  Common components ready-to-go 
 Customizable & extendable

Competitors and alternatives
 Foundation: http://foundation.zurb.com 
 Semantic UI: http://semantic-ui.com
  Pure.css: http://purecss.io

Additionally, he kindly provided a number of very useful tools and resources for Bootstrap:

Bootstrap Theming
 http://paintstrap.com
  http://www.stylebootstrap.info
  http://getbootstrap.com/customize
  http://bootswatchr.com

Bootstrap Interface Builders
 http://www.layoutit.com
 http://www.bootply.com
  http://brix.io
  https://webflow.com

Bootstrap SASS: https://github.com/twbs/bootstrap-sass

Compilers
 Prepos: https://prepros.io
  GhostLab: http://www.vanamco.com/ghostlab
 Koala: http://koala-app.com
  CodeKit: https://incident57.com/codekit
  Compass: http://compass-style.org

The following are primarily geared towards the UX and front end designers:
Webfonts
 https://fonts.google.com/
  https://typekit.com/
  https://www.fontsquirrel.com/tools/webfont-generator

Icon fonts
 http://fontawesome.io
 https://octicons.github.com
 https://icomoon.io

Photoshop Generator
 Automatically export JPG, PNG, or GIF files when making changes & saving a PSD 
 Tutorial: https://helpx.adobe.com/photoshop/using/generate-assets-layers.html

Avocode: https://avocode.com/home
  Get CSS, export image assets, get dimensions, share designs from PSD & Sketch files

CSSHat: https://csshat.com
  Get CSS from a layer in Photoshop

Real Favicon Generator: http://realfavicongenerator.net
Reflector: http://www.airsquirrels.com/reflector

Style Guides & Kitchen Sink
 http://www.monolinea.com/projects/styleguide
 https://getbootstrap.com/examples/theme
  http://styleguides.io

One of the more impressive tools demonstrated was Ghostlab (https://www.vanamco.com/ghostlab-downloads), which allows for testing any website on various browsers and mobile devices simultaneously.

Here is a link to a
https://www.youtube.com/watch?v=LaKGPK-q1f0

In conclusion, Bootstrap is definitely worth learning in depth as it is the professional’s tool.