Bootstrap [responsive, mobile-ready]

[Kyttias]

Originally Posted by LucasA33

This is absolutely amazing! I've wanted bootstrap for this for a while and after many attempts just gave up.

Thank you very much!

Sure, sure, no problem. No credits are necessary so go ahead and take it and build on it. At the core, all I want to do is provide a framework that meshes Bootstrap with the Mysidia defaults. It'll recognize any table or input and automatically add a class to it. At that point, you won't even have to look up Bootstrap's classes even on custom pages (at least not for things like tables, inputs, and buttons). Obviously there's still a lot more cool stuff Bootstrap has to offer.

People should definitely build themes on TOP of this, and then distribute them here, if they like. I want this to be partner to any theme builder who wants Bootstrap as part of their theme. By itself, Bootstrap will make any site look at least 30% cooler, but there's a lot of room to expand on that. I don't want to impose any features someone may not want to use. It's very easy to overwrite Mysidia's core code with jQuery, perhaps even too much. I don't want to overstep and assume what features people want, so eventually progress will halt on my Bootstrap theme, and I'll start a specialized version.

And while I'm working on the specialized version, I should be able to create mods specifically meant for a Bootstrap theme. So if someone wants, say, a 150px image underneath their navbar (won't scroll with it, of course), I'd be to go "here just add in this code right over there" and then, voila, people can pick and choose.

[bolivianbluetail424]

Wow Amazing.

Thanks

[Storyteller]

This is amazing, I am loving it! Thank you so very very much!!

I am having a little trouble with my custom theme made on StyleBootstrap.info, though.... I'm wondering if I messed up somewhere. It shows the link in the theme changer, but when I click my custom theme, all the styling goes poof.

Here is my edited themeswitcher kyt:

/* =============== Need help with this? *
You can contact me (Kyttias) on AIM, GoogleTalk, Skype, Tumblr,
DeviantART or @gmail.com. I prefer chatting over AIM, and email
is your best bet if I've not been recently active on Tumblr or
DeviantART. I can use GoogleTalk or Skype if it is of preference
to you. */



/* =============== Theme Changer */
/* Add theme drop down to top navigation. */
$(".navbar-nav").append("<li class="dropdown" id="theme-dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="icon-cogs icon-large"><\/i> Theme<\/a> <ul class="dropdown-menu"> <li><a href="#" class="change-style-menu-item" rel="wubbie"><i class="icon-fixed-width icon-pencil"><\/i> Wubbie Forest &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="amelia"><i class="icon-fixed-width icon-pencil"><\/i> Amelia &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="cerulean"><i class="icon-fixed-width icon-pencil"><\/i> Cerulean &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="cosmo"><i class="icon-fixed-width icon-pencil"><\/i> Cosmo &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="cyborg"><i class="icon-fixed-width icon-pencil"><\/i> Cyborg &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="flatly"><i class="icon-fixed-width icon-pencil"><\/i> Flatly &nbsp; &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="journal"><i class="icon-fixed-width icon-pencil"><\/i> Journal<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="readable"><i class="icon-fixed-width icon-pencil"><\/i> Readable<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="simplex"><i class="icon-fixed-width icon-pencil"><\/i> Simplex &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="slate"><i class="icon-fixed-width icon-pencil"><\/i> Slate &nbsp; &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="spacelab"><i class="icon-fixed-width icon-pencil"><\/i> Spacelab<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="united"><i class="icon-fixed-width icon-pencil"><\/i> United &nbsp; &nbsp; &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-item" rel="yeti"><i class="icon-fixed-width icon-pencil"><\/i> Yeti &nbsp;<\/a><\/li> <li><a href="#" class="change-style-menu-back"><i class="icon-fixed-width icon-pencil"><\/i> Blank (Default) &nbsp;<\/a><\/li> <\/ul><\/li>");

/* Change the theme by clicking on it. */
$('body').on('click', '.change-style-menu-item', function() { /*standard themes*/
var theme_name = $(this).attr('rel') + "/";
var theme = "//netdna.bootstrapcdn.com/bootswatch/3.0.3/" + theme_name + "bootstrap.min.css";
set_theme(theme);
});
$('body').on('click', '.change-style-menu-back', function() { /*blank theme*/
var theme = "//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css";
set_theme(theme);
});

/* ADD CUSTOM THEME: UNCOMMENT TO USE */
/*Make a custom theme at StyleBootstrap.info!
You'll need to find the list of themes above, copy one, and it must be pasted inline with the rest.
Give it a custom class, and then change that class below!
Then all you have to do is provide a direct path to your custom css file. */

$('body').on('click', '.wubbie', function() {
var theme = "http://wubbiepets.com/templates/Bootstrap/wubbie.css";
set_theme(theme);
});


/* Does their browser support saving the theme to local storage? */
function supports_html5_storage() {
try { return 'localStorage' in window && window['localStorage'] !== null; }
catch (e) { return false; }
}
var supports_storage = supports_html5_storage();

/* Remember user theme! */
function set_theme(theme) {
$('link[title="bootstrap"]').attr('href', theme);
if (supports_storage) { localStorage.theme = theme; }
}

/* On load, grab user's preferred theme from local storage. */
if (supports_storage) {
var theme = localStorage.theme;
if (theme) { set_theme(theme); }
}
else { /* Don't annoy user with options that don't persist. */
$('#theme-dropdown').hide();
}
/* End Theme Changer =============== */

And this is my header:

<!-- / / / / / / / / / / Need help with this template?
You can contact me (Kyttias) on AIM, GoogleTalk, Skype, Tumblr,
DeviantART or @gmail.com. I prefer chatting over AIM, and email
is your best bet if I've not been recently active on Tumblr or
DeviantART. I can use GoogleTalk or Skype if it is of preference
to you. -->

<!DOCTYPE html>
<html lang="en"><head>
<script src="{$home}{$temp}{$theme}/flickerfix-kyt.js""></script>
<title>{$browser_title}</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- / / / / / / / / / FULL CSS RESET -->
<link href="//cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet">
<!-- / / / / / / / / / BOOTSTRAP 3 -->
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" title="bootstrap">
<!--
If you picked out a theme from BootSwatch, find it on BootstrapCDN.com and replace the link above.
If using themeswitcher.js, make sure the line above always includes title="bootstrap" as an attribute!
If you make a custom Bootstrap theme at StyleBootstrap.info, observe the lines below as a hint on how to include it.
Replace the href above if you prefer to use a custom theme with the theme changer, or, delete the line above,
and include in the same manner as the stylesheet is below. {$home}{$temp}{$theme} is this template folder!
-->
{$header->loadFavicon("{$home}favicon.ico")}
{$header->loadStyle("{$home}{$temp}{$theme}/style-kyt.css")}
{$header->loadAdditionalStyle("{$home}{$temp}{$theme}/wubbie.css")}
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>

Those are the only two files I edited... it's pretty late and my brain is mush so I'm probably missing something ^^;;

Also, I've noticed that with the built-in styles, it always loads the page without the style for a split second before loading the style. Is there any way to fix that?