

Gallery of free HTML snippets for Twitter Bootstrap - madh
http://bootsnipp.com/

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

------
superasn
Great site! Other good bootstrap related stuff:

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

~~~
yesimahuman
And shameless plug for my own interface builder for bootstrap:
<http://jetstrap.com/>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[https://github.com/devtellect/sublime-twitter-bootstrap-
snip...](https://github.com/devtellect/sublime-twitter-bootstrap-snippets/)

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
That gives me an idea... What are three most popular text editors out there?

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

~~~
inkel
That's a good point you make.

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

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

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

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

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

------
conradfr
Not bad.

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

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

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

~~~
stevejalim
"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>

------
BaconJuice
Great site, thank you!

