Crazy New CSS ToolsCrazy New CSS Tools

MIS 424MIS 424

Professor SandvigProfessor Sandvig

OutlineOutline

Overview of new CSS toolsOverview of new CSS tools Responsive FrameworksResponsive Frameworks CSS preprocessorsCSS preprocessors MinificationMinification BundlingBundling

Implementing in .NETImplementing in .NET Master PagesMaster Pages Visual Web EssentialsVisual Web Essentials

Motivation for CSS toolsMotivation for CSS tools

Three primary drivers:Three primary drivers:1.1. MobileMobile

2.2. MobileMobile

3.3. MobileMobile Multitude of screen size & devicesMultitude of screen size & devices Difficult to design and testDifficult to design and test

Responsive FrameworksResponsive Frameworks

Display well on all devicesDisplay well on all devices

Responsive FrameworksResponsive Frameworks

Page divided rows & columnsPage divided rows & columns Each row has 9-16 columnsEach row has 9-16 columns Determine width by selecting number of Determine width by selecting number of

columnscolumns

Example: Example: Three column layoutThree column layout Twitter Boostrap Twitter Boostrap

Responsive FrameworksResponsive Frameworks Bootstrap: each row must add to 12 columnsBootstrap: each row must add to 12 columns

<div class="row"><div class="row">

<div class="span12">Header</div><div class="span12">Header</div>

</div></div>

<div class="row"><div class="row">

<div class="span3">Left column</div><div class="span3">Left column</div>

<div class="span6">Content</div><div class="span6">Content</div>

<div class="span3">Right</div><div class="span3">Right</div>

</div></div>

OutputOutput

Responsive FrameworksResponsive Frameworks

Dozens availableDozens available Similar conceptuallySimilar conceptually Some include more features:Some include more features:

Bootstrap customization optionsBootstrap customization options

Limitations:Limitations: Utilize media queries (browser support)Utilize media queries (browser support) CSS files can be largeCSS files can be large

CSS PreprocessersCSS Preprocessers

Add programming features to HTML5Add programming features to HTML5 ReusabilityReusability StructureStructure

Languages:Languages: LESS, Sass, StylusLESS, Sass, Stylus

Useful with complex CSS Useful with complex CSS Bootstrap built with LESS Bootstrap built with LESS

MinificationMinification

Removes extra characters from .css & .js Removes extra characters from .css & .js filesfiles Line breaksLine breaks CommentsComments White spaceWhite space

BenefitBenefit Reduces download timesReduces download times

DownsideDownside Not human readableNot human readable

BundlingBundling

Bundle multiple .css & .js files into one fileBundle multiple .css & .js files into one file Benefit: reduced download timeBenefit: reduced download time

Implementing in .NETImplementing in .NET

Responsive FrameworksResponsive Frameworks Master pagesMaster pages Easy to convert existing siteEasy to convert existing site

Tree Tour exampleTree Tour example 2 column fluid layout2 column fluid layout Customize layout for specific pagesCustomize layout for specific pages

Web EssentialsWeb Essentials

Free Visual Studio extensionFree Visual Studio extension

Supports:Supports: CSS preprocessersCSS preprocessers MinificationMinification BundlingBundling Many other handy featuresMany other handy features

Web EssentialsWeb Essentials

Minification & bundlingMinification & bundling Bundling combines & minifies filesBundling combines & minifies files

Web EssentialsWeb Essentials

CSS PreprocessingCSS Preprocessing Less preview screen & automatic Less preview screen & automatic

compilationcompilation

Web EssentialsWeb Essentials

Color picker in .cssColor picker in .css

Web EssentialsWeb Essentials

Image browsingImage browsing

Web EssentialsWeb Essentials

Image viewerImage viewer

Web EssentialsWeb Essentials

Embed images into .css fileEmbed images into .css file

Web EssentialsWeb Essentials

CSS browser supportCSS browser support

Web EssentialsWeb Essentials

Syntax error highlightingSyntax error highlighting

SummarySummary

Mobile devices challengingMobile devices challenging New tools:New tools:

Responsive FrameworksResponsive Frameworks CSS PreprocessorsCSS Preprocessors Minification & bundlingMinification & bundling

ASP.NETASP.NET MasterPages simplifies implementationMasterPages simplifies implementation Web EssentialsWeb Essentials