Blog

Aug 13

Dojo FAQ – How do I use Bootstrap with Dijit?

By on August 13, 2014 12:15 pm

DojoFAQ

Bootstrap is a framework created by Twitter’s developers to consolidate their HTML/CSS design and widgets. Bootstrap provides a clean responsive design, but the set of widgets it includes is limited, especially when compared to what’s available in the Dijit library. The CSS/HTML theme can be used independently of the widgets, but how do you use the Bootstrap theme with the Dijit library?

As you may have guessed, it’s not quite as simple as including the relevant Bootstrap CSS files. However, Dijit supports custom themes, so with a bit of work the elements of the Bootstrap theme could be ported to Dijit widgets. Fortunately, this was just what the dbootstrap project set out to accomplish.

For a better idea of what this Dijit/Bootstrap marriage looks like, check out the dbootstrap gallery, a modified version of Dijit’s Theme Tester that also includes dgrid. Let’s take a closer look at dbootstrap and how to use it in your Dojo application.

Nov 16

Dive Into Dijit Forms with AMD

By on November 16, 2012 2:01 am

As was illustrated with our Dive Into Dijit with AMD post, the Dijit library provides an extremely powerful, flexible set of Dojo-based widgets with which you may easily enhance the look and functionality of your web application.  These widgets include drop down / popup menus, dialogs, page layouts, trees, progress bars, and form elements.  When looking at these elements, it’s easy to see that Dijit enhances their presentation, but this post will focus on enhancing functionality;  specifically, enhancing a basic form with usability improvements and validation.

Dive Into Dijit with AMD

By on November 16, 2012 2:00 am

One huge feature that sets the Dojo Toolkit apart from other JavaScript libraries is its UI component system: Dijit. A flexible, comprehensive collection of Dojo modules (complemented by corresponding resources like images, CSS files, etc.), Dijit allows you to create flexible, extensible, stylish widgets. To learn how to install, configure, and use basic Dijits within your web application, keep reading!


themes

Nov 2

Dojo Tutorial: Loading Overlay

By on November 2, 2012 10:30 am

As part of our great updates to the Dojo Tutorials for Dojo 1.8, we’ve been busy creating several new tutorials.

Loading Overlay

Loading Overlay This tutorial teaches you how to create an overlay that puts you in control of the user experience while the loading of dependencies and rendering of the UI takes place in the background.

Check out the Loading Overlay tutorial for Dojo 1.8, 1.7, or 1.6!

Want to see a specific Tutorial? Want to Learn More?

Is there something you’d like to learn how to do with Dojo? Always wanted to know how something in Dojo works? Leave us a message in the blog comments and we’ll see about getting a tutorial created for you. Or sign-up for an upcoming SitePen Dojo Workshop to get a fully immersive hands-on experience with Dojo.

Aug 11

Dive Into Dijit Forms

By on August 11, 2010 7:30 am
Notice: There is a newer version of this post available

As was illustrated with our Dive Into Dijit post, the Dijit library provides an extremely powerful, flexible set of Dojo-based widgets with which you may easily enhance the look and functionality of your web application.  These widgets include drop down / popup menus, dialogs, page layouts, trees, progress bars, and form elements.  When looking at these elements, it’s easy to see that Dijit enhances their presentation but this post will focus on enhancing functionality;  specifically, enhancing a basic form with usability improvements and validation.

Jul 26

Dive Into Dojo Chart Theming

By on July 26, 2010 12:31 pm
This entry is part 2 of 4 in the series Dive Into Dojo
Notice: There is a newer version of this post available

The previous installment of the Dive Into Dojo series shows how easy it is to Dive Into Dojo Charting to get started with Dojo’s charting library. It comes with dozens of stylish themes you can effortlessly plug into any chart. But what if you want your charts to match your website’s design or business’ branding? No worries: Dojo’s charting library allows you to create custom themes!

Dojo Chart Themes

Jul 12

Dive Into Dijit

By on July 12, 2010 7:37 am
This entry is part 1 of 4 in the series Dive Into Dojo
Notice: There is a newer version of this post available: Dive into Dijit with AMD

One huge feature that sets the Dojo Toolkit apart from other JavaScript libraries is its UI component system: Dijit. A flexible, comprehensive collection of Dojo classes (complemented by corresponding assets like images, CSS files, etc.), Dijit allows you to create flexible, extensible, stylish widgets. To learn how to install, configure, and use basic Dijits within your web application, keep reading!

Dijit Widgets

Aug 13

Your business is important to us. Please wait

By on August 13, 2009 10:26 am

Interacting with a web application is a conversation. The user interface is your company’s proxy, it communicates on your behalf and just like a real conversation, you communicate as much with your body language as with the words you exchange. Good visual design can provide the right setting for this conversation, but interaction is the body language in this analogy. And one of the defining characteristics of good interaction is responsiveness.

Apr 3

Queued: Theming

By on April 3, 2009 12:01 am

As part of our series on how we built Queued, today we’re going to talk about theming the Queued application, and touch on a few examples of what made putting the skin on Queued so much fun.

The foundation for the beautiful theme for Queued was laid down by colleagues Damon Dimmick and Torrey Rice, and their amazing wireframe and mockup work (respectively) provided the building blocks for laying down Queued’s skin.

Mar 27

Queued: Visualizing the Queue

By on March 27, 2009 12:02 am

Visual Translation

As with every SitePen project, we started out Queued with a set of written requirements that defined what the app should do. From that set of requirements, the design team began to define common user goals and create wireframes that detailed how the user would achieve these goals.

Visual Translation

We created a set of wireframes for every screen in the app and then the visual fun began. What should it look like?