Gallery of free HTML snippets for Twitter Bootstrap

http://bootsnipp.com/

by madh • 14 years ago

348 67 14 years ago

bootsnipp.com

aaronbrethorst• 14 years ago

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

inkel3• 14 years ago

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.

lowboy5• 14 years ago

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.

nodesocket• 14 years ago

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

ukoki• 14 years ago

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.

conradfr• 14 years ago

Not bad.

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

bitdiffusion• 14 years ago

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

cduser• 14 years ago

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

stevejalim• 14 years 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

nicholassmith• 14 years ago

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?

msurguy13• 14 years ago

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.

chrisfarms• 14 years ago

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/

msurguy13• 14 years ago

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

superasn• 14 years ago

Great site! Other good bootstrap related stuff:

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

countessa• 14 years ago

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

ktsmith• 14 years ago

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.

yesimahuman3• 14 years ago

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

msurguy13• 14 years ago

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

xulescu• 14 years ago

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

rodolphoarruda• 14 years ago

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

philjones88• 14 years ago

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

jenius2• 14 years ago

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

euroclydon• 14 years ago

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

jenius2• 14 years ago

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

mhd• 14 years ago

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

outside1234• 14 years ago

bootstrap is a starting point and not the finish line.

jonheller• 14 years ago

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.

lowboy5• 14 years ago

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.

Shish2k• 14 years ago

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

drstk• 14 years ago

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?

msurguy13• 14 years ago

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

lie28152• 14 years ago

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.

ryangallen• 14 years ago

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

wilfra• 14 years ago

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.

billirvine3• 14 years ago

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.

msurguy13• 14 years ago

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.

baseh• 14 years ago

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.

msurguy13• 14 years ago

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

lowboy5• 14 years ago

vim, vim, and vim

diego_moita• 14 years ago

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

marcamillion• 14 years ago

vim, emacs, textmate?

bertzzie• 14 years ago

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

billirvine3• 14 years ago

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.

lowboy5• 14 years ago

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.

msurguy13• 14 years ago

I love you.

billirvine3• 14 years ago

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

lie28152• 14 years ago

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

draz• 14 years ago

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

msurguy13• 14 years ago

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

efields• 14 years ago

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.

msurguy13• 14 years ago

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.

jarsj• 14 years ago

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

msurguy13• 14 years ago

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

BaconJuice• 14 years ago

Great site, thank you!

msurguy13• 14 years ago

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

Gallery of free HTML snippets for Twitter Bootstrap

Related Stories