34 ms·
Gallery of free HTML snippets for Twitter Bootstrap
- aaronbrethorst 14y agoNeat! Please add Haml as an output format for your HTML snippets.
- inkel 14y agoWhy? You can always use html2haml. The site is perfect as it is, there's no need to add a unnecessary and non-standard format.
- lowboy 14y agoWhy not add it? It's not a standard as in browsers won't use it, but haml is probably one of the most widely-used html templating systems.
- inkel 14y agoI'm not bashing against Haml, all that I'm saying is that is not necessary. Lately Slim also has become quite popular, so that would involve also having the Slim version. And in the future it will be something different, but as long as HTML remains as the lingua franca of the web, then there's no really need. I used Haml in the past, and I understand it's popular nowadays mostly because of Rails, but I hardly think it's widely-used. Just to name a few that use HTML or a template engine of their own: Blogspot, Tumblr and Wordpress, and these are much more widely-used than Haml.
- lowboy 14y agoIt's not necessary to have the markup in a textarea on the demo page either when someone could just view the source and copy+paste it from there. But it's not about what's necessary, it's about what will be of utility to people. Consider the audience of Bootstrap when you talk about usage numbers. I'd wager the number of people using Bootstrap + haml (either through Rails or standalone) in their apps outnumbers the ones using Bootstrap + Wordpress/Blogspot/Tumblr.
- inkel 14y agoThat's a good point you make.
- nodesocket 14y agoReally nice, and some great snips already added. Would love to see additional login snippets.
- ukoki 14y agoGreat work! As someone who relies waaaay too much on Twitter Bootstrap this is really useful - now to get round to adding my own Bootstrap idioms.
- conradfr 14y agoNot bad. Never thought of doing the buttons on page 2 with an icon on top and a text underneath.
- bitdiffusion 14y agoAgreed - this is fantastic. Although the getbootstrap docs have some neat things in there - it's sometimes hard to differentiate what comes built-in vs. what has been customized for the docs (and to extract the doc-specific functionality can be tricky).
- cduser 14y agoThis is great, but why am I not able to add snippets?
- stevejalim 14y ago"Currently snippets are created only by the website owner but in the near future the functionality of this site will be expanded and other developers will be able to create their snippets as well, though the site will remain curated." http://bootsnipp.com/about http://bootsnipp.com/about
- nicholassmith 14y agoGood idea and some really useful stuff in there. As there's no licensing notes I'm guessing they're under permissive, share and share alike with credit?
- msurguy 14y agoDo whatever you want with them, copy and paste into your projects... I need to add licensing (or the absence of them) on the site, will do today.
- chrisfarms 14y agoNice idea... would love to see it work a bit more like patterntap[1] where we could add our own snippets. Allowing CSS/LESS (with a guideline to only use the built-in color variables) could be really cool too – I'll often have to add one or two lines of CSS to tweak a nice component. [1] http://patterntap.com/ http://patterntap.com/
- msurguy 14y agoThanks for the idea! I'll look into patterntap and see what I could incorporate
- superasn 14y agoGreat site! Other good bootstrap related stuff: http://wrapbootstrap.com http://wrapbootstrap.com / http://bootswatch.com http://bootswatch.com - for themes, http://bootstrap-forms.heroku.com http://bootstrap-forms.heroku.com for quick form building
- countessa 14y agoand one more - only two themes on it though http://themepiggy.com http://themepiggy.com
- ktsmith 14y agoThe downside to using anything from places like wrapbootstrap are that the majority of what's available doesn't use LESS. It significantly reduces the value of these themes/snippets to me.
- yesimahuman 14y agoAnd shameless plug for my own interface builder for bootstrap: http://jetstrap.com/ http://jetstrap.com/
- msurguy 14y agoThis is awesome! Would be nice to export things from jetstrap to Bootsnipp =)
- yesimahuman 14y agoThanks, maybe it would be cool to go the other way as well!
- msurguy 14y agoshoot me a message, let's work something out together! go to http://maxoffsky.com/contact-me http://maxoffsky.com/contact-me
- gdi 14y ago
- deleted 14y ago[deleted]
- rodolphoarruda 14y agoI like the progress bar example... its fun is a real eye catcher
- philjones88 14y agoReally useful site, especially for those developers like myself that are "design challenged" :)
- jenius 14y agoThis makes me want to cry. What happened to design and having a good-looking and creative interface?
- euroclydon 14y agoYou should do a makeover of the shipping interface on the UPS website and blog about it.
- jenius 14y agogood lord i had never seen that before. i assume this comment is in some way sarcastic, but wow
- mhd 14y agoIf we ever reach a point where bootstrap is the low end of web design, I'll be dancing a little jig.
- outside1234 14y agobootstrap is a starting point and not the finish line.
- jonheller 14y agoI think Bootstrap is wonderful to allow you to start hacking away on an app and have it look halfway decent through that process. But I agree that once it moves on to a beta stage more focus should be placed on a unique / better design.
- lowboy 14y agoThe only time you should use a "creative" interface is when absolutely no other standard interface pattern is available. Otherwise you're throwing away a great deal of learned behaviour in your users and forcing them to consciously hunt for what they want instead of relying on common patterns.
- Shish2k 14y agoBootstrap isn't here to replace high-end designers. It's here to replace the myspace and geocities school of design...
- drstk 14y agoI was JUST looking for something like this yesterday. Could become very useful if you keep at it, I'll definitely be checking back from time to time. One minor nitpick: perhaps normalize the height of your snippets in the main grid view?
- msurguy 14y agoThanks ! what do you mean normalize the height, like make it adapt to the height of the screenshot? Like pinterest or something?
- lie2815 14y agoI guess what he means is have the previews all have the same height instead of the same width. Currently, you basically can't discern anything on the very wide examples.
- deleted 14y ago[deleted]
- ryangallen 14y agoBootstrap is great but I'm worried that it's style is getting overused and tired like a pop song on FM radio.
- wilfra 14y agoAgreed but the only reason this exists is because people are lazy. It's not hard to make a Bootstrap site look nothing like Bootstrap. The problem is people put a site up and focus on the backend and consider the front-end solved because they use Bootstrap. That's the wrong way to look at it. People need to realize it's beginning to look like they are just using the default WP or Tumblr template when they do that. If you wouldn't do that for your personal blog, why would you do it for your companies website? Take a bit of time and style it at least. Change the colors, put a header image on it - something. Anything.
- billirvine 14y agoVery good advice, but I'm going to take the curmudgeon level +1. Or... take a little more time and actually learn CSS3 and media queries... then write your own style sheets. It's really not that hard and you'll end up with a style sheet where YOU KNOW every line and every class. When you get there (again, not really that hard), it's faster/better than SaSS or LESS. Seriously.
- msurguy 14y agoBootsnipp creator here... Oh my loving God, this is amazing to end up on Hacker news on the second day of the creation being online... Thanks to you guys it's so popular now. I will be working hard on making this a community instead of one author site, I do have a CMS that I build for this and it shouldn't be too hard to make this a community, it's just that I have to squeeze that in a full time and part time job, I made Bootsnipp thanks to being sick and absent from work for 2 days... I appreciate your comments, please promote the site further and I will work hard on making it more personal to each of you.
- baseh 14y agoHere is another similar project though its Sublime text editor targeted. https://github.com/devtellect/sublime-twitter-bootstrap-snippets/ https://github.com/devtellect/sublime-twitter-bootstrap-snip... I wish there was a way to auto-convert these snippets for popular text editors. Somehow copy-pasting html from web-pages sounds so... 20th century.
- msurguy 14y agoThat gives me an idea... What are three most popular text editors out there?
- lowboy 14y agovim, vim, and vim
- diego_moita 14y agoFrom what I've seen around: Dreamweaver, Visual Studio/Expression Studio and Eclipse.
- msurguy 14y agowho can help me build a live converter for the snippets? reach me at @msurguy on twitter.
- MikeKusold 14y agoThose are IDEs. The most popular text editors (at least on HN) are Sublime Text 2, Textmate, vim, and emacs.
- marcamillion 14y agovim, emacs, textmate?
- bertzzie 14y agoI think it might be better if you add REST API and let the editor's developers create a plugin based on that. It's an interesting project. Appriciate :D
- billirvine 14y agoWhy is there a movement to make every quickly-made website look like dull white/blue with a hint of beige? This is madness. "Hack away on an app and have it look halfway decent" is a very, very poor attitude that portrays laziness and a disdain for the user. Halfway decent is the same as halfway sucks.
- lowboy 14y agoHalfway decent is better than completely unstyled mess of Times New Roman because the dev doesn't give a shit about design. Bootstrap can be considered the start of a website (hence the name) and you can style Bootstrap to not look like Bootstrap very quickly. As long as these snippets respect global styles like font, colors, etc. then this is a good resource.
- msurguy 14y agoI love you.
- billirvine 14y agoIf the "dev" doesn't give a shit about design, the dev shouldn't be touching the design! I've seen far too many "sites" that are not a start, but a finish, wrapped in the homogenized turquoise blandness that is bootstrap. Sure it's possible to wrangle the CSS into something that might look better, but by then the "site" is already pigeonholed into functionality and structure defined by someone who "doesn't give a shit about design."
- lie2815 14y agoWhile I mostly agree to you, I'd say that it kind of makes sense to have the site look very much like standard Bootstrap in this case...
- draz 14y agosuggestion: it would be nice if people could request examples, and others could submit code snippets
- msurguy 14y agoThanks for that! I would put this on the list of suggestions =)
- efields 14y agoGreat work. I'd love to see these as TextExpander snippets. I might go ahead and do this this weekend… EDIT: A thought I forgot: I used to be a Bootstrap hater, but now I'm quite enamored with the project since a good SASS port has been maintained. Bootstrap's biggest accomplishment (aside from its mere existence) is that it placed in the hands of a lot of different people — devs, designers, newbies, etc — a collection of modular css patterns and clean, semantic markup examples, like the ones you see on this link. "But your markup shouldn't be littered with presentation classes!!!" — Bullshit. Your markup definitely shouldn't look like the mess of classes you find in Drupal output, but <div class="navbar">…<ul class="nav"> are a sane way to markup page elements. These classes say what the elements are, and could be styled an infinite number of ways depending on what kind of device its displayed on. Likewise, Bootstrap's CSS is an excellent way to learn modular CSS patterns. ".dropdown {}, .dropdown-menu {}" is a much better approach than something like ".dropdown ul". What if that UL changes? "UL is a lousy element here!" says a future dev on the team. I'll agree that .pull-left and .span-9 are terrible, but not everything's perfect. It'd have to use SASS instead of LESS before it was perfect, anyway ducks.
- msurguy 14y agoI'd love to have textexpander snippet live converter(instead of copy paste for them). I've never used TextExpander. can you get in touch with me ? @msurguy on twitter.
- jarsj 14y agoThis is good. Can you add some voting thingie. There is a lot of trivial stuff, easily available on the bootstrap documentation itself.
- msurguy 14y agoThat is in progress. The voting will be added next week.
- BaconJuice 14y agoGreat site, thank you!
- msurguy 14y agoSubmissions were opened today! Check it out and submit your snippets here : http://bootsnipp.com/submit http://bootsnipp.com/submit
- mek 14y agoreally awesome stuff, thanks!