Juicebox HTML5 Responsive Image Galleries
This Juicebox module provides an integration between the Juicebox HTML5 responsive gallery library (http://juicebox.net/) and Drupal. Juicebox is in many ways the successor of Simpleviewer and offers a powerful and flexible image gallery front-end. See the project page for a detailed feature overview.
Installation
- Install and enable the required Libraries API module (version 2.0 or above) from http://drupal.org/project/libraries.
- Download the 3rd party Juicebox library from http://www.juicebox.net/download/ and extract it to a temporary location. Both the Lite (free) and Pro versions should work fine with this module, and the one you choose will depend largely on how much formatting flexibly you require.
- Copy the core Juicebox library files to your site's library directory. Typically this means you will create a new directory called /sites/all/libraries/juicebox and then copy the contents of the "jbcore" directory (that you extracted in the previous step) to this directory. You will end up with /sites/all/libraries/juicebox/juicebox.js ... etc.
- Install and enable this Juicebox module.
Custom theming: Add html5 placeholder attribute to a webform component in theme
You can add an html5 placeholder attribute in your theme using a preprocess hook. Here's an example for an email component:
<?php
function THEMENAME_preprocess_webform_email(&$variables) {
$variables['element']['#attributes']['placeholder'] = t('Email Address');
}
?>SCSS Settings
@TODO
The placeholder page for Zurb Foundation 7.x documentation and will contain general information about SCSS settings.
- _base.scss
- _settings.scss
- app.scss
See:
How to Build a Drupal 7 HTML5 Video Subtitling/Closed-captioning System
Overview
Why might you want to close-caption or subtitle video content on your site? Well, one reason for subtitling is to provide fully functional internationalization/localization capabilities. One of the many reasons Drupal is the CMS of choice is because of its robust multilingual support. If you are posting multilingual text content on your site, multilingual support can and should extend to all content, including video, through the use of subtitles.
Many visitors to your site—regardless of whether or not your content is internationalized—may use a screen reader or require the use of text captions where audio is used within video to convey information. It is therefore a reasonable accessibility accommodation in many cases to provide closed captions where video is an essential component of your site.
A third use case involves a site where video is used to demonstrate a process in detail, but where audio description is too expensive, time consuming, or creates significant localization challenges. I have a site where I have hundreds of separate videos, all with stepwise descriptions for completing maintenance or troubleshooting procedures. I needed the non-technical end-user to be able to upload the video and add subtitle text in the node edit page.
Read moreDetails
Problem
Pages with a lot of form elements without grouping and hierarchy are confusing and hard to use and get used to. Some form elements are not important enough to see all the time.
Solution

Group related form elements with a detail.
A detail is placed around these form elements. Depending on the browser, a detail will be collapsible.
Use when
- There are a lot of form elements which need to be grouped logically
- There are very different form elements on a page
- There are very similar form elements, but with a distinctive difference
Recommendations
- Don't put a detail around the main (first) interaction on the page if there is one
- Keep the label short and concrete
- detail contents should stay within 1 page scroll
- Avoid nested details, it disorients the user
- Position default-collapsed details below expanded ones
- If a detail is collapsible, the default state should be collapsed (if it's that important to show its content initially, don't make it collapsible)
When to use Fieldsets over Details
- When they are semantically related like a date field with year, month, day, time.
API
Read moreOmega 3.x
The following pages only apply to the 3.x version of Omega.
The following pages will explain what Omega 3.x is, how it works and outline established best practices for getting started with your own Omega based subtheme. Please start at the beginning as Omega's approach to theming is different than other themes. If you assume too much you may find complications in understanding how to use Omega. Looking for Omega 4.x documentation? Go here.
If you are just getting started using Omega, please do yourself a favor; follow the logical progression of this handbook. Start here means start here. If you skip ahead assuming too much you will likely encounter complications that you could have avoided by understanding the basics from the beginning. Each page below is a distinct concept and they are intentionally ordered in such a way as to walk the user through getting started to being fully informed as quickly and thoroughly as possible.
Drupalize.Me offers a free video overview of Omega 3.x... Omega 3.x Overview