Build Responsive Websiteswith Visual Studio 2013 and Bootstrap 3.0

Alek DavisIntel Corporation

2

AgendaSummary

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

3

Current state of web developmentSummary

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

4

Visual Studio 2013What’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

5

Visual Studio extensionsRequired

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

6

NuGet packagesEssential

ELMAH (Error Logging Modules and Handlers) See also related packages

7

Bootstrap 3.0Basics

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

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)

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

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

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)

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)

13

DemoProject

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)