Robert Boedigheimer

@boedie

Responsive Web Design with ASP.NET Core 1.0

• Web developer since 1995

• Pluralsight Author

• 3rd Degree Black Belt, Tae Kwon Do

• ASP.NET MVP

• boedie@outlook.com

• @boedie

• weblogs.asp.net/boedie

About Me

Responsive Web Design

• Technique to adapt to multiple devices formats from a single URL

• Ethan Marcotte, 2010▫ Fluid grid

▫ Flexible images

▫ Media Queries

• http://mediaqueri.es/

Why Responsive Web Design?

• Mobile site usage exceeds desktop usage• Device proliferation• One web site is easier to maintain• Single URL

Topics

• ASP.NET Core 1.0• Bootstrap 3• Visual Studio 2015• Responsive Images

ASP.NET Core 1.0• Open source and cross platform

• System.Web is gone!

• MVC/Web API unified (no Web Forms)

• Modular

• Target▫ .NET 4.6, .NET Core 1.0 (Mac, Linux)

ASP.NET Core 1.0 (cont.)

• Tag Helpers• JSON configuration • wwwroot folder

Tag Helpers

• More natural then HTML Helpers▫ <%= Html.TextBox("LastName") %>▫ @Html.TextBox(“LastName”)

• <environment>• <script … asp-append-version=“true”>

• Can create custom tag helpers

Bootstrap 3

• “Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web”

• Twitter, released August 2011

• Free, open source

• http://getbootstrap.com

Bootstrap 3 (cont.)• CSS (Grid, Buttons, Forms, Typography)

• Components (NavBar, Glyphicons)

• JavaScript (Modal, Carousel, Tab)▫ jQuery plugins

• ASP.NET Templates use Bootstrap

Bootstrap Sites• www.lyft.com

• www.newsweek.com

• www.vogue.com

• www.nasa.gov

• code.visualstudio.com

• www.mongodb.org

Visual Studio 2015• Bower, NPM• Grunt, Gulp• Task Runner Explorer▫ Bindings

Responsive Images• <img> ▫ srcset

• <picture>

• Picturefill

Bootstrap 4• Moved from Less to Sass

• Brand new customization options ▫ Update SASS variables

• Rewrote all JavaScript plugins▫ Based on ES 6

• Dropped IE 8 support

Resources• getbootstrap.com• github.com/aspnet• www.asp.net/core

• https://www.pluralsight.com/courses/responsive-web-images

• boedie@outlook.com

• @boedie

• weblogs.asp.net/boedie

Questions