Skip to content

Instantly share code, notes, and snippets.

@zbee

zbee/bootswatchList-postJS.html

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.
Download ZIP
Use the bootswatch API to shift through and list all of their themes (With thumbnail and name
Raw
bootswatchList-postJS.html
<!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>
Raw
bootswatchList-preJS.html
<!DOCTYPE html>
<html>
<body>
<div id="select"></div>
</body>
</html>
Raw
bootswatchList.js
$.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