WebSigCleveland.org Javascript & Stylesheet Toolkits

Blog Date: 
Mon Mar 26th 2012

WebSigCleveland.org

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

jQuery Mobile FrameworkFirst, 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.

Description from jQueryMobile.com:

jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets

A unified, HTML5-based user interface system for all popular mobile device platforms, built on the rock-solid jQuery and jQuery UI foundation. Its lightweight code is built with progressive enhancement, and has a flexible, easily themeable design.”

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

Sencha Touch

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

Bootstrap, from TwitterNext, 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:

twitter.github.com/bootstrap/

“Bootstrap, from Twitter. Simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions.”

  • 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

jQuery UINext, 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.

http://jqueryui.com/

“jQuery UI provides abstractions for low-level interaction and animation, advanced effects and high-level, themeable widgets, built on top of the jQuery JavaScript Library, that you can use to build highly interactive web applications.”

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

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

Dojo Toolkit

Dojo ToolkitWe 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. 

 

Please feel free to share your favorite Javascript and Stylesheet Toolkit resources in the comments section below. Thank you. 

 

Add new comment

Optional. Please enter your email address. The current settings will hide your email address from your posted comment, but will allow the administrators for sosAssociates.com to contact you via email if needed.
Optional. Please enter your phone number. The current settings will hide your phone number from your posted comment, but will allow the administrators for sosAssociates.com to contact you via phone if needed.
Please share your Twitter name. This WILL be seen by all.
Please share your website address. This WILL be seen by all.

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.
Type the characters you see in this picture.
Type the characters you see in the picture; if you can't read them, submit the form and a new image will be generated. Not case sensitive.  Switch to audio verification.