Crazy New CSS Tools MIS 424 MIS 424 Professor Sandvig Professor Sandvig.

Slides:

Advertisements

Similar presentations

Chapter 3 – Web Design Tables & Page Layout

Advertisements

Sculpt Framework Mobile-First with Progressive Enhancement.

XP 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

Navigation Controls MacDonald Ch. 11 MIS 424 MIS 424 Professor Sandvig Professor Sandvig.

Working with Cascading Style Sheets. 2 Objectives Introducing Cascading Style Sheets Using Inline Styles Using Embedded Styles Using an External Style.

Responsive Web Design Sheri German, Instructor Montgomery College.

Lloyd-Jamie Bennett – P Stylianos Michael – P

CISC 474: Advanced Web Technologies HTML5 & CSS3, & Responsive Design.

HTML Overview for Proofreading. HTML layouts are divided into sections, and created in tables separating the images & content sections.

Bones – HTML5 Wordpress Theme Development

TUTORIAL 8: Enhancing a Web Site with Advanced CSS

Branding and designing capabilities with the Design Manager MALIN DE SILVA SHAREPOINT SPECIALIST EXILESOFT, SRI LANKA.

Computer science Languages, etc.. Overview For web-applications (HTML, JS) – Designing languages (HMTL, CSS) – Server Languages (PHP, ASP) – Extensions.

Tutorial 6 Creating Tables and CSS Layouts. Objectives Session 6.1 – Create a data table to display and organize data – Modify table properties and layout.

Working with Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of a document.

XP Tutorial 7New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks.

Ch6:creating consistent looking web sites. Master pages Master page defines a combination of fixed content and content place holder to hold the web page(.aspx)

Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.

CSE3310: Web training A JumpStart for Project.

Extreme Makeover: SharePoint 2013 Edition

Copyright © 2013 MyGraphicsLab / Pearson Education STRUCTURE AND HTML TAGS MyGraphicsLab: Adobe Dreamweaver CS6 ACA Certification Preparation for Web Communication.

Overview of Data Access MacDonald Ch. 15 MIS 324 Professor Sandvig.

Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® Copyright 2010 Adobe Systems Incorporated. All rights reserved. ® Copyright 2012 Adobe.

Session 1 SESSION 1 Working with Dreamweaver 8.0.

Word 2010 Vocabulary List 1. Click and Type - A feature that allows you to double-click a blank area of a document to position the cursor in that location,

SHAREPOINT BRANDING SHAREPOINT PAKISTAN USER GROUP – FEB 2012.

Session I Outline Chapter 1 – Getting Started Session I – Exercise 1 & 2 Chapter 3 – Grid System Chapter 7 – Multi-Column.

Strategies for Building Mobile Apps Using ArcGIS API for JavaScript Andy Gup, Lloyd Heberlie.

Professor Waterman Cascading Style Sheets (CSS) is a language that works with HTML documents to define the way content is presented. The presentation.

LEARNING HTML PowerPoint #1 Cyrus Saadat, Webmaster.

Use CSS to Implement a Reusable Design Selecting a Dreamweaver CSS Starter Layout is the easiest way to create a page with a CSS layout You can access.

Name Microsoft Student Partner Overview of the Visual Studio 2005 Express Products.

Making iServices Subscriber More Mobile Friendly `

CSS BEST PRACTICES.

1 © Netskills Quality Internet Training, University of Newcastle Using Style Sheets in Dreamweaver CS © Netskills, Quality Internet Training, University.

Chapter 5 Working with Tables Principles of Web Design, 4 th Edition.

CNIT 132 – Week 4 Cascading Style Sheets. Introducing Cascading Style Sheets Style sheets are files or forms that describe the layout and appearance of.

Master Pages MacDonald Ch. 13 MIS 324 MIS 324 Professor Sandvig Professor Sandvig.

LESSON 15 – UNIT 0 ADAPTING YOUR WEB SITE FOR MOBILE DEVICES.

Bootstrap Front-End Framework for Responsive Web Sites Svetlin Nakov Technical Trainer Software University

Positioning Objects with CSS and Tables

Bundles, Minification Andres Käver, IT Kolledž

 An HTML, CSS, Javascript framework you can use as a basis for creating web sites  Uses CSS settings, fundamental HTML elements styled and enhanced.

Responsive Web Design (RWD) MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/11/2016.

CSE3310: Web training A JumpStart for Project. Outline Introduction to Website development Web Development Languages How to build simple Pages in PHP.

Basic Elements of Responsive Web Design Jason Bengtson, MLIS, AHIP Emerging Technologies/R&D Librarian UNM Health Sciences Library and Informatics Center.

A gentle introduction to Bootstrap MIS 3502, Spring 2016 Jeremy Shafer Department of MIS Fox School of Business Temple University 2/18/

Fundamentals of Web DevelopmentRandy Connolly and Ricardo Hoar Textbook to be published by Pearson Ed in early Bootstrap.

Dreamweaver – Setting up a Site and Page Layouts Web Design Section 7-2 Part or all of this lesson was adapted from the University of Washington’s “Web.

XP Tutorial 7New Perspectives on HTML and XHTML, Comprehensive 1 Working with Cascading Style Sheets Creating a Style for Online Scrapbooks Tutorial 7.

1 Chapter 15 Creating a Presentation. Practical Computer Literacy, 2 nd edition Chapter 15 2 What’s inside and on the CD? In this chapter, you will learn.

Microsoft Excel Illustrated Introductory Workbooks and Preparing them for the Web Managing.

A gentle introduction to Bootstrap TDAP Jeremy Shafer Department of MIS Fox School of Business Temple University Spring

How HTML responsiveness translates to PDF

Working with Cascading Style Sheets

Dreamweaver – Setting up a Site and Page Layouts

Responsive Design and Twitter Bootstrap

Tables and Frames.

© 2016, Mike Murach & Associates, Inc.

Presentation 2 Web Design.

Michael Robertson Yuta Takayama Google Closure Tools.

User Interface Design and Usability Bootstrap

Bootstrap A popular HTLM, CSS, and JS framework for developing responsive, mobile first projects on the web.

Dreamweaver – Setting up a Site and Page Layouts

CSS BEST PRACTICES.

Fixed Positioning.

Session VI Chapter 8 - How to Use Responsive Web Design (RWD)

CS3220 Web and Internet Programming Introduction to Bootstrap

04 | Visual Studio & ASP.NET Integration

Web Application Development Using PHP

Presentation transcript:

Crazy New CSS Tools MIS 424 MIS 424 Professor Sandvig Professor Sandvig

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

Motivation for CSS tools  Three primary drivers: 1. Mobile 2. Mobile 3. 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 Three column layout Twitter Boostrap Twitter Boostrap

Responsive Frameworks  Bootstrap: each row must add to 12 columns Header Header Left column Left column Content Content Right Right Output

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

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

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

Bundling  Bundle multiple.css &.js files into one file  Benefit: reduced download time

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

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

Web Essentials  Minification & bundling Bundling combines & minifies files 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 Responsive Frameworks CSS Preprocessors CSS Preprocessors Minification & bundling Minification & bundling  ASP.NET MasterPages simplifies implementation MasterPages simplifies implementation Web Essentials Web Essentials