Download presentation
Presentation is loading. Please wait.
Published byBernadette Ball Modified over 9 years ago
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
Similar presentations
© 2025 SlidePlayer.com. Inc.
All rights reserved.