1 / 21

Crazy New CSS Tools

Crazy New CSS Tools. MIS 424 Professor Sandvig. Outline. Overview of new CSS tools Responsive Frameworks CSS preprocessors Minification Bundling Implementing in .NET Master Pages Visual Web Essentials. Motivation for CSS tools. Three primary drivers: Mobile Mobile Mobile

duante
Download Presentation

Crazy New CSS Tools

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Crazy New CSS Tools MIS 424 Professor Sandvig

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

  3. Motivation for CSS tools • Three primary drivers: • Mobile • Mobile • 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 • Twitter Boostrap

  6. Responsive Frameworks • Bootstrap: each row must add to 12 columns <div class="row"> <div class="span12">Header</div> </div> <div class="row"> <div class="span3">Left column</div> <div class="span6">Content</div> <div class="span3">Right</div> </div> Output

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

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

  9. Minification • Removes extra characters from .css & .js files • Line breaks • Comments • White space • Benefit • Reduces download times • Downside • 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 • Easy to convert existing site • Tree Tour example • 2 column fluid layout • Customize layout for specific pages

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

  13. Web Essentials • Minification & bundling • 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 • CSS Preprocessors • Minification & bundling • ASP.NET • MasterPages simplifies implementation • Web Essentials

More Related