block by roachhd 0821324fb499eac293c7

Bootstrap + Bootswatch = 💓 a Bootswatch API test.

Full Screen

Bootswatch API test

######Bootstrap is awesome! But for stylin’ awesomeness in seconds Just add Bootswatch! Play with the API demo in this Gist here

☕ & ❤

PS. You can preview any gist with an ’index.html’ file by changing the URL.

https://gist.github.com/roachhd/0821324fb499eac293c7
https://bl.ocks.ork/roachhd/0821324fb499eac293c7

gist.github.com is changed to  bl.ocks.org

bye

script.js

$.get("http://api.bootswatch.com/3/", function (data) {
  var themes = data.themes;
  var select = $("select");
  select.show();
  $(".alert").toggleClass("alert-info alert-success");
  $(".alert h4").text("Success!");
  
  themes.forEach(function(value, index){
    select.append($("<option />")
          .val(index)
          .text(value.name));
  });
  
  select.change(function(){
    var theme = themes[$(this).val()];
    $("link").attr("href", theme.css);
    $("h1").text(theme.name);
  }).change();
 
}, "json").fail(function(){
    $(".alert").toggleClass("alert-info alert-danger");
    $(".alert h4").text("Failure!");
});

index.html

<html>
<head>
  <meta charset="utf-8">
  <title>Bootswatch API Demo</title>
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
  <script src="//code.jquery.com/jquery-2.1.0.min.js"></script>
  <style rel="stylesheet" href="style.css">
  <script src="script.js</script>
</head>
<body>
  <h1>Bootstrap</h1>
  <div class="alert alert-info">
    <h4>Alert!</h4>
    <p>This is a demo of the Bootswatch API.</p>
  </div>
  <select></select>
</body>
</html>

style.css

body {
  padding: 2em;
  text-align: center;
}
 
h1 {
  margin-bottom: 1em;
}
 
select {
  display: none;
  position: absolute;
  top: 10px;
  left: 10px;
}