Upload
vuhanh
View
216
Download
0
Embed Size (px)
Citation preview
• Web developer since 1995
• Pluralsight Author
• 3rd Degree Black Belt, Tae Kwon Do
• ASP.NET MVP
• @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
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)
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
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