Gallery of free HTML snippets for Twitter Bootstrap | Hacker News Reader

Gallery of free HTML snippets for Twitter Bootstrap

bootsnipp.com

348 pointsmadh67 comments

Bootsnipp 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.

Great site! Other good bootstrap related stuff:

http://wrapbootstrap.com / http://bootswatch.com - for themes, http://bootstrap-forms.heroku.com for quick form building

and one more - only two themes on it though http://themepiggy.com

The 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.

And shameless plug for my own interface builder for bootstrap: http://jetstrap.com/

This is awesome! Would be nice to export things from jetstrap to Bootsnipp =)

Thanks, maybe it would be cool to go the other way as well!

shoot me a message, let's work something out together! go to http://maxoffsky.com/contact-me

yeah having both work together would be awesome

> ... my own interface builder ... Nice, but you have a "Try it now" button on the first page, that suggests (at least to me) that I can try it right away. When click-ing however, on get's a "Login with..." page.

Would be much better if users could try it without login, and only if they really like it and want to save their work than would be a login required, or when they start to use it professionally.

I think for demo/show purposes, lowering the "entry" is always better, as it will get more people to really try it.

Yes, exactly this. I clicked the try now and immediately left the page. I still don't know what the site does, there wasn't any *features page or anything to make me curious enough to try this out.

Noted. This is an alpha and we are just about to clean it up.

also left that site because it wants you to login before i can see what it does...

Great 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.

I'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.

Nice 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/

Thanks for the idea! I'll look into patterntap and see what I could incorporate

Why 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.

Halfway 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.

I love you.

If 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."

While 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...

Good 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?

Do 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.

Great 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.

Agreed - 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).

Here is another similar project though its Sublime text editor targeted.

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.

That gives me an idea... What are three most popular text editors out there?

vim, vim, and vim

From what I've seen around: Dreamweaver, Visual Studio/Expression Studio and Eclipse.

who can help me build a live converter for the snippets? reach me at @msurguy on twitter.

Those are IDEs. The most popular text editors (at least on HN) are Sublime Text 2, Textmate, vim, and emacs.

vim, emacs, textmate?

I 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

+1. I'm developing my live html/css/js code editor (http://liveditor.com) and I always interested in providing direct support for Twitter Bootstrap.

Bootstrap is great but I'm worried that it's style is getting overused and tired like a pop song on FM radio.

Agreed 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.

Very 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.

Submissions were opened today! Check it out and submit your snippets here : http://bootsnipp.com/submit

This makes me want to cry. What happened to design and having a good-looking and creative interface?

You should do a makeover of the shipping interface on the UPS website and blog about it.

good lord i had never seen that before. i assume this comment is in some way sarcastic, but wow

If we ever reach a point where bootstrap is the low end of web design, I'll be dancing a little jig.

bootstrap is a starting point and not the finish line.

I 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.

The 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.

Bootstrap isn't here to replace high-end designers. It's here to replace the myspace and geocities school of design...

Really useful site, especially for those developers like myself that are "design challenged" :)

I 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?

Thanks ! what do you mean normalize the height, like make it adapt to the height of the screenshot? Like pinterest or something?

I 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.

Neat! Please add Haml as an output format for your HTML snippets.

Why? You can always use html2haml.

The site is perfect as it is, there's no need to add a unnecessary and non-standard format.

Why 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.

I'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.

It'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.

That's a good point you make.

I like the progress bar example... its fun is a real eye catcher

This is good. Can you add some voting thingie. There is a lot of trivial stuff, easily available on the bootstrap documentation itself.

That is in progress. The voting will be added next week.

suggestion: it would be nice if people could request examples, and others could submit code snippets

Thanks for that! I would put this on the list of suggestions =)

Not bad.

Never thought of doing the buttons on page 2 with an icon on top and a text underneath.

Really nice, and some great snips already added. Would love to see additional login snippets.

This is great, but why am I not able to add snippets?

"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

Great site, thank you!

Reply on news.ycombinator.com