220 likes | 348 Vues
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
E N D
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 • Multitude of screen size & devices • Difficult to design and test
Responsive Frameworks • Display well on all devices
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
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
Responsive Frameworks • Dozens available • Similar conceptually • Some include more features: • Bootstrap customization options • Limitations: • Utilize media queries (browser support) • CSS files can be large
CSS Preprocessers • Add programming features to HTML5 • Reusability • Structure • Languages: • LESS, Sass, Stylus • Useful with complex CSS • Bootstrap built with LESS
Minification • Removes extra characters from .css & .js files • Line breaks • Comments • White space • Benefit • Reduces download times • Downside • Not human readable
Bundling • Bundle multiple .css & .js files into one file • Benefit: reduced download time
Implementing in .NET • Responsive Frameworks • Master pages • Easy to convert existing site • Tree Tour example • 2 column fluid layout • Customize layout for specific pages
Web Essentials • Free Visual Studio extension • Supports: • CSS preprocessers • Minification • Bundling • Many other handy features
Web Essentials • Minification & bundling • Bundling combines & minifies files
Web Essentials • CSS Preprocessing • Less preview screen & automatic compilation
Web Essentials • Color picker in .css
Web Essentials • Image browsing
Web Essentials • Image viewer
Web Essentials • Embed images into .css file
Web Essentials • CSS browser support
Web Essentials • Syntax error highlighting
Summary • Mobile devices challenging • New tools: • Responsive Frameworks • CSS Preprocessors • Minification & bundling • ASP.NET • MasterPages simplifies implementation • Web Essentials