Free Sample
+ Collection

jQuery UI Themes Beginner's Guide

Beginner's Guide
Adam Boduch

With a working knowledge of JavaScript you can use the JQuery UI toolkit to create professional looking applications. This book is a crash course in understanding how to build Themes, including lots of screenshots and sample code.
$23.99
$39.99
RRP $23.99
RRP $39.99
eBook
Print + eBook

Want this title & more?

$21.99 p/month

Subscribe to PacktLib

Enjoy full and instant access to over 2000 books and videos – you’ll find everything you need to stay ahead of the curve and make sure you can always get the job done.

Book Details

ISBN 139781849510448
Paperback268 pages

About This Book

  • Learn the details of the jQuery UI theme framework by example
  • No prior knowledge of jQuery UI or theming frameworks is necessary
  • The CSS structure is explained in an easy-to-understand and approachable way
  • Numerous examples, no unnecessary long explanations, lots of screenshots and diagrams

Who This Book Is For

This book is for web application developers and CSS designers who want a better understanding of how to build themes for the jQuery UI toolkit. The reader should have a basic working knowledge of JavaScript and why it is used in web applications. Experience with jQuery UI and a general working knowledge of CSS will speed things along but aren't a requirement. Readers can use this book as a starting point to familiarize themselves with the jQuery UI widget details.

Table of Contents

Chapter 1: Themeable User Interfaces
What is a theme?
What are widgets?
Styling user interfaces
Time for action - creating a style
Theme basics
Time for action - grouping styles
Time for action - nesting styles
Theme layout
Time for action - placing elements on the page
jQuery UI themes
Summary
Chapter 2: Using Themes
Downloading jQuery UI
Time for action - building a download
Time for action - removing downloaded components
Theme structure
Using jQuery UI
Time for action - using widgets
Switching themes
Time for action – exploring the theme switcher widget
Time for action - themeroller dev tool
Other frameworks
Summary
Chapter 3: Using the ThemeRoller
ThemeRoller basics
ThemeRoller gallery
Time for action - previewing a theme
Time for action - downloading a theme
Themes from scratch
Time for action - setting theme fonts
Time for action - changing the corner radius
Time for action - setting theme headers
Time for action - setting widget content styles
Time for action - setting default state styles
Time for action - setting hover state styles
Time for action - setting active state styles
Time for action - changing the highlight cue
Time for action - changing the error cue
Time for action - dialog overlays
Time for action - defining shadows
Changing existing themes
Time for action - adjusting a theme
Summary
Chapter 4: Working with Widget Containers
What are widget containers?
Containers and widgets
The ui-widget class
Time for action - preparing the example
Time for action - changing widget fonts
Time for action - scaling down font size
Time for action - changing widget form fields
The ui-widget-content class
Time for action - styling content borders
Time for action - border sides
Time for action - changing link colors
The ui-widget-header class
Time for action - Styling header borders
Time for action - border sides
Time for action - header links
Summary
Chapter 5: Transforming Interaction States
What are interaction states?
Time for action - preparing the example
The default state
Time for action - default container selectors
Time for action - default link selectors
Time for action - default border styles
Time for action - default font styles
Time for action - default background styles
The hover state
Time for action - hover container selectors
Time for action - separating the hover and focus states
Time for action - hover font styles
The active state
Time for action - active container selectors
Time for action - active background styles
Summary
Chapter 6: Customizing Interaction Cues
What are interaction cues?
Time for action - preparing the example
The highlight state
Time for action - highlight message borders
Time for action - highlight button borders
Time for action - highlight message background
Time for action - highlight date-picker background
Time for action - highlight message font
Time for action - highlight tabs font
The error state
Time for action - error message borders
Time for action - error tabs border
Time for action - error message background
Time for action - accordion error background
Time for action - error message font
Time for action - error button font
The disabled state
Time for action - increasing disabled opacity
Priorities
Time for action - button priorities
Summary
Chapter 7: Creating Theme Icons
What are theme icons?
Time for action - preparing the example
Icons in widgets
Time for action - default widget icons
Time for action - setting widget icons
Standalone icons
Time for action - displaying the current user
Time for action - identifying entities
Icon states
Time for action - default icons
Time for action - highlight icons
Time for action - error icons
Time for action - hover icons
Sprites
Theme icon sets
Time for action - creating new icons
Summary
Chapter 8: Special Effects
Setting up a jQuery environment
Theme corners
Time for action - setting all corners
Time for action - setting top corners
Time for action - setting individual corners
Time for action - increasing corner roundness
Time for action - complex radius values
Time for action - using percentages
Time for action - removing corners
Theme shadows
Time for action - applying shadows
Time for action - altering shadows
Time for action - changing perspectives
Theme overlays
Time for action - adjusting dialog overlays
Summary
Chapter 9: Theming Custom Widgets
What are custom widgets?
Implementing widgets
Time for action – basic markup
Time for action – basic JavaScript
Time for action – adding more behavior
Styling widgets
Time for action – widget CSS
Time for action – theme CSS
Time for action – finishing touches
Summary

What You Will Learn

  • Understand what themes are and why they matter
  • Learn How The jQuery UI tookit works – what widgets are, and how they relate to themes
  • Understand the details of the ThemeRoller application: how to effectively use this tool to design themes in a timely manor
  • Develop an understanding of the top-level CSS constructs. Apply styles to broad portions of the user interface
  • Change the look and feel of widgets based on user interaction and application events
  • Use cues to inform the user, and effectively apply styles to these messages
  • Use the jQuery UI icon sets as well as designing your own
  • Use special effects to enhance the visual appearance of widgets
  • Customize the look and feel of widgets

In Detail

Web applications today generally use at least some JavaScript to enhance the look and feel of the user interface. The jQuery UI toolkit gives web developers a set of widgets as well as a framework for developing and applying themes.

jQuery UI Themes: Beginner's Guide is for web developers who want to design professional-looking applications that are resilient to change. It is a step-by-step guide that goes beyond showing how to switch themes in a user interface built with jQuery UI and offers developers a practical guide to designing their own themes and gives them insight as to how themes work.

jQuery UI Themes Beginner's Guide starts with themes in general and why they're important in web applications today. We gradually move forward, covering jQuery UI basics, eventually aiming for a full understanding of the theme framework. The ThemeRoller application is a powerful tool – allowing developers to easily adjust theme settings. In addition to seeing how the ThemeRoller works, we take a more in-depth look at the CSS framework internals allowing readers to develop the ability to adjust themes in ways the ThemeRoller cannot. This includes everything from special effects to theming custom widgets. There is no limit to what your theme can change.

Once you've read this book, you'll no only be well-versed in theming jargon, you'll also be able to take one look at any jQuery UI application and understand why and how it looks the way it does.

Authors

Read More