22 ms·
Customize Twitter Bootstrap To Not Look Bootstrap-y
- johnernaut 14y agoI feel like the tone of this post could have been less rage-filled and more informative. I also wasn't very impressed with the end result. It still looks extremely bootstrappy to me (not that I think that's a bad thing).
- antjanus 14y agoWait, what do you mean by end result? There really wasn't one, I posted screenshots of the applications I used to adjust bootstrap. And yeah, I tend to write "passionately". I basically wrote this up after seeing five or six different apps using bootstrap -.- it gets really annoying, and I just can't stand it. However, I'll take the suggestion of being informative over rage-filled to heart next time. Thanks!
- jacobsimeon 14y agoI think the parent was talking about the screen shot with the big green rectangle in the center when he said "the end result". I, for one, thought the writing felt a bit rushed and perhaps overblown with the whole "you're lazy if you don't customize bootstrap" tone. But the tools you linked to seem like they're pretty useful, so I think you achieved your goal of raising awareness of how easy it is to customize bootstrap.
- antjanus 14y agoI'll keep that in mind. Didn't want it to sound like that. Unfortunately, the post arose from some frustration on my part. Thanks!
- ZoFreX 14y agoI agree (with the tone point) - it was a very good article, made some good points, but I felt like it was shouting at me. Given that I agreed with the points that rubbed me the wrong way a little. It's nice to see people achieving visual differentiation with Bootstrap and a little bit of effort!
- thomasfl 14y ago"Don’t want to do it? Fine! Hire me. Seriously. You see that button on the right?" Wonderful shameless self promotion! I don't see no reason to be shy about what you want with your blog posting.
- antjanus 14y agoThanks :) I originally didn't want to add it but I'm pretty strapped for hosting right now and it's supposed to renew. ;)
- Swizec 14y agoYeah, your hosting is already crumbling under the pressure it seems. Site is very slow. That said, I might need a designer in the near-ish future. Email is in my profile.
- jongalloway2 14y agoPROTIP: Cloudflare https://www.cloudflare.com/ https://www.cloudflare.com/
- antjanus 14y agoAlready on it. Max caching and optimization. My hosting provider actually integrates directly with them.
- antjanus 14y agoOh I know. I'm on shared hosting, about to upgrade to a VPS. What you're experiencing now is only 400-500 people on there. I've had 5K come there just in the past hour. I'm surprised my hosting provider hasn't just...turned my site off.
- sp332 14y agoI just don't get the bootstrap hate. Same buttons and toolbar? Well you see the same buttons and toolbar about every page, in your browser window. It doesn't bother me.
- antjanus 14y agoThat's fine. I tend to get riled up about it because there's just no variety. I understand "standards" and "defaults" the way that the browser displays stuff but this is just a bit too much for my taste.
- sp332 14y agoI don't mind it because the people who use bootstrap get to spend their time doing something more productive than making a platform. I appreciate the advice about easily customizing it, though. I didn't think it would be that easy to make something unique on bootstrap.
- antjanus 14y agoI definitely agree with your statement. That's why I said, I know why people use it. I'm so glad I don't have to spend an hour trying to come up with styles for a particular thing and have something built in. With that said, it's even nicer that the interface I look at for 8 hours a day is actually customized and unique.
- xyzzyb 14y agoI completely agree. The browser surrounding these fancy web applications hardly changes at all, I don't mind coming across bootstrap wrapping a cool application in the slightest. Nor do I mind finding yet another default Octopress blog. When I see bootstrap or the default Octopress theme I know: - it's gonna be readable - what the buttons will look like - the typography spacing won't be hideous - etc. Frankly, I'm even relieved to see a default theme like Bootstrap instead of the programmer spending a week trying to make a design and failing utterly.
- nicholassmith 14y agoI think people should configure Bootstrap and use different colours, and approach it not as a strict guideline but as a good starting point with useful widgets to play with. I am, however, completely happy with people using Bootstrap unconfigured, it looks good and for the most part is normally used in a really clean way. A lot of iOS apps look like the stock components, and that's fine as those components are nice and clean. There often seems to be a bit of push back about websites looking the same, especially with Bootstrap sites, but we don't expect (and often don't want) applications running myriads of different UI styles on our desktops. Maybe it's just a sign of the times.
- jacobsimeon 14y agoTotally agree. Sometimes I think bootstrap is moving us toward a more consistent UI across the web which means users benefit by not having to learn yet another set of interface metaphors. A fresh set of colors can keep things interesting, but people shouldn't be discouraged from using stock bootstrap.
- Swizec 14y agoI visually recognise websites I visit, app-like stuff especially. Everyone using bootstrap has made the internet a mostly unrecognizable hogwash of same-looking stuff that I have a hard time telling apart, let alone any sort of lasting impression being left. Think about it, even Bootstrap's page itself doesn't look like a default Boostrap template.
- nicholassmith 14y agoIf the page has made no impression, doesn't that speak more about the content than the presentation? I agree on the visual aspects of being able to determine a page, but Bootstrap just provides a clean way to display some content, I'm alright with that. And no, Bootstraps page doesn't look like a default template, but they don't say 'you must customise it', it's left up to the developer/designer/implementor.
- Swizec 14y ago
- jewel 14y agoAs HN users I suspect we're seeing a far greater quantity of brand-new bootstrap sites than almost every other group on the internet. I wouldn't sweat using bootstrap for your app if you're targeting a different group.
- dclaysmith 14y agoWhen I started on my project I created a /css directory and then a /twitter folder underneath it full of the raw .less files. When I decided I wanted to use a bootstrap component, I would move it out of the /twitter folder into the main /css folder and then include it. It's a good way to get a lot out of Twitter bootstrap without falling into the "obviously bootstrappy" look. Over time, I've tried to remove what I can of the bootstrap look and feel but I found it hard (for me and my below average css skills) to beat some of the items (forms, etc). My site (http://www.thetaboard.com http://www.thetaboard.com) is definitely 'built with bootstrap' but I don't think it gives off a 100% bootstrap vibe.
- antjanus 14y agoI'm bookmarking it and I'll feature it on my next post with the results from people :) thanks! honestly, the forms, tables etc. those styles are okay with me. It's just that toolbar and buttons that goes against grain for me.
- dclaysmith 14y agoAgreed. And the "Hero Unit". My buttons are blue (though I tried a darker blue than the standard look). They are still a dead giveaway.
- Kerrick 14y agoAnother site I've seen in the wild Built with Bootstrap that was quite difficult to tell at first pass was Bright Nest. http://brightnest.com/ http://brightnest.com/ The Missouri Department of Conservation's E-Testing service for Hunter's Education also uses a customized version of Bootstrap, but it's pretty easy to tell it's Bootstrap. http://www.hunter-ed.com/missouri/ http://www.hunter-ed.com/missouri/
- antjanus 14y agoI'll add these to my follow up post on what sites do use bootstrap but you can't tell
- gramsey 14y agoIt's been said here before, but I'm fairly sure the only people "disappointed" and "annoyed" at the many sites using Bootstrap are web developers. Of course we notice UI frameworks because it's our job to create websites. However, the vast majority of users don't give a half a cent about what UI framework the site is using, let alone know what a front-end toolkit is. All they notice is that it is easy for them to interact with the app, probably much easier than if the developer had coded it. In fact, the site is probably built sooner anyway since the developer didn't have to spend the time to create a UI by themselves.
- antjanus 14y agohaha possibly :)
- mbesto 14y agoI came here to say this as well. > I’m sick of seeing the same damn buttons. I’m sick of seeing that same damn toolbar up top. It’s driving me crazy. Take this advice with a grain of salt. As much as I agree with this statement, the fact is, if your audience isn't a group of people familiar with bootstrap, then this probably won't be a problem.
- EnderMB 14y ago"It's been said here before, but I'm fairly sure the only people "disappointed" and "annoyed" at the many sites using Bootstrap are web developers. Of course we notice UI frameworks because it's our job to create websites." Are you sure you meant Web Developers? It sounds like you meant Web Designers. I wouldn't use Bootstrap for any client-facing website, but other agencies I know have tried it and those that work on the lower-end of the client scale have had trouble with clients not wanting to pay when the look of certain elements looks almost exactly like those on other sites they've been to. Bootstrap is a decent tool, but it has been abused by non-developers and non-designers that cannot develop or design their own pages. It's hardly surprising, and it's a testament to how good Bootstrap can be. However, I hope that Twitter eventually scales back some of Bootstrap to allow people that use it for its intended use to get more out of it.
- 14y ago
- deleted 14y ago[deleted]
- alpine 14y agoAnyone with experience starting with a Bootstrap theme then handing it over to a designer to see what they come up with?
- deleted 14y ago[deleted]
- PeterPiper 14y agoConfused... In your article you state: "Second, I need something that I can develop quickly in without having to write any styles, my current work focuses on results rather than prettiness and UI (for all I know, they wouldn’t mind straight HTML without CSS but that would make working on it hell for me)." Same reason people use the default Bootstrap theme.
- antjanus 14y agoYes, I also iterate in the article that it's quite fine to develop in bootstrap default theme; however, I would appreciate if they could at least download one of the free themes or use a SLIGHTLY modified version of it. Cool thing is, (and I stated this) they can just drop the modified version in whenever they wish to once they're done with development.
- pxlpshr 14y agoI have used many frameworks of the past, but Bootstrap is in a different league coupled with LESS. It just is. I see Bootstrap as being not too dissimilar from iOS UI. In the early days, you saw a lot of UI's built on Apple's native guidelines without much deviation. It was just difficult, the SDKs weren't fully baked for it. If you wanted to maintain compatibility as Apple progressed rapidly, you stuck to the basics. Now you're seeing all sorts of amazing UI's built upon a solid fountain for interacting with multi-touch mobile apps. Similarly, Bootstrap is an equally great foundation for building responsive web apps that just continues to get better. As it becomes more of a standard, then more time becomes available for the veneer. After all, that's really the only thing people are complaining about — something rather superficial and has no real impact on value of the product. What is does to the user experience is an open debate (more graphics = slower on mobile). I'm on my 3rd project with Bootstrap, and finally feel like I have a grip on adding veneer programmatically after some trial and error. Want to start a small-cap cash cow? Get some great designers together and go make the next WooThemes for Bootstrap.
- spitfire 14y ago"something rather superficial and has no real impact on value of the product." Have you A/B tested that? Cavet: To normal real world folk, bootstrap is shockingly new-high-tech. But you would be surprised how much, say, a dark green background will help a forestry related website or a swiss bank. This is excellent stuff and we need more of it. If simply to eliminate the drudge work of defining GUI's so we can get back to building value in our companies.
- pxlpshr 14y agoColor theory is simple to apply with CSS. The type of veneer I'm describing goes way beyond that. Fortunately with CSS3, more of it is moving to the style sheet but it was very tedious until LESS and mixins came into the picture. Don't forget split testing suffers from ceiling effect.
- deleted 14y ago[deleted]
- cheald 14y agoOnce upon a time, I wrote a World of Warcraft add-on called "SexyMap". Basically, it provided a bunch of functionality for your mini-map, and it made it skinnable in a crapload of interesting ways, so that people could build maps that thematically fit with the rest of their UIs. As of right now, it is registering at 4,692,196 downloads. Nobody customizes the damn thing. In every screenshot I've ever seen with someone using it, they're using the default skin. The really creative ones do a hue-shift on the default skin. It ships with a good dozen+ skins, and has an editor built into it to let people easily build more. The only time that functionality has apparently been used is when I was building the initial default skin set. Default Bootstrap annoys the heck out of me, too, but I've learned that people just don't customize things even if you give them the tools to do it. If it's good enough out of the box, they just leave it alone. Bootstrap is good enough out of the box. I expect years upon years of default Bootstrap websites. We'd best get used to them now.
- antjanus 14y agoI really appreciate your comment. I'd upvote the hell out of it if I could.
- simonsarris 14y agoI agree with you and moreover I don't see a problem with default Bootstrap sites. I know a few dozen restaurant sites alone that I could only dream of being remotely as pleasant to look at as a default Bootstrap site. The internet has come a long way since the era of Geocities, faux 3D gifs and blink tags, and I am very thankful that there are tools to make a site look passably pleasing with very little effort. I will gladly get used to them.
- AndresOspina 14y agoI haven´t used Bootstrap, but Hacker News Community always impulse to test the "new" ways and technologies for solve the "problems". So get one's hands dirty!
- ojr 14y agoAn efficient way is to learn less, work with it on the client side and compile it from the command line to css, this can be a pain on windows, I'm going to make a youtube video describing it!
- colinsidoti 14y agoMeh, I'm currently guilty of using straight bootstrap styles with www.kangacruise.com I also hate the UI, but I don't think these kinds of changes would be worth the marginal improvement. I know I'll never get what I really want with these subtle changes, so I think I'm better off waiting until I can hire a designer.
- cek 14y agoWe use Bootswatch and are really pleased with the results (www.milelogr.com). It appears to be broken with BS 2.1, but i haven't taken the time to see what broke.
- ScotterC 14y agoI'm really really glad so many developers who are starting out are using bootstrap. It makes it a hell of a lot easier to get people up to speed when they join my team. It's awesome to have someone start learning your codebase and have an easy command of the templates out of the box because they've worked with that framework before. Now, my company Artsicle.com has a bootstrap foundation but you'd never guess it. However, whining about a good UI that works on many browsers out of the box and provides easy responsiveness? Get over yourself.
- Sakes 14y agoExample of not bootstrappy bootstrap. Here is a quick and simple site I did this weekend. I used bootstrap because of it's responsive design support. It makes it easy to create content that looks nice on desktops and mobile/tablet devices. http://patriciafreymd.com/ http://patriciafreymd.com/ It is pretty simple to make bootstrap not so bootstrappy, just view source and take a look at my inc.css file.
- jonknee 14y agoWhy is it so narrow? 768 pixels at its widest isn't very responsive, only phones will not be wide enough (and even then only some phones).
- Sakes 14y agoThe site was made 4 years ago using tables and images for titles. I just took the existing design and converted it to bootstrap, header tags, and paragraph tags. The titles are actual text now too. I didn't make it any wider because there is not a lot of content to begin with. It just doesn't need a wide amount of real estate.
- antjanus 14y agoI'll mention it in the follow up post, I like it :)
- Sakes 14y agoThanks!
- namzo 14y agoMy simple solution to prevent your site from looking "bootstrap-y" is to design a mockup of what you want to achieve first (in maybe photoshop or fireworks) then re-create that interface with bootstrap & make sure you use the design as a guide. Works every time. Disclaimer: I'm a front-end designer.
- publicfig 14y agoThat's the method I've tended to use, and it's worked great for me. The problem with starting from bootstrap is that it's incredibly well designed for specific purposes, and there's a fear that changing anything is making it worst for the sake of difference. By starting with the interaction design, not only can you cut down on the elements used from Bootstrap, you can find uniqueness and utility without losing too much.
- AtTheLast 14y agoI'll take a bootstrap site over some janky unusable design I've seen plenty of programmers create.
- antjanus 14y agopoint taken and I whole-heartedly agree. But I wish the programmers could take that one extra step (those 10-30 extra minutes) and make it unique.
- memset 14y agoGreat to use this page as a resource of all the tools the community has built around extending boostrap.
- enra 14y agoWrote a similar post while back if you're interested in learning more http://blog.kippt.com/2012/04/26/building-with-bootstrap/ http://blog.kippt.com/2012/04/26/building-with-bootstrap/
- antjanus 14y agoHa! I didn't know you guys wrote about it too. Your site was halfway an inspiration for me to use bootstrap (rather than try to do my own thing) and customize it beyond recognition!
- sopooneo 14y agoAll windows apps look the same. And all Mac Apps. Maybe Bootstrap is the beginning of making all things web look/work/feel similar to on another. Is that terrible?
- xyzzyb 14y agoNo! It's not terrible at all. Not to me anyway. I'm always pleased to find another bootstrap app because I already know the UI conventions that it'll be using and it looks great.
- spitfire 14y agoIf you work as a web designer (technician, really) it might be.
- taude 14y agoI'd dispute that any of my apps on OS X or Windows look the same, except those from related product families like Office. Safari doesn't look like Chrome. Mac Mail looks nothing like iPhoto, etc...
- simonbrown 14y agoIn addition, skinning desktop software is generally seen as bad practice and apps that do it stick out like a sore thumb.
- atomical 14y agoIs there an easy way to preview bootstrap after you customize the variables? A quick and dirty preview, maybe?
- antjanus 14y agoThe only way to do that is to use Boottheme. Boot theme does a great job because it gives you all the responsive views, and different layouts. You can also edit html on the site to see what it would look like.
- irahul 14y ago> I’m sick of seeing the same damn buttons. I’m sick of seeing that same damn toolbar up top. It’s driving me crazy. If only html/css/js/browsers had default decent(or even non-decent) standard gui widgets from the beginning, there won't have been a need for bootstrap, and hence no need for getting riled up over buttons looking the same. Making "submit" button different on every site you work on might have a purpose; it's just that that "purpose" totally eludes me. I don't know what app the blog post is talking about, but if you decide not to use an app because it uses default bootstrap theme implies 1) either you don't need the app and are just fidgeting around; 2) or the app has so much competition that people are making decisions based on trivialities; 3) or you are the kind of person who decides he wants a silver car first and then decides what kind of car he wants. As a developer, if it's 1, you aren't a priority. If it's 2, I will have to check if bootstrap is the reason people are picking up the competition over me - if it isn't and I already have ample competition breathing down my neck, I have other things to worry about. If it's 3, I will be bothered only if there are many like you who want a silver car first and bother about the mileage, pickup, handling etc next; if that isn't the case, you can shop for your silver car elsewhere.
- antjanus 14y agoThe submit button isn't the problem. Look at the default HTML styles. What sites out there still use that blue color for a link? It's one of the first things that gets redeclared in CSS. As far as the audience, yes, I was just messing around with a few apps and looking at them. Each time I felt like there was something drawing me away from using it. Design is not disjointed from app usage. It's part of usability, it's part of the allure of an app. Read up on it. Also, it's an EASY fix. Don't want to look like every other page hosted on Github or any other small app page? Customize bootstrap. Within 30 minutes, you're capturing audience, but not only that, you're standing out. It may not be specifically that bootstrap usage REPULSES people it may just be it doesn't really get them riled up about your app or make your app memorable.
- irahul 14y ago> What sites out there still use that blue color for a link? What do you mean that blue? As far as using blue for links go, I scanned my opened tabs and Google, Facebook, Github use blue for links. Bootstrap's blue isn't the browser default blue. They made it blue because most of the users expect links to be blue. > Design is not disjointed from app usage. I don't remember claiming it is. The default bootstrap them isn't bad design. It's better than what a typical developer or designer comes up with. Also, the user doesn't give a shit if the buttons look the same on all websites. Most of the users won't even notice. > It's part of usability, it's part of the allure of an app. Read up on it. Making links non-blue or changing button colors isn't usability. Read up on it. > Don't want to look like every other page hosted on Github or any other small app page? Customize bootstrap. I would do that if I don't want to look like every other bootstrap site. Does this even need to be said? > Customize bootstrap. Within 30 minutes, you're capturing audience, I missed the part where you proved changing bootstrap theme captures audience in 30 minutes. > It may not be specifically that bootstrap usage REPULSES people it may just be it doesn't really get them riled up about your app or make your app memorable. Since you are throwing around a lot of "maybe" and anecdotes, I will throw one of mine. I am yet to meet someone who is repulsed by bootstrap and is a customer - people who need my app and directly or indirectly pay for it.
- taude 14y agoI've said it before, but I like Zurb Foundation because I felt that I had to customize a few things from the get-go: http://foundation.zurb.com/ http://foundation.zurb.com/ (Not affiliated) And the built in responsive grid stuff is pretty nice, and you can still chose some of your own display components.
- taude 14y agoI should add that I think Twitter Bootstrap is perfect for building behind-the-firewall type of corporate/infrastructure apps. But using it bare on a public-facing marketing site?
- antjanus 14y agoI used foundation before as well, liked it to an extent. Wasn't too happy with the buttons (how shallow of me :/). Otherwise, great platform.
- antjanus 14y agoI used foundation before as well, liked it to an extent. Wasn't too happy with the buttons (how shallow of me :/). Otherwise, great platform.
- delinka 14y agoI can get behind the headline. However, the implementation is seriously lacking. I'm not a designer. I can't find anyone who can explain to me the hows and whys of CSS without expecting me to already know CSS. So I just copy CSS that I like. I've implemented Bootstrap on a new site. I see your colorschemedesigner.com link. Now, how do I get these colors from it into Bootstrap? Oh, the Bootstrap customize page. Which colors from Color Scheme Designer 3 go in which boxes? If I have to edit CSS, which files do I have to edit and why? You're a designer and you think this stuff is "easy." Speeding up your database-centric app is easy, too. Use a proper RDBMS and correctly normalize your data. What? You don't understand? Yeah, that's how I feel when designers expect me to "fix" my Bootstrap-clone website. Edited to add: On Color Scheme Designer, I find a set of colors I think looks nice and then look at the light and dark page examples ... and they look like ass. I have no patience to sit and find something that looks nice here and drop it in Bootstrap there and discover that it looks terrible. A lovely 'download Bootstrap CSS' link on this site would save tons of time.
- cdcarter 14y ago"On Color Scheme Designer, I find a set of colors I think looks nice and then look at the light and dark page examples ... and they look like ass. I have no patience to sit and find something that looks nice here and drop it in Bootstrap there and discover that it looks terrible." I'd say trial and error with this is actually a great way to learn some basic color theory and develop your intuition about what looks good on a page. This is a good skill to hone and is really what the most important part of being a designer is. Once you put the time in to really study color and what looks good, implementing it will get faster every time you go.
- antjanus 14y agoOkay, okay, okay, i got it. Use boot theme. Press a die a bunch of times, wait until you find a color combo that doesn't look like ASS. Download. Saved you half the steps. The bootstrap customization page sucks. i don't really use it myself.
- px 14y agoCodecademy.com has effective lessons on CSS. You may find it very useful.
- tptacek 14y agoIt's funny how when people use alternative dev tools to build UIs on OS X, people complain that the resulting applications "don't look like Mac applications", but that at the same time web applications are expected to look different from one another. What purpose does that look/feel diversity solve?
- statictype 14y agoI get the feeling that many of the complaints about "doesn't look like a Mac app" really mean "isn't as polished". Chrome on the Mac isn't completely consistent with how Mac apps work but no one complains about it (as far as I know) because it's polished and works well.
- fusiongyro 14y agoApplications are about functionality. The purpose consistency serves is making the interface familiar and therefore more intuitive. Conversely, websites are largely about branding, and consequently distinctiveness. Web apps sit in the middle of these two domains.
- Lukeas14 14y agoI've taken the opposite route for my project http://iwaat.com http://iwaat.com. The HTML/CSS is all done from scratch with several elements stolen from Bootstrap (ex. highlighting around form fields). It also uses a background image from subtle patterns which really made all the difference vs. plain white/grey. I'm sure this workflow took longer than building off of Bootstrap from the start but I like the way it turned out.
- jaredsohn 14y agoThis seems like something a browser extension could resolve, at least partially. If you're a web designer, you can install this extension and then each bootstrap site would always use a random predefined CSS.
- joeblau 14y agoThanks so much for the resources. I knew of a few, but the rest helped a lot!
- mixmastamyk 14y agoOn one hand, its nice to have a one-of-a-kind site. But, I'm going to disagree that using a standard theme is a bad thing. When I use a GUI one of the things I hate is when an app doesn't follow the look and feel of the system. This "skinz" disease ever trending upward. So, I also tend to think every web site looking similar (and great) is a blessing. A lot of time can be saved trying to find your way around, and you'll know what to expect. The focus therefore falls to the content which was an original goal of the web. There might not be as many design jobs open for secondary players, but it's happening all over these days, see the teachers vs. khan academy trend.
- pud 14y agoOne of the things I did on my Boostrap'd site, is to make the button corners sharp instead of rounded. That makes a big difference in making it look less Bootstrap'y. See fandalism.com
- rosstamicah 14y agoIf, in 5 years time, 50% of the internet looked like default bootstrap.....this would not be a bad thing. At all.
- at-fates-hands 14y agoI'm wondering if this is a side effect of too many frameworks where developers have gotten so lazy, design is a total afterthought. I actually thought the end result of this framework would've been the complete opposite of what's happening. Since developers have more time and resources, they'd take the time to experiment and put some real effort into a design.
- mjs7231 14y agoI customized Bootstrap on my website. Thing is, no one knows I'm using it because of the customization. I suppose you only notice the people who don't customize it, and assume because of that, no one customizes it?