Skip to content

Instantly share code, notes, and snippets.

@zbee
Last active August 29, 2015 14:02
Show Gist options
  • Save zbee/4966c0e18914b8228bd9 to your computer and use it in GitHub Desktop.
Save zbee/4966c0e18914b8228bd9 to your computer and use it in GitHub Desktop.
Use the bootswatch API to shift through and list all of their themes (With thumbnail and name
<!DOCTYPE html>
<html>
<body>
<div id="select">
<div class="Cerulean"><img src="http://bootswatch.com/cerulean/thumbnail.png" width="250px"><br>Cerulean<hr></div>
<div class="Cosmo"><img src="http://bootswatch.com/cosmo/thumbnail.png" width="250px"><br>Cosmo<hr></div>
<div class="Cyborg"><img src="http://bootswatch.com/cyborg/thumbnail.png" width="250px"><br>Cyborg<hr></div>
<div class="Darkly"><img src="http://bootswatch.com/darkly/thumbnail.png" width="250px"><br>Darkly<hr></div>
<div class="Flatly"><img src="http://bootswatch.com/flatly/thumbnail.png" width="250px"><br>Flatly<hr></div>
<div class="Journal"><img src="http://bootswatch.com/journal/thumbnail.png" width="250px"><br>Journal<hr></div>
<div class="Lumen"><img src="http://bootswatch.com/lumen/thumbnail.png" width="250px"><br>Lumen<hr></div>
<div class="Paper"><img src="http://bootswatch.com/paper/thumbnail.png" width="250px"><br>Paper<hr></div>
<div class="Readable"><img src="http://bootswatch.com/readable/thumbnail.png" width="250px"><br>Readable<hr></div>
<div class="Sandstone"><img src="http://bootswatch.com/sandstone/thumbnail.png" width="250px"><br>Sandstone<hr></div>
<div class="Simplex"><img src="http://bootswatch.com/simplex/thumbnail.png" width="250px"><br>Simplex<hr></div>
<div class="Slate"><img src="http://bootswatch.com/slate/thumbnail.png" width="250px"><br>Slate<hr></div>
<div class="Spacelab"><img src="http://bootswatch.com/spacelab/thumbnail.png" width="250px"><br>Spacelab<hr></div>
<div class="Superhero"><img src="http://bootswatch.com/superhero/thumbnail.png" width="250px"><br>Superhero<hr></div>
<div class="United"><img src="http://bootswatch.com/united/thumbnail.png" width="250px"><br>United<hr></div>
<div class="Yeti"><img src="http://bootswatch.com/yeti/thumbnail.png" width="250px"><br>Yeti<hr></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<div id="select"></div>
</body>
</html>
$.get("http://api.bootswatch.com/3/", function (data) {
var themes = data.themes;
themes.forEach(function(value, index){
$("#select").append($("<div class='"+value.name+"'></div>").html("<img src='"+value.thumbnail+"' width='250px'><br>"+value.name+"<hr>"));
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment