Several months ago, I gave a presentation on custom theming with front-end frameworks in Application Express. The frameworks I referred to in my talk were Twitter Bootstrap and ZURB Foundation. These two open-source products are, in my opinion and experience, the most popular and feature-rich. For demonstration purposes, I created two custom themes based on the aforementioned frameworks. I’d like to share with you these themes since they demonstrate the capabilities of and differences between Bootstrap and Foundation.
Both frameworks integrate well with the templating mechanism of APEX. There wasn’t a notable difference between them because of the fact that Bootstrap and Foundation are very alike in usage. The biggest difference is of course the visual outcome. I created a simple demo application that includes the most common UI components. One application uses the Twitter Bootstrap theme, while a second similar application has been skinned with the Foundation theme. I personally prefer the look and feel of the Twitter Bootstrap theme, but that’s something personal of course. Here’s how the Bootstrap theme looks like.
- Every page includes a navigation bar, breadcrumb region and sticky footer.
- I used the grid layout mechanism to facilitate responsive design. I have to say this worked out pretty well since the majority of the pages fit on all sorts of screen sizes and devices.
- I was able to implement two types of form layouts: stacked and horizontal.
- Forms are validated client-side using the APEX Live Validation (ALV) plugin.
- Classic and interactive reports are based on Bootstrap’s tables.
- Vertical sidebar navigation, which is also a Bootstrap component.
- Login page.
Now it’s Foundation’s turn.
- The navigation bar, breadcrumb region and sticky footer are always visible.
- I implemented Foundation’s grid system
- Forms are validated client-side again using the APEX Live Validation (ALV) plugin.
- Classic and interactive reports had a little makeover.
- Vertical sidebar navigation, which is an out-of-the-box Foundation component.
- Login page.
Update on 21-11-2013: Seems like there’s a lot of interest in the themes. That’s why I decided to make both demo applications publicly available. You can do whatever you want with the themes.