Show HN: Themes for Bootstrap | Hacker News Reader

Show HN: Themes for Bootstrap

wrapbootstrap.com

354 pointscoderdude93 comments

I like the idea, and I hope it does well. But what I would pay money for is a series of lessons on how to customize bootstrap. The whole reason I'm using bootstrap for my site redesign is because:

  - I can't find off the shelf themes that meet my needs.
  - I want to learn how to do it myself.
  - I want a solid foundation to start with.

A codecademy for CSS "cooking" with bootstrap would be great. A quick mover with good design skills could probably make a decent amount of money in a short period if they sold tutorials with focused content. [I'm just throwing this out there in case someone wants to bite.]

Maybe shoot Codecademy a message mentioning this to them. :)

I make you deal if you can ship some pizzas to an US address say via fedex I may able to teach you..

see my gh-pages sites:

http://shareme.github.com

Thanks for the offer. :)

FYI - Your carousel isn't centered, the follow shareme button is clipped, and the Android, Hello article has an extra </div> in the <section id="getsdk">, causing the remainder of the page to be left aligned. I like sausage, mushroom, and olive on my pizza. Did you want my address? <jk ;)>

Indeed, looks like shareme has more to learn from you about web design than you from him :-)

Nah. The world is full of people who can point out problems. Knowing how to fix them is where the value is. I claim no expertise in that regard.

typo: "Fragmentatin Proofed"

I'm working on a series of CSS/design screencast tutorials that sounds like it suits your needs exactly. The series is aimed at developers. The series will guide the viewer through designing the most common pages like landing pages, contact forms etc. focusing more on design choices and principles rather than on CSS technicalities.

I wasn't planning on using bootstrap though because I think bootstrap offers too many possibilities to developers who don't understand design. I think keeping things simple and limited is the best approach.

Do you think not using bootstrap would be an issue?

I think introducing and leveraging bootstrap would definitely help the popularity of your lessons.

Shameless plug: Our company is currently reworking our UI Application Framework to use Bootstrap 2.0 and we're going to document the process in a series of video lessons. Sign up here: http://appframework.bigbangtechnology.com/

focusing more on design choices and principles rather than on CSS technicalities

I'd suggest using it specifically for this reason - that is, unless there is another framework that does an equally good job of getting out of one's way as Bootstrap. That said, it definitely makes sense to try to limit its use to a small subset for your tutorials.

Ok, well my series is focused on teaching developers how to create their own simple frameworks to suit specifics needs. It will also explain fundamental design principles using popular sites as examples of why their design works.

Anyway, I'm halway through making my series so I'm gonna launch that and if it's received well I'll probably do a bootstrap customisation series too.

Slightly controversial question, but how much would you be willing to pay for a series like this? I think I paid €80 for Michael Hartl's rails tutorial series and I was satisfied with that price.

There are different market segments in in the web design world. there are those that want to learn how to design something from scratch, and then there are those who want to learn enough to build upon the work of others (bootstrap, jQuery UI, etc.). I fall into the latter category, so I can't give any recommendation on the course structure or cost.

That said, there is a lot of buzz around bootstrap v2 now, so you might consider doing it the other way around - pick a few bootstrap customizations as a teaser class to help built market momentum for the full classes.

Yeah I'm kinda trying to cover both bases, offering enough to guide someone through the full design process from scratch, but breaking it up into segments so someone like yourself can skim through it.

Interesting idea, I may end up doing that.

Anyway, I'll probably giveaway a bunch of free subscriptions to help get it off the ground. I don't have time right now to build a launch page and get hosting, so if anyone's interested, shoot me your name and email address at colmtuite@gmail.com and I might get in touch when I launch.

Thanks for the feedback guys.

Regardless of what price you end up deciding on, please provide people with a way of leaving their email address with you.

I am interested in your video series and may buy them, but right now:

- I have no way of finding out when you're done, except for polling you, which ups the burden on me

- I am likely to forget about you

- I am likely to miss your announcement that you're opening up shop

A simple "leave your email here if you want to be kept up to date" form would be awesome !

Ok so took your advice and threw a launch page up. You can leave your email and I'll notify you when I'm ready to launch.

http://www.designskool.com

You need a video series on how to customize bootstrap? It's just CSS + HTML5. Use the force -- read the source!

Same opinion here. I too need some lessons to customize as themes again need customization. Free themes with basic things like signup/Login users(customizable) and image uploads etc would be beneficial for even novice to kickstart his webapp. More advanced designs and features can be chargeable.

You should not start with bootstrap in that case. I think especially in the beginning when you are learning CSS you should build something from scratch. Otherwise you have to learn both, CSS and how bootstrap is constructed.

CSS is not hard. I don't consider myself good at css, not at all, but give me a mockup and I can reproduce it, with a lot of Googling and trail-and-error. At least for me, though, what is really difficult is to make something from scratch without a mockup. It might be because I am not much of a visual thinker. I am a coder after all, not a designer. A professional designer might already have this mockup in her head. I don't.

So what I need to do is create the mockup in Photoshop first. There I can experiment, move stuff around, change colors, shadows, etc. When I am done, I reproduce it in css. I guess when you are either a very strong visual thinker or you are already very good at css, you don't need Photoshop. Otherwise I recommend you start with a mockup and then make a pixel-by-pixel reproduction of it. That way you can solely focus on the How, not the What. If you do that it's not hard at all, and you don't need a code academy for it. [That said I like the idea of a code academy for building a website from scratch for non-coders]

I will vehemently disagree with you on this, CSS is very, very hard.

And you even admit it yourself without realising it!

Trial-and-error is no way to code something. Programming novices use trial-and-error. But saying CSS is easy when you're still trial-and-erroring stuff just shows how incredibly hard it is. It's admitting you don't know what you're doing. And that's CSS all over. Few people can use CSS to do exactly what they want and know what they're doing.

Everyone else just finds something that kind of works and do the same thing over and over.

It's only recently been the case that you can view the source of websites posted here on HN that aren't a mass of nested divs just to get the layout right.

CSS is not "very, very hard" - I learned Rails after HTML css, and its simple as pie. I wouldn't classify myself as super smart. I just think the structure is such that is straight forward, <div class="something"> to .something {}

If you can code, then you should really be able to write CSS... and if you can't code, I don't think any of these products are really targeted at you anyway.

Edit: tpyo

I learned a lot by messing with the Skeleton Framework. I decided I wanted to alter every CSS element and in doing so learned a lot about structure, relationship and even naming.

It would be good to be clearer about licenses. It just says "Single Site" right now but it would be good to have a page that clarifies exactly what you mean just in case my idea of what that means differs from yours.

Will exclusive and multi-site license options follow?

Also, on your /sell page there's a heading that says sellers earn between 55 and 75% but in the text of that block it says the non-exclusive share is 35%.

Anyway, as I said below this is awesome and I wish you the best of luck.

I've moved this up in the queue. Right now the seller can choose whether an item is sold with a single or multi-application license, but in the near future I would like to change that to an option that can be chosen at buy-time.

As for the earnings text on the sell page, I'm working on cleaning up the wording there so that it better conveys what I mean.

And thank you!

Edit: Updated the earnings text

This is great. I would love a nicer home page for http://www.sharelatex.com. I looked at ones on theme forest but didn't want one framework for my homepage and one for everything else. Will defiantly look at what comes up there.

On stealing the css: your market are people who know the effort it takes to build something and are probably likely to pay $15-$50 for a big time saver.

I hope to get some more sellers on board soon so there's more to offer. I'm glad most everyone seems to feel the same way about stealing the live previews. There is honor out there.

I've not looked properly but future suport is quite important. I have been upgrading to bootstrap 2.0 and there are a lot of breaking changes, having future versions available would be something I would want to see, even if it requires and upgrade fee.

Upgrading from 1.4.0 to 2.0.0 was kind of a pain. I definitely am on the same page as you. Sellers attach a version number (of their own invention) to the items they upload. When a seller comes up with an update to their item they would upload it and update the version. At which point anyway who has purchased it in the past would be able to upgrade for free. (I don't like the idea of buying a theme and then paying to get the latest changes.)

I just wrote a blog post on "theming" bootstrap by overriding CSS (as opposed to using Less, since I use SaSS). Might be useful for people interested in customizing their Bootstrap: http://blog.pamelafox.org/2012/02/theming-twitter-bootstrap-...

Just wanted to give you a head up. On the /sell page it says earn 55% - 75% on each sale but then in the paragraph it says you earn 35% if you sell it non-exclusively.

Edit: Sorry to be annoying but the sign-in link has a padlock icon next to it which usually indicates a secure connection/SSL neither of which you are using.

Great concept btw.

Thanks for bringing that up, I'll get that wording fixed right away.

Regarding the padlock icon: That was an item on my todo list that I moved to "not critical for launch." And then someone mentioned it. :)

So, this is great and all, but:

How are you going to prevent people from stealing the themes instead of buying them? One can grab the full HTML and CSS from the preview views.

If your market is professionals I'm sure they'll typically be mature enough and make an honest purchase, I mean look at themeforest they make no effort to hide their themes source codes but thats probably because people that are willing to steal are never going to purchase the theme anyway, so its a negligible trying to prevent it.

Great idea btw.

Thanks, but actually I got the idea from jamesjyu's comment here: https://news.ycombinator.com/item?id=3438802

It sounded like a good idea so I decided to execute on it. :)

+1 for honesty

I don't prevent people from stealing the themes. It's a necessary risk. Without a live preview you'd never want to buy a theme and live previews are basically standard at this point (see themeforest.net). If someone saves a theme from the live preview and if it's discovered then the course of action would be a legal one.

You could use obfuscated minified source for the previews and sell the original readable CSS and HTML. Everybody needs to customize their theme.

That would be a fantastic way to go about it actually. Thanks for putting it in my head!

If it becomes a problem for you and you think there are people who would steal them without that but pay you with then go for it. But it will make it harder to evaluate themes for people who do actually want to buy them.

This is an awesome idea by the way. I love the choice on Theme Forest but I the flexibility of Bootstrap is brilliant too. I'm also using Bootstrap whenever I prototype anything and being able to just buy and use a theme later on would be incredibly useful (obviously it's not quite that simple, but it could be close). I will almost certainly be buying lots of themes from you assuming you get designs (which I'm sure you will!).

I'm surprised ThemeForest don't have a Bootstrap section yet actually...

True, any obfuscation would make it impossible to judge the quality of the source. Good point.

I'm surprised that ThemeForest hasn't jumped on this yet either.

You could perhaps partially obfuscate the code. But it'd probably be tricky to ensure that at least some interesting parts remain untouched. Perhaps let the template author markup those areas?

If it were to be done that might be the only way to do it. The author is going to have a better idea of what they feel is the meat and potatoes than I would.

Meh. I'd say don't bother to obfuscate it. There's a real cost, and no obvious benefit (anyone making a real site would be stupid to steal their theme; anyone interested in stealing would just steal from a theme purchaser's site instead of you if you obfuscated).

From a dev's POV - I won't believe you on the elegance & quality of the source unless I can see it, and that's very much what I'd be interested in paying for (an elegant/clean/flexible UI base). Obfuscating at all is somewhat like selling a fabulous custom car but hauling a dirty tarp over it before letting the prospective buyer get a closer look.

Besides, it's HTML & CSS. De-obfuscating (unless it's seriously mangled, which seems dangerous) is as easy as copying the DOM and composed CSS from Firebug, I imagine, or cut/pasting the files into a good editor and auto-formatting.

Or something; I can't say I've ever de-obfuscated a webpage before; when I check the source, if it's crap I don't keep reading. Which may be part of the point, here.

Generate a PNG from the css/less source to prove its cleanliness, just without allowing anyone to use it for anything. :)

Anything that reads the DOM/CSS will be able to make it human readable again. Especially Firebug and Chrome's Inspector. You could even leave the source minified and add your custom CSS cascades at the bottom of the source that you take from Firebug.

Seems like something that just punishes people who'd buy it in the first place like most anti-piracy schemes.

I was unaware that themeforest didn't cover their themes markup either, then my point is obviously proven wrong, congrats on a great idea.

People who don't care enough about being caught committing copyright theft will never pay anyone, whereas those who care will usually pay.

cf https://news.ycombinator.com/item?id=3523024

I don't care about copyright theft but I pay because I $8 is peanuts for a good theme.

Love your idea and really hope you're able to be successful with it. As a developer with absolutely no design ability, bootstrap + some nice-looking themes could really improve the way I build websites - and I certainly wouldn't hesitate to shell out cash for them.

Good luck!

Very well executed, IMO. Some other people have mentioned that themeforest doesn't obfuscate and they're doing just fine, which is true, but they also have additional assets that are needed in addition to CSS. Namely, PSDs.

One way you could increase incentive to buy instead of steal is only show CSS on the preview, but download the LESS file on purchase (if the author used LESS). I'd certainly be more interested in a LESS file.

In the end, I wouldn't worry about it too much, like someone said, people who are gonna pay are gonna pay.

OT: Are you using some sort of "food ipsum" generator for the StackLayer theme? I love it.

Thank you!

Yes, the additional assets are the big gotchas (especially with themes that have text embedded in images) and I like the idea about including the LESS source. I'll get on adding that to the StackLayer theme!

By the way: Veggie Ipsum. It's awesome. http://veggieipsum.com/

Can we get some sort of live preview option to see the same site with different bootstrap themes, similar to csszengarden? Would be very helpful to see how one similar site will look with different bootstrap themes.

Thanks!

That's not a bad idea. Wouldn't work for everything though. For example, when the theme uses custom classes or components that aren't part of Bootstrap. But in general it would be a very handy way to gauge the differences between styles.

It may compel theme writers to adhere to a standard and stretch what they do to make it more apparent in your marketplace that their themes will require as little work as possible to integrate.

Thanks.

This would be awesome. I bought a theme off of themeforest the other day and they essentially wrote a mini-cms in js that would have been way to much work to tear apart and turn it into a static site.

This morning, I'm working on adding a grid framework to another theme I bought off of themeforest. That's the one thing I hate about themeforest is you can't see the "bones" of the theme before you buy. I've bought 4 or 5 themes off of theme forest with about 3/4 of them being of decent quality. With decent quality being the ease at which I can modify them for my own needs.

This is such an awesome idea. It will be interesting to see how many themes you get. I would never have thought of making a marketplace like this because it seems too niche. But I won't be surprised if you prove me wrong!

Shameless plug: I'm trying to get a new community project going, so please consider sharing this on there - http://swym.me/

What's the goal / point of swym?

I seem to have the same problem, i browsed through the site and wasn't really sure what exactly it does or is used for.

It's mostly sharing and discovering cool projects, tools and people.

I explained some more here - http://news.ycombinator.com/item?id=3579260

Basically, you know how people often ask on HN how did you make that? What stack did you use? It's the same thing, but the tags give you a fun way to find out about other projects built on the same technology. Plus, you might find other creative people you may not have found otherwise.

I love the idea. I think adding a description field to the project and tools pages would make it a lot more interesting.

Thanks! You can add a description to your project after you've created it. I wanted to keep the initial form as short as possible. I will add a description to the tool pages as well.

If there's a market for something, however small, it's always worth giving it a chance because you will always discover new things in the process, things that can often allow you to expand the business beyond what it already is!

Thanks Hrishi. I'm hoping the 'niche-ness' works out in my favor. And of course I'll share it!

great idea, and excellent timing as well tbh. The TW Bootstrap look is getting very common out there. My site is built on it and I can see the vanilla TW Bootstrap look ageing very fast.

Yes, a lot of people have started to complain that they can see Bootstrap everywhere. Here's to fixing that!

Seeing Bootstrap everywhere is actually a good thing. It makes me hope that the Web is finally maturing to the point of having a common, uniform UI patterns for its applications. If Bootstrap helps to alleviate the design & UX bonanza that many of the present day web apps still is, it will be just another stone in its awesomeness bucket.

I was hoping there'd be a free version of this - though with a paid version you'll certainly get higher-quality options ---- but I can see free versions being useful enough, where there's not too much customization.

Perhaps have a free section? It would be a good way to get free traffic which you can use to upsell to paid versions.

That's an interesting idea, and one that I think would work too. A few years ago I bought an admin template called Adminizio (http://www.adminizio.com/). At first I downloaded the free version and got a feel for it. I like it enough to buy the full version $50 and I've never regretted it.

Good thinking.

Great idea. But starting with just 1 theme will make it hard to convince potential customers and potential theme creators to use the site.

Perhaps send an e-mail to a couple of handpicked theme creators from one of the other sites to come over - maybe even convert some of the themes for free.

Yeah, it is difficult to start any marketplace. A chicken or the egg problem. I was hoping that by releasing early I could get some sellers on board. It's considerably harder to get a designer to create a work to sell on a marketplace that isn't even launched yet or validated by buyers. However, I've made a couple sales (literally, 2) and hopefully I will get more, enough to attract the sellers.

I have emailed a few handpicked designers already so I will see what the response is. :)

Offering to convert themes for free to the first few designers (and just give them money per sale) might help you get out of the chicken/egg problem.

Best of luck with it.

Thanks for the idea, I'll certainly take it into consideration. I could see that being the 'tipping point' for many sellers since they wouldn't have to do the work.

Biggest problem with Bootstrap was non-distinct visual design. All sites created with bootstrap had same loon and feel which is bad for visual distinction and mind-space.

Themes will be useful in solving that problem. Way to go.

The preview page for themes still has the Paypal link to sandbox http://wrapbootstrap.com/preview/WB00TO920

Whoops! Thanks for pointing that out -- I just fixed it.

This is a great idea and I'm sure you'll do well. The one template that's available and your site itself look very well designed.

However - wasn't the whole point of bootstrap to make it easier for developers to create their own stuff, thus avoiding the need to buy a template? If you want a templated site, just buy one from ThemeForest, because that's exactly what you're getting here except it's built around 'standardized' markup instead of the designer's own.

Thank you.

>>that's exactly what you're getting here except it's built around 'standardized' markup instead of the designer's own

That's kind of the point. :)

It's a good idea, considering the popularity of themeforest I'm not surprised to see this. But, if you want to charge 20 bucks you'll need to offer multiple pages of samples, the landing page sample doesn't really tell me what a form might look like with those theme elements, or blog post, image gallery, etc...

Good luck with it though.

That's a good point. A style guide/reference would be very useful to include in the live preview. I'll definitely be adding more to the StackLayer theme and all customers receive updates for free.

Thanks!

Excellent idea. Too bad that it's just one theme for now, but I'll take a look at it tomorrow, and might just buy it :)

Good luck!

I released early with just one theme, but I'm adding more soon and we'll see if some of the people who signed up for selling today upload some items as well. I'd like to get some competition going!

Thanks and stay tuned :)

Is this for landing pages only? I generally think landing pages are a waste of time in general, however this site seems to address my main criticism of them which is that start ups invest far too much time in making them. Good luck with it, looks like a nice well made site!

Nope, the site is for all kinds of themes (Wordpress, ecommerce, blogs, etc.) and templates (e.g., button packs). A landing page is just a theme I chose to start out with. Thanks!

This is eerie! I was planning to make complete websites with themes using Bootstrap just yesterday! :-) .. Here is what I launched about an hr back on my own site! http://bit.ly/zn9Wxc

Really don't get the point.

Bootstrap is open source. Most of these themes would be paid. (not good for me)

Don't have much in support of my point, but I would not use this service unless some really _amazing_ designs are put up.

Then I'll just have to make sure I get some really amazing designs up there. :)

So it's open source. So use it. Just because the source is available doesn't magically make people able to make really nice looking site designs with it. However, it does allow some people who are already good with design to make reusable and largely understandable designs available for your project. And you can pay for those layouts. People who want nice designs on top of a bootstrap base win. The designers win. End of story.

Interestingly, you say it's "not good for you", but then you say you'd use the service if some "amazing" designs were available. I presume "amazing" designs would be good for you, hence you'll use it.

Not even sure what the point of your comment was, except to say "I don't pay for stuff" (with a hint of "everything should be open source" seeming to lurk underneath).

Open Source != Free. You can have open source code but need to pay for license to use it.

Great idea! I would love a valentines day bootstrap theme.

I wonder if it isn't a good time in the webs evolution to come up with or popularize a theme standard, and if bootstrap isn't a good step in that direction. This might help accelerate adoption and popularity of themes, especially open sourced themes, saving everyone a lot of time. This is the kind of thing I don't feel proprietary about at all, and would rather share my designs with others to improve and extend than re-create the wheel.

I'm working on a web application platform (coffeescript running concurrently across a cluster of nodes, basically). I'm still working on the backend, but once it is released publicly, I want to start building out a built-in frontend. To that goal, I'm planning to ship a web framework built in, and Bootstrap is the leading candidate right now.

I know popularly you buy themes which are collections of HTML and CSS and that they make it easy to have a nice layout without having to swipe a 37signals page-- you just change the content to suit what you want.

I see bootstrap coming from one end- a cohesive framework to make developing pages easier-- and themes being going a step further-- specific designs for everything but the content.

And I wonder if it wouldn't be a good idea to have a sort of theme architecture for bootstrap.

What I'm imagining is that themes could be specified, and developed in such a way that they could be traded as tar balls and quickly and easily used by projects. Much the way wordpress themes are standardized and plug into wordpress, these themes could be standardized and plug into bootstrap. Hell, the bootstrap page has an almost theme creator that lets you customize bootstrap. (http://twitter.github.com/bootstrap/download.html)

I'd love to have the ability to point my web platform at a github page, and have it suck in the latest version of an open source theme for people.

I'd love it if themes became a popular open source item. You may think this is a bad idea, but I see it as taking the framework idea and building another level on top of it. Sure, some people will just use stock themes, others will make custom themes.

... and a lot of people will learn web design by taking apart themes and understanding them.

Does a standard format for bootstrap themes make sense?

(Please don't flame me if I've missed something here- this is an idea, and I admit to not being a bootstrap expert.)

Personally I like that Bootstrap is NOT Themed. It's minimalistic and still very flexible. I believe it should always stay as a BASELINE. I want to build amazing designs on top of it, and save time by not having to copy code again and again for round corners, shadows, forms, tables, etc.

Right, I see themes as collections of components. They should be anyway, such that those individual components can be used, mixed and match, the way bootstrap gives you components like shadows, forms, rounded corners, etc.

I'm thinking a theme would be a collection of one level higher things like buttons, menus, a picture showing widget, or whatever.

And each component would have no other dependancies other than bootstrap, hopefully.

Agreed

Reply on news.ycombinator.com