Turbo_classes
creativejam opened this issue · 9 comments
I can't seem to get turbo_classes, other than "is_mobile" to show up in the selector. Any ideas?
Hi,
Could you provide more information on what you're trying to do and how you're doing it?! Are you using an emulator?!
Cheers.
Obinwanne,
Not using an emulator. Just declaring the following turbo classes:
- is_phone=phone
- is_tablet=tablet
- is_desktop=desktop
But the only class getting written to the tag is the relevant breakpoint class on any device including desktop.
Jim Muirhead
creative jam inc
web & app user interface design
twitter: @creativejam
skype: creativejam
office: 403.256.2750
On May 13, 2014, at 4:50 AM, Obinwanne Hill notifications@github.com wrote:
Hi,
Could you provide more information on what you're trying to do and how you're doing it?! Are you using an emulator?!
Cheers.
—
Reply to this email directly or view it on GitHub.
Obinwanne,
Further to my previous response, here is the code used to declare the Restive options and what I am getting in the actual page on an iPhone, for example, but similar results on desktop or table - none of the turbo_classes are inserted.
//set options for Restive responsive script
$("html").restive({
breakpoints: ['240', '320', '480', '640', '960', '1024', '1280', '3000'],
classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960', 'css-1024', 'css-1280', 'css-3000'],
turbo_classes: 'is_desktop=desktop, is_mobile=mobi, is_phone=phone, is_tablet=tablet, is_portrait=portrait, is_landscape=landscape',
force_dip: true
});
//in the page
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 6:20 AM, Jim Muirhead jim@creativejam.com wrote:
Obinwanne,
Not using an emulator. Just declaring the following turbo classes:
- is_phone=phone
- is_tablet=tablet
- is_desktop=desktop
But the only class getting written to the tag is the relevant breakpoint class on any device including desktop.
Jim Muirhead
creative jam inc
web & app user interface design
twitter: @creativejam
skype: creativejam
office: 403.256.2750
On May 13, 2014, at 4:50 AM, Obinwanne Hill notifications@github.com wrote:
Hi,
Could you provide more information on what you're trying to do and how you're doing it?! Are you using an emulator?!
Cheers.
—
Reply to this email directly or view it on GitHub.
Hi Jim,So how exactly are you determining what is being written?! Also, I don't think there's an is_desktop turbo class, I believe it's is_pc.So you mean phone is not being written to the <HTML> tag when a smartphone is active?! Can you post the code you're using to declare Restive.is?!Cheers.Obinwanne--------- Original Message ---------From: creativejam To: "obihill/restive.js" Date: Tue May 13 14:20:47 WAT 2014Subject: Re: [restive.js] Turbo_classes (#8)
Obinwanne,
Not using an emulator. Just declaring the following turbo classes:
- is_phone=phone
- is_tablet=tablet
- is_desktop=desktop
But the only class getting written to the tag is the relevant breakpoint class on any device including desktop.
Jim Muirhead
creative jam inc
web & app user interface design
twitter: @creativejam
skype: creativejam
office: 403.256.2750
On May 13, 2014, at 4:50 AM, Obinwanne Hill notifications@github.com wrote:
Hi,
Could you provide more information on what you're trying to do and how you're doing it?! Are you using an emulator?!
Cheers.
—
Reply to this email directly or view it on GitHub.
—Reply to this email directly or view it on GitHub.
I’m connecting my iPhone to my Mac via USB cable, which them let’s me use the Web Inspector in Safari to inspect the current page loaded in Mobile Safari on the phone, but the same behaviour is happening on my desktop.
Your documentation indicates that the following Turbo Classes are available, but NONE of them get written to my declared selector:
turbo_classes
There are certain instances when you need to define a class that will be added to your selected DOM element alongside any other classes you may have defined in classes.
For example, let's say you want to add a class mobi if the device is a mobile device alongside the selected class previously defined in the classes option. You can do this quite easily using turbo_classes.
Using turbo_classes, you can specify one or more conditions and a corresponding class for each condition that will be added to your DOM selector when said condition is met.
You define your turbo-class (or classes) in the following format: {condition}={class}.
Where {condition} is the specific circumstance that will trigger the {class} to be added. The following {condition} definitions are available for use:
is_mobile: will add a {class} if device is mobile e.g. phone or tablet
is_non_mobile: will add a {class} if device is non-mobile e.g. pc or tv
is_retina: will add a {class} if device has a retina display
is_phone: will add a {class} if device is a phone
is_tablet: will add a {class} if device is a tablet
is_tv: will add a {class} if device is a TV
is_desktop: will add a {class} if device is a Personal computer (or similar)
is_portrait: will add a {class} if device is in portrait orientation
is_landscape: will add a {class} if device is in landscape orientation
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 6:35 AM, Jim Muirhead jim@creativejam.com wrote:
Obinwanne,
Further to my previous response, here is the code used to declare the Restive options and what I am getting in the actual page on an iPhone, for example, but similar results on desktop or table - none of the turbo_classes are inserted.
//set options for Restive responsive script
$("html").restive({
breakpoints: ['240', '320', '480', '640', '960', '1024', '1280', '3000'],
classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960', 'css-1024', 'css-1280', 'css-3000'],
turbo_classes: 'is_desktop=desktop, is_mobile=mobi, is_phone=phone, is_tablet=tablet, is_portrait=portrait, is_landscape=landscape',
force_dip: true
});
//in the page
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 6:20 AM, Jim Muirhead jim@creativejam.com wrote:
Obinwanne,
Not using an emulator. Just declaring the following turbo classes:
- is_phone=phone
- is_tablet=tablet
- is_desktop=desktop
But the only class getting written to the tag is the relevant breakpoint class on any device including desktop.
Jim Muirhead
creative jam inc
web & app user interface design
twitter: @creativejam
skype: creativejam
office: 403.256.2750
On May 13, 2014, at 4:50 AM, Obinwanne Hill notifications@github.com wrote:
Hi,
Could you provide more information on what you're trying to do and how you're doing it?! Are you using an emulator?!
Cheers.
—
Reply to this email directly or view it on GitHub.
Got it working. Seems it didn’t like the spaces after each comma in the declaration of the turbo classes.
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 6:49 AM, Jim Muirhead jim@creativejam.com wrote:
I’m connecting my iPhone to my Mac via USB cable, which them let’s me use the Web Inspector in Safari to inspect the current page loaded in Mobile Safari on the phone, but the same behaviour is happening on my desktop.
Your documentation indicates that the following Turbo Classes are available, but NONE of them get written to my declared selector:
turbo_classes
There are certain instances when you need to define a class that will be added to your selected DOM element alongside any other classes you may have defined in classes.
For example, let's say you want to add a class mobi if the device is a mobile device alongside the selected class previously defined in the classes option. You can do this quite easily using turbo_classes.
Using turbo_classes, you can specify one or more conditions and a corresponding class for each condition that will be added to your DOM selector when said condition is met.
You define your turbo-class (or classes) in the following format: {condition}={class}.
Where {condition} is the specific circumstance that will trigger the {class} to be added. The following {condition} definitions are available for use:
is_mobile: will add a {class} if device is mobile e.g. phone or tablet
is_non_mobile: will add a {class} if device is non-mobile e.g. pc or tv
is_retina: will add a {class} if device has a retina display
is_phone: will add a {class} if device is a phone
is_tablet: will add a {class} if device is a tablet
is_tv: will add a {class} if device is a TV
is_desktop: will add a {class} if device is a Personal computer (or similar)
is_portrait: will add a {class} if device is in portrait orientation
is_landscape: will add a {class} if device is in landscape orientation
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 6:35 AM, Jim Muirhead jim@creativejam.com wrote:
Obinwanne,
Further to my previous response, here is the code used to declare the Restive options and what I am getting in the actual page on an iPhone, for example, but similar results on desktop or table - none of the turbo_classes are inserted.
//set options for Restive responsive script
$("html").restive({
breakpoints: ['240', '320', '480', '640', '960', '1024', '1280', '3000'],
classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960', 'css-1024', 'css-1280', 'css-3000'],
turbo_classes: 'is_desktop=desktop, is_mobile=mobi, is_phone=phone, is_tablet=tablet, is_portrait=portrait, is_landscape=landscape',
force_dip: true
});
//in the page
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 6:20 AM, Jim Muirhead jim@creativejam.com wrote:
Obinwanne,
Not using an emulator. Just declaring the following turbo classes:
- is_phone=phone
- is_tablet=tablet
- is_desktop=desktop
But the only class getting written to the tag is the relevant breakpoint class on any device including desktop.
Jim Muirhead
creative jam inc
web & app user interface design
twitter: @creativejam
skype: creativejam
office: 403.256.2750
On May 13, 2014, at 4:50 AM, Obinwanne Hill notifications@github.com wrote:
Hi,
Could you provide more information on what you're trying to do and how you're doing it?! Are you using an emulator?!
Cheers.
—
Reply to this email directly or view it on GitHub.
Hi Jim,Just to reiterate, it's is_pc not is_desktop. Also, make sure there are no spaces when declaring the turbo_classes i.e. between the commas.Let me know if this works.Cheers.Obinwanne--------- Original Message ---------From: creativejam To: "obihill/restive.js" Date: Tue May 13 14:36:01 WAT 2014Subject: Re: [restive.js] Turbo_classes (#8)
Obinwanne,
Further to my previous response, here is the code used to declare the Restive options and what I am getting in the actual page on an iPhone, for example, but similar results on desktop or table - none of the turbo_classes are inserted.
//set options for Restive responsive script
$("html").restive({
breakpoints: ['240', '320', '480', '640', '960', '1024', '1280', '3000'],
classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960', 'css-1024', 'css-1280', 'css-3000'],
turbo_classes: 'is_desktop=desktop, is_mobile=mobi, is_phone=phone, is_tablet=tablet, is_portrait=portrait, is_landscape=landscape',
force_dip: true
});
//in the page
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 6:20 AM, Jim Muirhead jim@creativejam.com wrote:
Obinwanne,
Not using an emulator. Just declaring the following turbo classes:
- is_phone=phone
- is_tablet=tablet
- is_desktop=desktop
But the only class getting written to the tag is the relevant breakpoint class on any device including desktop.
Jim Muirhead
creative jam inc
web & app user interface design
twitter: @creativejam
skype: creativejam
office: 403.256.2750
On May 13, 2014, at 4:50 AM, Obinwanne Hill notifications@github.com wrote:
Hi,
Could you provide more information on what you're trying to do and how you're doing it?! Are you using an emulator?!
Cheers.
—
Reply to this email directly or view it on GitHub.
—Reply to this email directly or view it on GitHub.
Thanks a bunch, Obinwanne!!!
Working like a charm now.
And thanks for the great work on this tool. It makes it so easy to write my responsive CSS now.
P.S. You might want to update your documentation re: Turbo Classes to say “is_pc=” instead of “is_desktop=” as the proper way to declare that class option.
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 7:03 AM, Obinwanne Hill notifications@github.com wrote:
Hi Jim,Just to reiterate, it's is_pc not is_desktop. Also, make sure there are no spaces when declaring the turbo_classes i.e. between the commas.Let me know if this works.Cheers.Obinwanne--------- Original Message ---------From: creativejam To: "obihill/restive.js" Date: Tue May 13 14:36:01 WAT 2014Subject: Re: [restive.js] Turbo_classes (#8)
Obinwanne,
Further to my previous response, here is the code used to declare the Restive options and what I am getting in the actual page on an iPhone, for example, but similar results on desktop or table - none of the turbo_classes are inserted.
//set options for Restive responsive script
$("html").restive({
breakpoints: ['240', '320', '480', '640', '960', '1024', '1280', '3000'],
classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960', 'css-1024', 'css-1280', 'css-3000'],
turbo_classes: 'is_desktop=desktop, is_mobile=mobi, is_phone=phone, is_tablet=tablet, is_portrait=portrait, is_landscape=landscape',
force_dip: true
});
//in the page
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 6:20 AM, Jim Muirhead jim@creativejam.com wrote:
Obinwanne,
Not using an emulator. Just declaring the following turbo classes:
- is_phone=phone
- is_tablet=tablet
- is_desktop=desktop
But the only class getting written to the tag is the relevant breakpoint class on any device including desktop.
Jim Muirhead
creative jam inc
web & app user interface design
twitter: @creativejam
skype: creativejam
office: 403.256.2750
On May 13, 2014, at 4:50 AM, Obinwanne Hill notifications@github.com wrote:
Hi,
Could you provide more information on what you're trying to do and how you're doing it?! Are you using an emulator?!
Cheers.
—
Reply to this email directly or view it on GitHub.
—Reply to this email directly or view it on GitHub.
—
Reply to this email directly or view it on GitHub.
Hi Jim, You're most welcome! Happy to help anytime.Sorry for the mixup with the documentation, I'll update that soon. I'll also see if I can add some more code to take care of the spaces automatically.Cheers.Obinwanne--------- Original Message ---------From: creativejam To: "obihill/restive.js" Date: Tue May 13 15:40:16 WAT 2014Subject: Re: [restive.js] Turbo_classes (#8)
Thanks a bunch, Obinwanne!!!
Working like a charm now.
And thanks for the great work on this tool. It makes it so easy to write my responsive CSS now.
P.S. You might want to update your documentation re: Turbo Classes to say “is_pc=” instead of “is_desktop=” as the proper way to declare that class option.
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 7:03 AM, Obinwanne Hill notifications@github.com wrote:
Hi Jim,Just to reiterate, it's is_pc not is_desktop. Also, make sure there are no spaces when declaring the turbo_classes i.e. between the commas.Let me know if this works.Cheers.Obinwanne--------- Original Message ---------From: creativejam To: "obihill/restive.js" Date: Tue May 13 14:36:01 WAT 2014Subject: Re: [restive.js] Turbo_classes (#8)
Obinwanne,
Further to my previous response, here is the code used to declare the Restive options and what I am getting in the actual page on an iPhone, for example, but similar results on desktop or table - none of the turbo_classes are inserted.
//set options for Restive responsive script
$("html").restive({
breakpoints: ['240', '320', '480', '640', '960', '1024', '1280', '3000'],
classes: ['css-240', 'css-320', 'css-480', 'css-640', 'css-960', 'css-1024', 'css-1280', 'css-3000'],
turbo_classes: 'is_desktop=desktop, is_mobile=mobi, is_phone=phone, is_tablet=tablet, is_portrait=portrait, is_landscape=landscape',
force_dip: true
});
//in the page
Jim Muirhead
creative jam inc | web & app ui design
403.256.2750 (office)
403.830.1207 (mobile)
creativejam (skype)
On May 13, 2014, at 6:20 AM, Jim Muirhead jim@creativejam.com wrote:
Obinwanne,
Not using an emulator. Just declaring the following turbo classes:
- is_phone=phone
- is_tablet=tablet
- is_desktop=desktop
But the only class getting written to the tag is the relevant breakpoint class on any device including desktop.
Jim Muirhead
creative jam inc
web & app user interface design
twitter: @creativejam
skype: creativejam
office: 403.256.2750
On May 13, 2014, at 4:50 AM, Obinwanne Hill notifications@github.com wrote:
Hi,
Could you provide more information on what you're trying to do and how you're doing it?! Are you using an emulator?!
Cheers.
—
Reply to this email directly or view it on GitHub.
—Reply to this email directly or view it on GitHub.
—
Reply to this email directly or view it on GitHub.
—Reply to this email directly or view it on GitHub.