WebSigCleveland.org Javascript & Stylesheet Toolkits

At the March 17, 2012, WebSigCleveland.org meeting, Richard Schulte (RSchulte.com; @Rerooting), a co-founder of the local tech worker co-op Flywheel Tech Collective (FlyWheelCollective.com; @FlyWheelTech), did a presentation on “Javascript/Stylesheet UI Toolkits - Why, Which and How?” The purpose of the topic of the day was to introduce the attendees to the more popular and/or useful tools for developing Javascript and Cascading Stylesheets for website design, and Richard did not disappoint his audience.

I plan to add a link to Richard's presentation later tonight (3/26/12), so please come back to this blog post in the near future. 

jQuery Mobile

First, we looked at jQuery Mobile (jQueryMobile.com), which is an HTML5-based system for building websites for smartphones and tablets. It is a built-in solution that is already created using the correct methods for mobile devices.  It was asked if there would be problems for devices that don't support HTML5, but Richard explained that since jQuery Mobile targeted only mobile devices that would support the technology, website developers don't have to worry about the typical issues that accompany supporting Microsoft's Internet Explorer.

Richard Schulte then walked ^clicked us through an online demo in the “docs” section of the website.  Even if you are not on your smartphone, by looking around the demo section, you will get a feel for how your visitors will interact with your mobile website.  

Here is an iFrame example of a standard site for you to try. I did not have a lot of time to play with the CSS/JavaScript/HTML files that can create this, but it was fairly easy to get the results I wanted with basic HTML/CSS knowledge.

You can download and try it yourself from: jQueryMobile.com/download/, or you can give it a try online at: jQueryMobile.com/demos/

In the jQuery Mobile example I created for the iFrame above, I easily made basic re-theme changes to it to reflect the sosAssociates.com colors.  I did this using ThemeRoller for jQuery Mobile.  I recommend giving  it a try at: jquerymobile.com/themeroller/

Richard Schulte recommended to everyone that it is best to only use ThemeRoller to style jQuery Mobile.  This is because it is too easy to break the jQuery Mobile effect using other methods. 

Do take time to play around with the “cool drag-and-drop UI builder” on the jQueryMobile.com home page. It is a little app powered by Codiqa (www.Codiqa.com) which generates HTML that you can use as a great starting point for your projects.  

Sencha Touch 2

Ricard Schulte continued his presentation talking about Sencha Touch 2 (www.Sencha.com/products/touch), which is an HTML5 framework for developing mobile apps.  Richard indicated that Sencha Touch is not easy to learn, but if a developer is part of a team working on Sencha Touch mobile web apps, it can be a powerful tool. Sencha Touch is free-of-charge for commercial (commercial license agreement).

Richard demonstrated the Kitchen Sink, which gives you an overview of all the many Sencha Touch components available for smartphones and tablets. These Kitchen Sink examples and others can be found by starting here: dev.sencha.com/deploy/touch/examples/production/

In addition to the icons and toolbars that were viewed at the WebSigCleveland.org meeting, Kitchen Sink Sencha Touch has samples of carousels, animations, many touch events, forms, and media that you can explore.  Click the blue “Source” button in the upper right to see the code that makes this all happen.

Bootstrap

Next, Richard gave a brief introduction to Twitter Bootstrap. Richard stated that he recommends that even if you don't use Bootstrap's Javascript, you should check out the CSS (Cascading Stylesheets) from Bootstrap.

Here is a list of links/descriptions from the Bootstrap website of the items we touched on at the meeting:

• Scaffolding. Bootstrap is built on a responsive 12-column grid. We've also included fixed- and fluid-width layouts based on that system.
• Components. Dozens of reusable components are built into Bootstrap to provide navigation, alerts, popovers, and much more.
• Javascript for Bootstrap. Bring Bootstrap's components to life—now with 12 custom jQuery plugins.
• The ScrollSpy plugin is for automatically updating nav targets based on scroll position.
• Togglable tabs bootstrap-tab.js This plugin adds quick, dynamic tab and pill functionality for transitioning through local content.
• About Tooltips. Inspired by the excellent jQuery.tipsy plugin written by Jason Frame; Tooltips are an updated version, which don't rely on images, use css3 for animations, and data-attributes for local title storage.
• Bootstrap examples. We've included a few basic examples as starting points for your work with Bootstrap. We encourage folks to iterate on these examples and not simply use them as an end result.
• Base CSS. On top of the scaffolding, basic HTML elements are styled and enhanced with extensible classes to provide a fresh, consistent look and feel.

jQuery UI

Next, Richard recommended that we all learn about the jQuery UI interactions and widgets.  It is truly amazing what is pre-built into this Javascript system.

See the Demos & Documentation web page (jQueryUI.com/demos) to see the power: 

• Enable draggable functionality on any DOM element. Move the draggable object by clicking on it with the mouse and dragging it anywhere within the viewport.
• Enable any DOM element to be droppable a target for draggable elements.
• Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.
• Enable a DOM element (or group of elements) to be selectable. Draw a box with your cursor to select items. Hold down the Ctrl key to make multiple non-adjacent selections.
• Enable a group of DOM elements to be sortable. Click on and drag an element to a new spot within the list, and the other items will adjust to fit. By default, sortable items share draggable properties.
• Enable any DOM element to be resizable. With the cursor grab the right or bottom border and drag to the desired width or height.

Just as we looked at the ThemeRoller for jQuery Mobile, we looked at ThemeRoller for jQuery:  jQueryUI.com/ThemeRoller/

Dojo Toolkit

We wrapped up the meeting with Dojo Toolkit (DojoToolkit.org). Richard indicated that it was a very poweful tool. 

Per Wikipedia: "Dojo Toolkit is an open source modular JavaScript library (or more specifically JavaScript toolkit) designed to ease the rapid development of cross-platform..." 

We spent time at the meeting reviewing the Dojo Toolkit features.  Check them out at: dojotoolkit.org/features/ 

Thank you Richard!

Thank you, Richard Schulte, for leading this informative meeting! Learn more about his work at: RSchulte.com and FlywheelCollective.com. 

Go to WebSigCleveland.org to learn about my upcoming meetings. All meetings are free and open to all who are interested in learning more about web development. I am grateful to the many people who volunteer each week to share their expertise with others.