Crazy New CSS Crazy New CSS Tools Tools MIS 424 MIS 424 Professor Sandvig Professor Sandvig
Dec 13, 2015
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