Responsive Styles Option

[Bluenotes]

Hi Jason,

First of all, thank you to the tremendous work you’ve done with all of your previous themes and now the foundation of your work. I just have one question / comment.

As much as “responsive-ness” is becoming the new norm. Some clients don’t necessarily want it. So When I started playing with JumpStart today for a new client I noticed that the responsive settings are not present like they are in Alyeska and Aracdian from the Theme Options Admin page. I also noticed that the css for the styles are spread through-out the main css and bootstrap and not separated into it’s own responsive.css file. So I came to the conclusion that it wasn’t going to be an option anymore.

However, digging into the framework, looking for the meta viewport. I noticed that your notes said “…if responsive design is enabled in framework.” (frontend/functions/display.php)

So I suppose my question would be, are you possibly adding this option later and with that, would you also be including the optional display responsive nav settings along with it like in the Alyeska / Arcadian themes?

Thanks!
Kerry

Topic

[Jason Bobich]

Hello,

This is a good question. I think some of the styles in the framework could be separated out a little better in the future to truly give you a full way to disable them. However, realistically if your site is setup with your own style.css (omitting the theme’s default) and a fixed width on your main wrapper, it’s not going to allow the user to display your site properly when the user narrows down the window, so if a couple of little bootstrap elements change slightly, it’s not the end of the world, but still maybe something to look more at in the future.

So, I’ll see if I can separate bootstrap responsive styles from bootstrap and framework responsive styles from themeblvd.css (although I don’t think there are many of them) for the next update into separate files that could be de-registered from your Child theme.

I don’t plan to ever add a specific user-option, to turn responsive design on/off because I believe this has to do with how you design and code your Child theme. And I’ve done my best to remove as many stylistic options as possible. I don’t want any of these kinds of options in Jump Start. I want the developer to have a simple canvas to work from. And if your client requires options, you have the Options API to add them in. — This is just sort of the general approach I’ve taken throughout the entire theme for everything. The more options you have, the more cluttered if/else statements you have when those options get implemented in the actual hooked functions and template files.

In my other themes like Alyeska and Arcadian, I actually have to code in a custom chunk of CSS that gets shoved right in the header of the site when people turn off responsive styles to force in a fixed width. It’s a bit of a hack to allow people to even do that. I don’t think something like that should be in the framework by default. I think if you want your Child theme to be non-responsive, you need to code it that way by essentially giving your main wrapper a fixed width.

And this is why I’ve tried to take this approach of giving you a truly consolidated style.css file to edit that just makes up the default look and *most* of the responsive styles. ( See: http://dev.themeblvd.com/tutorial/css-hacking )

However, digging into the framework, looking for the meta viewport. I noticed that your notes said “…if responsive design is enabled in framework.” (frontend/functions/display.php)

Now, this is the secret little key to truly making your site non-responsive. I need to do an article about it at some point. — If you simply put a fixed width on your main CSS wrapper and omit all of the responsive styles of style.css, the viewport meta is an issue you’re going to run into. You can turn the farmework’s internal responsive setting off like this, which essentially effects everything but CSS.

function my_global_config( $config ) {
    $config['display']['responsive] = false;
    return $config;
}
add_filter( 'themeblvd_global_config', 'my_global_config' );

When you do this, two things happen (as of now):

1) It removes the iOS rotate bug javascript fix’s file from being loaded.
2) And most importantly, it removes the meta viewport portion from the head.

In the future, maybe this could also de-register any framework or Bootstrap responsive styles, but it would still be up to you to make sure style.css does not include any.

[Bluenotes]

Totally understand Jason. Thanks for the reply and input.

[Author]

Replies