WEBVTT 00:00:00.200 --> 00:00:04.200 [Music] 00:00:09.100 --> 00:00:13.700 Hi, my name is Pranav Rastogi and I work for the ASP.NET team in Microsoft. 00:00:14.440 --> 00:00:20.290 Today I'll be showing the new ASP.NET templates in Visual Studio 2013. 00:00:21.040 --> 00:00:24.710 As more and more people are browsing their websites through phones, 00:00:24.760 --> 00:00:28.600 tablets and different devices, it's more critical for web developers 00:00:28.650 --> 00:00:31.740 to build sites which can target different form factors. 00:00:32.410 --> 00:00:35.530 Inside the templates we have started to use a framework called 00:00:35.580 --> 00:00:38.260 Bootstrap which is a huge improvement to the experience that 00:00:38.310 --> 00:00:41.110 we shipped in the past Visual Studio releases. 00:00:42.050 --> 00:00:44.860 Bootstrap makes it really easily to build websites which can 00:00:44.910 --> 00:00:49.340 target different form factors, and this introductory video we'll 00:00:49.390 --> 00:00:53.990 just see how the templates make use of Bootstrap and set up a 00:00:54.040 --> 00:00:57.190 project which you can build your applications on. So I'm going 00:00:57.240 --> 00:01:01.210 be showing you the Bootstrap integration in the ASP.NET templates 00:01:01.260 --> 00:01:03.380 for Visual Studio 2013. 00:01:03.900 --> 00:01:08.040 As you might be knowing as web developers now more and more people 00:01:08.090 --> 00:01:11.430 are accessing websites through their different devices. 00:01:11.480 --> 00:01:14.240 They're accessing through their phones, through their tablets, 00:01:14.590 --> 00:01:19.250 through their PCs, through their phablets, so it's becoming much 00:01:19.300 --> 00:01:22.760 more important as a web developer to be able to target all these 00:01:22.810 --> 00:01:25.790 different form factors in all these different devices. 00:01:26.520 --> 00:01:31.390 And as we sort of move forward mobile web development becomes 00:01:31.440 --> 00:01:35.180 critical a part of the developing workflow. And all this while 00:01:35.730 --> 00:01:38.430 writing these kinds of applications have been hard. You had 00:01:38.480 --> 00:01:43.810 to write custom CSS. You had to bring in a lot of logic into 00:01:43.860 --> 00:01:46.650 your application which was based on UI logic. 00:01:47.270 --> 00:01:51.030 So what we have done in the Visual Studio 2013 timeframe for 00:01:51.080 --> 00:01:55.920 the ASP.NET web developers is all of our default templates are 00:01:55.970 --> 00:01:58.210 now based on Bootstrap. 00:01:58.730 --> 00:02:03.940 So Bootstrap is a CSS framework which sort of makes it easier 00:02:03.990 --> 00:02:05.480 to do web developing. 00:02:06.210 --> 00:02:08.960 So if you think about all the mundane tasks that you have to 00:02:09.010 --> 00:02:12.540 do as web developers like styling an image, styling the tables, 00:02:12.590 --> 00:02:16.420 styling forms and making sure that all of these styles look and 00:02:16.470 --> 00:02:20.560 feel the same across different browsers, across different devices. 00:02:20.610 --> 00:02:23.520 There is a lot of code that you need to write. So now with the 00:02:23.570 --> 00:02:27.880 introduction of Bootstrap it's easier to build your websites 00:02:27.930 --> 00:02:32.810 on such a framework which takes care of all of these problems 00:02:32.860 --> 00:02:37.180 for you. So in Visual Studio 2013 all of the ASP.NET templates 00:02:37.230 --> 00:02:42.630 for like MVC, WebForms, Spar applications, Web API applications; 00:02:43.120 --> 00:02:45.810 all of our templates are now based on Bootstrap so that when 00:02:45.860 --> 00:02:48.990 you create an application and when you get started with it, we'll 00:02:49.040 --> 00:02:52.580 sort of guide you towards an optimized experience which will 00:02:52.630 --> 00:02:55.820 help you build applications that can target different devices. 00:02:56.890 --> 00:02:59.150 So what is Bootstrap really? 00:02:59.890 --> 00:03:05.840 Bootstrap is basically a CSS framework which lets you do web developing. 00:03:05.890 --> 00:03:09.050 So Bootstrap takes care of the more critical parts of the web 00:03:09.100 --> 00:03:11.310 developing space. It is responsive. 00:03:11.890 --> 00:03:17.370 It has mobile first approach. It has a metro design as a front-end 00:03:18.220 --> 00:03:21.990 developer experience so that once you start building web applications 00:03:22.040 --> 00:03:23.600 you get all these benefits. 00:03:24.510 --> 00:03:27.330 And I think I'm pretty proud to say that one of the coolest things 00:03:27.380 --> 00:03:29.880 that we have done with the Bootstrap integration with vs is we 00:03:29.930 --> 00:03:34.500 have integrated Bootstrap 3 with Visual Studio 2013 RTM. 00:03:34.550 --> 00:03:38.830 And Bootstrap 3 is a huge improvement over Bootstrap 2 because 00:03:38.880 --> 00:03:42.780 it's put mobile developing front and center. It's optimized 00:03:42.830 --> 00:03:46.460 for mobile first. And start off with a small device and then 00:03:46.510 --> 00:03:51.500 you scale up, and the site sort of scales very well on this platform. 00:03:52.270 --> 00:03:55.280 So one of the great things about this release is like we sort 00:03:55.330 --> 00:03:57.910 give you the latest and the greatest that's happening in web 00:03:57.960 --> 00:04:01.030 developing so that when you start developing application with 00:04:01.080 --> 00:04:05.320 ASP.NET in Visual Studio, you get started with the latest out there. 00:04:05.370 --> 00:04:08.220 So I'll be showing you a few ways that we have sort of integrated 00:04:08.610 --> 00:04:11.710 Bootstrap into our templates, and I'll give you a quick overview 00:04:11.760 --> 00:04:15.780 of what the Bootstrap integration is so that you can quickly 00:04:15.830 --> 00:04:22.380 get started. If you create any project in ASP.NET... In my case 00:04:22.430 --> 00:04:25.160 I have created an ASP.NET MVC application. 00:04:25.810 --> 00:04:30.420 And if I launch the application in the browser you will see that 00:04:30.470 --> 00:04:35.310 the site sort of has a metro design to it. And the coolest thing 00:04:35.360 --> 00:04:39.500 about this application is if I start to resize my application, 00:04:39.550 --> 00:04:46.220 so if I go full width you will see that the site takes the whole space. 00:04:46.270 --> 00:04:50.080 But if I start scrolling back, you will see how gracefully all 00:04:50.130 --> 00:04:54.160 of the elements fall and how responsive the site is. If I scroll 00:04:54.210 --> 00:04:57.010 beyond a certain width, you will see that I get a dropdown for 00:04:57.060 --> 00:05:00.860 my application which gives me all of the navigation links. 00:05:01.580 --> 00:05:05.770 So imagine all of this functionality that you're getting, and 00:05:05.820 --> 00:05:09.670 if I look at the amount of CSS that I had write for my application, 00:05:10.270 --> 00:05:15.150 it was fairly minimally. So if I open my site .cs you would see 00:05:15.200 --> 00:05:20.140 that my application-level CSS is about 30 to 40 lines of code 00:05:20.190 --> 00:05:23.990 which is mostly around validation and putting some content around 00:05:24.040 --> 00:05:25.320 my CSS. 00:05:25.990 --> 00:05:29.370 So again with very little CSS that you had to write, you sort 00:05:29.420 --> 00:05:32.830 of got an amazing functionality out of the box. And if you were 00:05:33.400 --> 00:05:37.310 look at how the site would've have looked on Windows Store on 00:05:37.360 --> 00:05:42.810 Windows Surface, you would see that the site again looks pretty snazzy. 00:05:42.860 --> 00:05:47.290 It's got a nice look and feel. I can sort of have different modes 00:05:47.340 --> 00:05:50.200 to the site. So this is the portrait mode. You would see how 00:05:50.250 --> 00:05:54.140 the site falls gracefully. If I hit the Register link, I still 00:05:54.190 --> 00:05:57.610 get my validation errors over here. I can snap back. 00:05:58.460 --> 00:06:01.830 So you can see that all the different modes that I have, my site 00:06:01.880 --> 00:06:07.490 sort of looks fairly well in my tablet. So that's the nicest 00:06:07.540 --> 00:06:12.880 thing about Bootstrap is the getting started experience and how 00:06:12.930 --> 00:06:16.200 easy is it to sort of target different form factors without having 00:06:16.250 --> 00:06:22.100 to write much CSS code. Another great thing about the Bootstrap 00:06:22.150 --> 00:06:26.420 integration is the Bootstrap ecosystem. So imagine a scenario 00:06:26.470 --> 00:06:28.470 that you had to theme your site. 00:06:29.100 --> 00:06:32.130 And historically themeing has always been one of the major pain 00:06:32.180 --> 00:06:33.680 points for web developers. 00:06:34.220 --> 00:06:37.900 With the integration of Bootstrap it's fairly easy to get started 00:06:37.950 --> 00:06:41.820 from a template and theme it. So I can go to the site called 00:06:41.870 --> 00:06:46.040 Bootswatch.com which is an aggregation of different themes which 00:06:46.090 --> 00:06:49.650 are free, some are paid, and then you can easily install them 00:06:49.700 --> 00:06:54.630 into your application. So in this demo I'm going to choose this theme. 00:06:55.220 --> 00:06:59.450 I'm going to say just download the Bootstrap CSS. So now open 00:07:00.530 --> 00:07:01.120 the file. 00:07:02.050 --> 00:07:03.260 Copy the contents. 00:07:03.920 --> 00:07:07.880 And sort of go back to my project, and I'm going to override 00:07:07.930 --> 00:07:12.170 the Bootstrap framework with the theme that I just downloaded. 00:07:12.220 --> 00:07:15.990 And if I launch my site again you will see that my site is now 00:07:16.040 --> 00:07:21.650 again has the look and feel of the new theme that I chose from Bootswatch. 00:07:21.700 --> 00:07:26.720 It has the same blue theme that I chose over here and all my 00:07:26.770 --> 00:07:30.530 links change, all my buttons change, and if I register I get 00:07:30.580 --> 00:07:33.370 the same validation errors that I was getting before. 00:07:33.980 --> 00:07:38.560 So in a matter of a few seconds I was able to change the theme 00:07:38.610 --> 00:07:41.550 of my site fairly easily. 00:07:42.170 --> 00:07:45.140 For those of you who are wondering how to get Bootstrap into 00:07:45.190 --> 00:07:51.300 your project, we sort of redistribute Bootstrap as a NuGet package. 00:07:51.350 --> 00:07:56.190 So the project templates already have this package called Bootstrap installed. 00:07:56.790 --> 00:08:00.590 And if you're not starting a new ASP.NET project, you can just 00:08:00.640 --> 00:08:04.010 download this Bootstrap package into your project. 00:08:04.820 --> 00:08:09.020 And this NuGet package brings in the following files: it brings 00:08:09.070 --> 00:08:13.500 in the form folder, it brings in all of the CSS for the Bootstrap 00:08:13.550 --> 00:08:18.450 framework, and it brings in the JavaScript for the Bootstrap framework. 00:08:19.200 --> 00:08:23.120 And the templates sort of optimize an experience where they bundle 00:08:23.170 --> 00:08:28.010 all the CSS and the JavaScript into a separate bundle so that 00:08:28.060 --> 00:08:32.590 you sort of make minimum requests to the network and then, you 00:08:32.640 --> 00:08:35.930 optimize your site for network performance as well. So just 00:08:35.980 --> 00:08:39.070 a tidbit of information how the project templates are set up 00:08:39.120 --> 00:08:42.480 to be optimized for Bootstrap and then optimized for net upload 00:08:42.530 --> 00:08:42.940 as well. 00:08:42.990 --> 00:08:50.810 So Bootstrap as a theme, what it calls a grid system. So the 00:08:50.860 --> 00:08:54.760 way the whole Bootstrap framework is designed is in terms of 00:08:54.810 --> 00:09:00.020 a grid. And the Bootstrap system will make the whole grid experience responsive. 00:09:00.490 --> 00:09:03.200 So in this template you're seeing that I have three columns, 00:09:03.450 --> 00:09:06.500 and if I look at how I can sort of use the grid it's going to 00:09:06.550 --> 00:09:08.330 be something like this. 00:09:09.090 --> 00:09:13.080 So the whole page is divided into a set of 12 columns and I can 00:09:13.130 --> 00:09:19.750 specify what the width of each column is. And in my sample each 00:09:19.800 --> 00:09:23.580 column is of width 4, so I have 3 columns and then they add up 00:09:23.630 --> 00:09:28.500 to 12. So let's say I wanted to resize the last column a little 00:09:28.550 --> 00:09:31.660 differently from the middle column. All I have to do is basically 00:09:31.710 --> 00:09:36.520 change the grid sizing so that all of the grid sizing adds up 00:09:36.570 --> 00:09:37.490 to 12. 00:09:38.100 --> 00:09:41.000 So I have 6 to 8 to 10 and 00:09:42.960 --> 00:09:47.170 I can make that 4, put it in my application and go back. 00:09:47.220 --> 00:09:50.980 Say Control F5. So you would see how the columns sort of split up. 00:09:51.030 --> 00:09:54.420 This one became 2 columns. This one became 6 columns and this 00:09:54.470 --> 00:09:55.490 one became 4. 00:09:56.050 --> 00:10:00.200 And even if I were to resize this template, you would see how 00:10:00.250 --> 00:10:05.790 gracefully the site sort of falls so I can target a different resolution. 00:10:06.680 --> 00:10:09.900 And again I still get the benefits of a responsive framework. 00:10:11.220 --> 00:10:15.500 Another key feature of this experience is sort of dealing with images. 00:10:16.130 --> 00:10:22.850 We all have images of different sizes, and it's quite difficult 00:10:22.900 --> 00:10:26.270 to make the image experience to be responsive. So let's say 00:10:26.320 --> 00:10:30.960 I add this image into my application and I sort of go back to 00:10:31.010 --> 00:10:35.590 my site. So let me launch my application again. 00:10:35.640 --> 00:10:42.110 So you would see how the image sort of takes up the whole screen 00:10:42.480 --> 00:10:47.950 and it sort messes up my site layout. And it looks very ugly. 00:10:48.970 --> 00:10:52.480 With Bootstrap now I can sort of attribute my image with this 00:10:52.530 --> 00:10:58.590 class equals image responsive which will add a responsive behavior 00:10:58.640 --> 00:11:02.960 to this image and make sure that the image renders nicely. 00:11:03.010 --> 00:11:08.280 So in this experience you will see that now the image is getting 00:11:08.330 --> 00:11:10.450 rendered properly. In fact 00:11:12.830 --> 00:11:15.730 if I were to put this image in this 00:11:17.150 --> 00:11:22.070 div, you would see that I would get the responsive nature of 00:11:22.120 --> 00:11:24.970 Bootstrap as well. So this is what the image looks like on a 00:11:25.020 --> 00:11:29.450 full view. If I were to sort of resize it, you would see how 00:11:29.500 --> 00:11:34.950 the image snaps and still looks pretty cool even in a small factor 00:11:35.000 --> 00:11:38.570 like this. So this is how your site would look on a phone. 00:11:38.620 --> 00:11:42.990 So again I didn't have to write any CSS in my application; all 00:11:43.040 --> 00:11:48.020 I had to do was use the Bootstrap framework and I get the responsive 00:11:48.070 --> 00:11:50.470 nature to my images to my images as well. 00:11:51.460 --> 00:11:55.590 Another common scenario is tables. 00:11:57.380 --> 00:12:01.970 So let's see how Bootstrap helps us style tables as well. 00:12:02.500 --> 00:12:06.350 So here is a table that I have in my application. 00:12:07.470 --> 00:12:12.660 I can move it here, go back to my site, Control F5. 00:12:13.760 --> 00:12:18.030 So this is how my table looks basically: first name, last name. 00:12:18.080 --> 00:12:21.360 It looks pretty ordinary. So let's see how we can quickly style 00:12:21.410 --> 00:12:26.370 the table to look a little better. So I can attribute the table 00:12:26.420 --> 00:12:32.730 with this class equals table which sort of provides a very minimalistic 00:12:32.780 --> 00:12:36.920 outline to my whole table. I can be very fancy. I can say I 00:12:36.970 --> 00:12:42.580 want a bordered table or I want a table with stripes. 00:12:43.500 --> 00:12:49.130 I want a hover functionality so table hover. 00:12:54.460 --> 00:12:57.140 We've also added IntelliSense for Bootstrap, so you'll notice 00:12:57.190 --> 00:13:00.590 like as I'm typing I'm getting IntelliSense for all the Bootstrap classes. 00:13:00.640 --> 00:13:03.200 So all of these classes are defined in the Bootstrap framework, 00:13:03.500 --> 00:13:07.270 and in the Visual Studio web developer experience we are lighting 00:13:07.320 --> 00:13:13.470 up that IntelliSense for you. So if Control F5 you will see how 00:13:13.520 --> 00:13:18.480 I have stripes. I have a border. I have a margin. So I can 00:13:18.530 --> 00:13:23.730 very quickly sort of style my tables. And again these are very 00:13:23.780 --> 00:13:28.560 commonly used CSS operations that I do in my application. 00:13:28.610 --> 00:13:32.060 So Bootstrap just makes it easier to use all of these functionalities. 00:13:32.110 --> 00:13:36.590 Bootstrap has another feature called Glyphicons. So let's say 00:13:36.640 --> 00:13:41.670 I wanted to put a mail icon over here, and I can specify a class 00:13:44.480 --> 00:13:46.520 called glyphicon-envelope. 00:13:48.920 --> 00:13:53.780 And if I run my application again, go back to contact, you will 00:13:53.830 --> 00:13:55.920 see how I get an 00:13:57.460 --> 00:14:00.370 envelope or a mail icon over in my application. 00:14:01.010 --> 00:14:04.360 So again, one of the ways where Bootstrap sort of makes it really 00:14:04.410 --> 00:14:09.480 easy to add this functionality into your application. A great 00:14:09.530 --> 00:14:14.970 way of learning about Bootstrap is going to their website if 00:14:15.020 --> 00:14:19.520 you start following the tutorials for CSS. They have a practical 00:14:19.570 --> 00:14:23.210 approach to writing the tutorials so you can just click on tables. 00:14:23.480 --> 00:14:26.960 They have a very basic examples of tables and then sort o build 00:14:27.010 --> 00:14:30.100 upon it to give you more information on how you can customize 00:14:30.150 --> 00:14:34.000 your table to have stripes, to have borders, how do you make 00:14:34.050 --> 00:14:38.360 it responsive, how you do forms, so on and so forth. 00:14:38.410 --> 00:14:43.140 Bootstrap has another feature in the JavaScript area where they 00:14:43.190 --> 00:14:48.070 let you do modal dropdowns fairly easy. So this is an example 00:14:48.120 --> 00:14:51.410 of how a modal dialogue would look like 00:14:53.140 --> 00:14:57.050 in Bootstrap. This makes it really easy to add this functionality 00:14:57.100 --> 00:14:58.860 to your application as well. 00:14:58.910 --> 00:15:04.360 So another common scenario that people do with images is how 00:15:04.410 --> 00:15:07.930 do you generate thumbnails for your application. 00:15:08.470 --> 00:15:14.330 So in this application I'm going to log in via my Facebook account 00:15:14.380 --> 00:15:17.870 and I'm going to retrieve information about my friends, their pictures. 00:15:18.170 --> 00:15:20.270 And I'm going to show you in the UI. 00:15:21.060 --> 00:15:24.040 So again this is one of the features that we have in ASP.NET 00:15:24.090 --> 00:15:27.190 templates where you can log in via a social provider such as 00:15:27.240 --> 00:15:32.630 Facebook, Google, Microsoft account so that developers can provide 00:15:32.680 --> 00:15:34.020 an enhance experience. 00:15:37.610 --> 00:15:39.120 Let me log in via Facebook. 00:15:40.150 --> 00:15:43.440 So this goes to Facebook. It authenticates me. It comes back 00:15:43.490 --> 00:15:48.690 to the application. After I'm authenticated it retrieves my profile picture. 00:15:49.070 --> 00:15:50.650 And if I click on my name 00:15:52.530 --> 00:15:55.590 you will see that the list of friends will come up. And I'm 00:15:55.640 --> 00:15:58.450 displaying all my pictures. And you will see how the pictures 00:15:58.500 --> 00:16:01.850 are sort of nicely formatted in thumbnails, and so imagine the 00:16:01.900 --> 00:16:04.500 amount of code that I had to write to generate this kind of a 00:16:04.550 --> 00:16:09.640 mark up. So if I switch back to my application and if I go to 00:16:09.690 --> 00:16:11.770 my Facebook info page, 00:16:13.970 --> 00:16:16.530 this is the amount of code I had to write to generate thumbnails. 00:16:16.580 --> 00:16:20.150 So again there is very little CSS. These are CSS classes that 00:16:20.200 --> 00:16:23.880 are coming from the Bootstrap framework. I didn't have to write 00:16:23.930 --> 00:16:29.350 any custom CSS to generate a thumbnail view for all of my images. 00:16:29.400 --> 00:16:34.510 So again just to close out on it: Bootstrap integration in ASP.NET 00:16:34.560 --> 00:16:39.640 templates makes it really easy to get started with a template 00:16:39.690 --> 00:16:43.720 which is responsive, which is mobile friendly, which is metro 00:16:43.770 --> 00:16:47.370 themed, which makes it really easy for you to build applications 00:16:47.420 --> 00:16:51.220 so that you can target different form factors and different browsers. 00:16:51.690 --> 00:16:54.390 And you can spend most of your time building your application-specific 00:16:54.510 --> 00:16:57.220 logic and not worry about the UI framework. 00:16:57.730 --> 00:17:00.560 So I hope you enjoyed it. Thank you for watching this video. 00:17:00.610 --> 00:17:03.870 I hope you enjoyed the Bootstrap integration in Visual Studio 00:17:03.920 --> 00:17:07.640 and ASP.NET, and I hope you will use these templates to build 00:17:07.690 --> 00:17:11.440 up applications. To learn more you can go to the ASP.NET site 00:17:11.490 --> 00:17:17.300 and check out how you can integrate Bootstrap better.