Build responsive websites with Visual Studio 2013 and Bootstrap 3.0


Published on

Slides that accompany a presentation on building responsive websites using Visual Studio 2013, Bootstrap 3.0, and other popular open-source tools and frameworks. It covers the following topics: trends and challenges in web application development, what's new in Visual Studio 2013; helpful extensions and packages; overview of Bootstrap 3.0 ; introduction to LESS; brief guide to popular JavaScript frameworks ( modernizr, initializr); working with fonts; using CDNs with local failover; implementing mobile-friendly page layout; using ELMAH (Error Logging Modules and Handlers).

Published in: Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Build responsive websites with Visual Studio 2013 and Bootstrap 3.0

  1. 1. Build Responsive Websites with Visual Studio 2013 and Bootstrap 3.0 Alek Davis Intel Corporation
  2. 2. Agenda Summary  The absolute minimum you need to know to build responsive websites using Visual Studio 2013, Bootstrap 3.0, and other popular open-source tools and frameworks Intro  Trends, challenges, goals Tools  Visual Studio 2013, extensions, packages  Bootstrap 3.0; LESS; ELMAH, Modernizr, Initializr, etc; fonts Demo  Project structure, page layout, elements, branding, functionality, performance 2
  3. 3. Current state of web development Summary  Same problems, more and better tools, no perfect solutions Challenges  IE browser wars, form factors (big and small, touch), HTML5, CSS3, baby boomers Trends  Larger fonts, minimalism, responsive design, adaptive page layout, end of Flash, rise of JavaScript, new frameworks, Bootstrap  See also Designing A Website For 2014 and Web Design Trends for 2014 Goals  USE industry standards and popular frameworks to BUILD functional, efficient, and responsive website that are easy to MAINTAIN and upgrade 3
  4. 4. Visual Studio 2013 What’s new?  Minor IDE improvements (color is back, peek definition [Alt+F12])  TFS 2010 or newer  Bootstrap and other frameworks included  Lots of magic (ScriptManager, LESS semi-support, friendly URLs) See also  Difference between Visual studio 2012 and Visual studio 2013  ASP.NET features in New Project Templates in Visual Studio 2013 explains purpose of project packages 4
  5. 5. Visual Studio extensions Required  Web Essentials: compiles LESS files, bundles/minifies CSS/JavaScrip  Visual Studio Spell Checker: shows spelling errors Recommended  SlowCheetah: transforms web.config files on build (requires a project file modification)  StopOnFirstBuildError: stops solution build on first error Optional  GhostDoc auto-generates XML comments  Microsoft Visual Studio Team Foundation Server 2013 Power Tools: Team Explorer enhancements  Regex Tester: tests regular expressions from the IDE  jQuery Code Snippets: increases productivity  Code Alignment: aligns code using different algorithms  CodeMaid: helps working with code  Productivity Power Tools 2013: enhances IDE  Indent Guides: improves code readability 5
  6. 6. NuGet packages Essential  ELMAH (Error Logging Modules and Handlers)  See also related packages 6
  7. 7. Bootstrap 3.0 Basics  HTML5 + JavaScript + CSS3 for building responsive websites  Mobile first design (pros and cons)  Page scaffolding (xs (480px), sm (768px), md (992px), lg (1200px))  Components (navigation, modal dialogs, menus, grids, etc)  Pros and cons (popularity, customization, complexity, bugs and features, dependencies) Source  Bootstrap home page 7
  8. 8. Bootstrap 3.0 (continued) Dependencies  jQuery Companions  Themes are optional  Glyphicons font not needed (use FontAwesome [compare to Glyphicons])  Respond.js for IE8 and IE9 (+ extra code)  Initializr template generator  Modernizr feature detector (included by Initializr)  HTML4Shi(m|v) HTML5 tag recognition for pre-IE9 (included by Modernizr) 8
  9. 9. Bootstrap 3.0 (continued) Customization  Online (pros and cons)  Use custom CSS (must follow the Bootstrap CSS)  Use Bootstrap LESS as-is (or customize)  See also:  Twitter Bootstrap Customization Best Practices 9
  10. 10. Bootstrap 3.0 (continued) Learning  Better UI/UX with Bootstrap: A Developer's Primer video (50 min)  Learn Twitter Bootstrap in 2 Hours video tutorials by easydevtuts  Code a Responsive Website with Bootstrap 3 video tutorials by Brad Hussey  Twitter Bootstrap Tutorial video tutorials by Creativity Tuts  Responsive Web Design With Bootstrap video tutorials by Coder's Guide  More... Resources  The big badass list of useful Twitter Bootstrap resources 10
  11. 11. LESS (Leaner CSS) Overview  LESS home page  CSS preprocessor syntax  Compiled to CSS on server or client  Alternative to SASS Features  Variables, mixins, functions, operations, nesting, imports, and more... Visual Studio integration  Web Essentials extension (compiles LESS on save) 11
  12. 12. ELMAH (Error Logging Modules and Handlers) Purpose  Automatic or programmatic logging of error information  Error log UI Setup  Install primary NuGet package  Install error log type-specific NuGet package (e.g. SQL Server)  Configure error log settings in the web.config file  Define admin access rules (must turn SSL on when not using integrated Windows authentication)  Adjust configuration settings (e.g. for page not found -- AKA 404 -- errors) 12
  13. 13. Demo Project  Structure (folders, etc)  Bundles (styles and scripts)  Transformations (config files)  CDN (failover)  Exception handling Fonts  Font Awesome  Google fonts  Adobe Edge fonts  Open Sans (see also) Layout  Sticky footer (see explanation) 13