1. Crazy New CSS Tools MIS 424 MIS 424 Professor Sandvig Professor Sandvig

2. Outline  Overview of new CSS tools Responsive Frameworks Responsive Frameworks CSS preprocessors CSS preprocessors Minification Minification Bundling Bundling  Implementing in.NET Master Pages Master Pages Visual Web Essentials Visual Web Essentials

3. Motivation for CSS tools  Three primary drivers: 1. Mobile 2. Mobile 3. Mobile  Multitude of screen size & devices  Difficult to design and test

4. Responsive Frameworks  Display well on all devices

5. Responsive Frameworks  Page divided rows & columns  Each row has 9-16 columns  Determine width by selecting number of columns  Example: Three column layout Three column layout Twitter Boostrap Twitter Boostrap

6. Responsive Frameworks  Bootstrap: each row must add to 12 columns Header Header Left column Left column Content Content Right Right Output

7. Responsive Frameworks  Dozens available  Similar conceptually  Some include more features: Bootstrap customization options Bootstrap customization optionscustomization  Limitations: Utilize media queries (browser support) Utilize media queries (browser support)browser supportbrowser support CSS files can be large CSS files can be large

8. CSS Preprocessers  Add programming features to HTML5 Reusability Reusability Structure Structure  Languages: LESS, Sass, Stylus LESS, Sass, Stylus  Useful with complex CSS Bootstrap built with LESS Bootstrap built with LESS

9. Minification  Removes extra characters from.css &.js files Line breaks Line breaks Comments Comments White space White space  Benefit Reduces download times Reduces download times  Downside Not human readable Not human readable

10. Bundling  Bundle multiple.css &.js files into one file  Benefit: reduced download time

11. Implementing in.NET  Responsive Frameworks Master pages Master pages Easy to convert existing site Easy to convert existing site  Tree Tour example 2 column fluid layout 2 column fluid layout Customize layout for specific pages Customize layout for specific pages

12. Web Essentials  Free Visual Studio extension  Supports: CSS preprocessers CSS preprocessers Minification Minification Bundling Bundling Many other handy features Many other handy features

13. Web Essentials  Minification & bundling Bundling combines & minifies files Bundling combines & minifies files

14. Web Essentials  CSS Preprocessing  Less preview screen & automatic compilation

15. Web Essentials  Color picker in.css

16. Web Essentials  Image browsing

17. Web Essentials  Image viewer

18. Web Essentials  Embed images into.css file

19. Web Essentials  CSS browser support

20. Web Essentials  Syntax error highlighting

21. Summary  Mobile devices challenging  New tools: Responsive Frameworks Responsive Frameworks CSS Preprocessors CSS Preprocessors Minification & bundling Minification & bundling  ASP.NET MasterPages simplifies implementation MasterPages simplifies implementation Web Essentials Web Essentials