nathansmith/adapt — Issue #13: Remove all-or-nothing requirement tied to 'path' property
Author: othermachines
Created: 2012-01-13 19:16:18+00:00
State: open

First, let me say "great work!" Lately I've spent a great deal of time exploring adaptive/responsive design and, although I appreciate that no one solution is perfect, I like what adapt.js brings to the table.

I do have a couple of feature requests, which I'll split into two issues. The first addresses the all-or-nothing requirement for using callbacks/stylesheets; specifically, you can't just trigger a callback on one range and load a stylesheet on another. A combination may be desirable (as it was for me) when style inheritance creates issues. In my case, for mobile devices I need to set **width:auto !important;** to override values set inline. I can't simply create a generic rule in my default (mobile) stylesheet because that can only be overridden be specifying a new rule in a child stylesheet, when what I want is to use the styles set inline (effectively "undoing" the rule rather than overriding it).

(The inline values weren't my idea, by the way. I'm just stuck with them.)

How this would work:

In my default stylesheet (styles.min.css), I've specified **#mobile .col1 { width:auto !important; }**.

MY <head>:

Obviously what will happen here is an extra <link> tag will be written out with "0" as the file, causing 404 warnings. Of course I could just create a separate stylesheet with one rule - and I certainly will if you disagree that flexibility here is needed.

I'm not sure it's the best way, but I've gotten this working pretty easily by modifying adapt.js as below. It essentially removes the requirement to specify 'path' and instead checks for a file.

Check if **file** is not a number (line 76):

url = '';
// Check for maxiumum or range.
if ((!val_2 && i === last && width > val_1) || (width > val_1 && width <= val_2)) {
// Built full URL to CSS file.
if (isNaN(file)) {
url = path + file;
}
break;
}

Check **url** instead of **path** (line 98):

// Add the CSS, only if url is not empty.
// Use faster document.head if possible.
url && (d.head || d.getElementsByTagName('head')[0]).appendChild(css);

Of course your experienced eye may find I've missed something.

Thanks -