Using a CSS Framework or How to spend less time making CSS layouts and more time at the Tugboat Brewpub Chris Barr, Villanova University.

Slides:

Advertisements

Similar presentations

Introduction to VuFind

Advertisements

Websydian Anne-Marie Arnvig Manager, Websydian Communications & Relations.

Websydian products.

15 LAYOUT Controlling the position of elements Creating site layouts Designing for different sized screens.

Android architecture overview

Take a Virtual Classroom Tour!. Virtual Classroom View.

1 of 6 This document is for informational purposes only. MICROSOFT MAKES NO WARRANTIES, EXPRESS OR IMPLIED, IN THIS DOCUMENT. © 2007 Microsoft Corporation.

CSS Basics LIS Webteam April 8, Why CSS? What’s wrong with HTML? Structure vs Style Early web design used hacks to style webpages with HTML – like.

The.htm/.html Mystery When saving the template files in Internet Explorer, they will be named.htm by default. To be consistent with how the code was written.

Vaadin TestBench CSCI 3130 WINTER What’s TestBench  A toolkit for testing user interfaces  Based on Selenium  Written in Java; interacts with.

University of California, Irvine (Administrative Computing Services) Accessible Form HTML Samples Using Yahoo User Interface (YUI) Grids.

Other Features Index and table of contents Macros and VBA.

Web Design Basic Concepts.

Microsoft Share Point 2007 Lela Castaneda. Microsoft Office SharePoint Designer 2007 top 10 benefits 1)Be more productive with next-generation Microsoft.

Customizing Microsoft Project

Lesson 4 MICROSOFT EXCEL PART 1 by Nguyễn Thanh Tùng Web:

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

Office 365 & Document Sharing Chris Kellow. What is Office 365 and the Cloud? Cloud based service provided by Microsoft. Documents and Files are held.

Yahoo! User Interface (YUI) Library Natly Mekdara.

NOTE: To change the image on this slide, select the picture and delete it. Then click the Pictures icon in the placeholder to insert your own image. WEB.

INTRODUCTION TO FRONTPAGE. TOPICS TO BE DISCUSSED……….  Introduction Introduction  Features Features  Starting Front Page Starting Front Page  Components.

Electronic Course Layout and Presentation System An alternative method for presenting course information and activities to students in Sakai University.

Website Development with Dreamweaver

Nate Zaugg. Initially released in December 1996 Written to allow separation of document content from document layout Different styles can target different.

Domain 3 Understanding the Adobe Dreamweaver CS5 Interface.

NOTE: To change the image on this slide, select the picture and delete it. Then click the Pictures icon in the placeholder to insert your own image. WEB.

Learningcomputer.com Introduction to Microsoft Word 2007 New Look and Feel.

Enhancing the Graphical User Interface Multiple Forms, Controls, and Menus.

Learningcomputer.com.  Microsoft Office 2007 has replaced the Menu and Standard Toolbar with a new feature called the “Ribbon”  This new interface improves.

CSS = Cascading Style Sheet CSS consists of rules to display, style and decorate HTML elements Why CSS ? – Separate decoration from HTML markup (Ex :,,…)

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

Understanding Excel Lesson 1.

Tradepoint Enterprise – Sneak Peek at Version 3.0 Power Point Template.

CERN toolbar, theme, new website Dan Noyes, Entice, 4 April 2013.

CSS BEST PRACTICES.

New Selectors Extension Module Webinar March 11th, 2010.

® Microsoft PowerPoint 2010 ® Tutorial 3 Adding Special Effects to a Presentation.

Getting Started with Microsoft Expression Web 3 January 12, 2012.

Spreadsheets 101 What is Excel?. Objectives 1. Identify the parts of the Excel Screen 2. Identify the functions of a spreadsheet 3. Identify how spreadsheets.

Introduction to Programming in VB Chapter 1. 2 Software Development Life Cycle Gather Requirements Design Program Code & Test Program Implement u Software.

Using Microsoft Word First, make sure that you are on the home tab across the top. Next locate the word Font in the ribbon, again, across the top.

The Expression Web Environment Module 5: Beyond the Basics with Expression Web LESSON 1.

© 2012 Adobe Systems Incorporated. All Rights Reserved. Copyright 2012 Adobe Systems Incorporated. All rights reserved. ® REUSABLE DESIGN.

Lab 4: Bootstrap and Responsive Design User Interface Lab: GUI Lab Sep. 16 th, 2014.

Adxstudio Portals Training

IE Developer Tools Jonathan Seitel Program Manager.

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

Microsoft PowerPoint 101 Andy Meyers Ticor and Chicago Title

CONCEPTS FOR FLUID LAYOUT Web Page Layout. Essential Questions What challenges do mobile devices present to Web designers? What are the basic concepts.

Windows App Studio Windows App Studio is the tool that makes it fast and easy to build Windows 10 apps. It’s accessible from any device with a browser.

Laying out Elements with CSS

Tk Widgets in Javascript

Microsoft Office PowerPoint 2007

open up the computer login left double-click on Applications

Concepts for fluid layout

Client / Server Application Presentation

IS1500: Introduction to Web Development

CSS BEST PRACTICES.

Module 1: Getting Started

WPF AKEEL AHMED.

Principles of Web Design 5th Edition

Reports - Basic.

Building ASP.NET Applications 2

Web Page Layout Imran Rashid CTO at ManiWeber Technologies.

Web Client Side Technologies Raneem Qaddoura

Concepts for fluid layout

Microsoft Word Software

Learning the Basics of Microsoft Word 2010 for Microsoft Windows

Presentation transcript:

Using a CSS Framework or How to spend less time making CSS layouts and more time at the Tugboat Brewpub Chris Barr, Villanova University

Play along at home.

Framework a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused.

Why we use a CSS Framework? Normalize code base Well documented Browser compliance (with some hacks baked in) Easily create multiple layouts Weve got better things to do than finding novel ways of creating columns

Yahoo User Interface Library

Microsoft? User Interface Library

What we like about YUI 4 standard size layouts out of the box Ems based (nice zoom layouts) Source order independence A-grade browser compliance BSD License

The YUI CSS Files Reset.css Fonts.css Grids.css And a helper… base.css

Lets play!