9 ms·
Twitter Bootstrap
- akavlie 15y agoLooks pretty nice. But how did this come out of twitter? I haven't seen half of these elements on twitter.com.
- bretthopper 15y agoMain dev is Mark Dotto who previously released Bootstrap.less: https://github.com/markdotto/Bootstrap.less https://github.com/markdotto/Bootstrap.less http://markdotto.com/bootstrap/ http://markdotto.com/bootstrap/
- gcampbell 15y agoTiny correction: His name is Mark Otto; "D" is the middle initial.
- windsurfer 15y agoThat's unfortunate.
- cachemoney 15y agoMany internal tools use it.
- ChrisArchitect 15y agowow, this is interesting. What a contribution.
- jsavimbi 15y agoI support any developer that releases toolkits on Github, but Twitter would be the last place where I'd be looking for any type of front end guidance, let alone conventions. In other words, find and employ the tools you feel more comfortable with working across a variety of projects, not just one with a front end designed by the engineering team.
- seunghomattyang 15y agoI only recently started learning HTML and CSS so I was wondering if there is a good resource for learning how to use grids. I don't exactly understand how to use grids (or even why). Is it for visual consistency or is there an underlying usability/maintainability benefit to using grids?
- frisco 15y agoIt's just a convention to make it easier to be consistent, simplify your markup, and make development easier. Having a grid with a few defined classes for fitting into that grid is much simpler than building each page from the ground up. They also act as a shortcut for screen resolution compatibility. See http://lessframework.com/ http://lessframework.com/ for an example (there are other frameworks, but Less is just the one I remember right now).
- deleted 15y ago[deleted]
- artursapek 15y agoOnce you get into HTML and CSS you'll probably find that modular layouts are inescabaple, and with those naturally come grids. They allow you to swap out certain parts of your site and keep others consistent based on the content being displayed, and that just results in visual consistency.
- SingAlong 15y agoYou might find this SmashingMagazine article useful http://www.smashingmagazine.com/2007/04/14/designing-with-grid-based-approach/ http://www.smashingmagazine.com/2007/04/14/designing-with-gr... I prefer using the semantic approach to writing CSS using mixins (both Compass and LessCSS have mixin support). That keeps the html markup clean and maintainable. Also to note, LessCSS (used in Bootstrap) is different from Less Framework (http://lessframework.com/ http://lessframework.com/), which is a CSS grid framework.
- ulisesroche 15y agoThe best resource on why and how to use grids is: http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestaltung/dp/3721201450 http://www.amazon.com/Systems-Graphic-Systeme-Visuele-Gestal... It's primarily used as an aid for visual layouts, but it took on the other useful qualities everyone else has listed as the grid frameworks got popular in the web.
- artursapek 15y agoWow nice, great to see them writing off outdated browsers.
- zcrar70 15y agonot quite - twitter.com works fine in IE8 and IE7 (and even in IE6 - using the mobile version), whereas this doesn't work in at all in any of those... Twitter itself isn't giving up on old browsers; which makes me wonder how interesting this would be to anyone else who wants to create a real-world site for the general public (the general public still uses those browsers quite widely)...
- zcrar70 15y agoI didn't mean to denigrate the effort - it's a fantastic idea. I just meant to say that anyone wanting to use this for a wider-public app will need to put the extra effort in to make it work with the older IEs.
- mdo 15y agoWe plan on supporting at least back to IE7. Some of the code was written to do so already, and we'll get there with the rest of it, hopefully with negligible code bloat.
- wildmXranat 15y agoFor a developer like me, that doesn't have a lot of time to sharpen UI skills, this is amazing.
- nikcub 15y agodevelopers have long had tons of libraries that we could access and use almost as a jigsaw puzzle, whereas the equivalent for design never really existed until recently.
- dmix 15y agoBlueprint CSS framework has been around since at least 2004. The newer libraries are basically the same thing (grid/typography/resets) except that they include things that modern browsers support. So this isn't entirely a new thing.
- Pewpewarrows 15y agoAll it needs is for that grid to be responsive using CSS media queries, and that will probably be the last CSS toolkit I'll ever need. I have my own internal boilerplate one that I use, but it's nowhere near as refined. Bravo to the Twitter dev(s) responsible for this. You probably just saved me hundreds of hours of future work and frustration.
- uptown 15y agoTake a look at Skeleton. It's created by a guy that works at Twitter and is responsive: http://www.getskeleton.com/ http://www.getskeleton.com/ The HN discussion about it is here: http://news.ycombinator.com/item?id=2772316 http://news.ycombinator.com/item?id=2772316
- krsgoss 15y agoNice work and thanks for contributing. Look forward to trying this out on a future project I'm working on.
- jhuckestein 15y agoThis seem like a perfect addition to a hackathon toolkit :) I'll definitely use it. Random rant: Why do they call it "Twitter bootstrap"? IMO that kind of association is a little vain. Rails isn't called 'Ruby on 37Signals'. Besides, it's slightly confusing because it seems to have little to do with Twitter.
- phillmv 15y agoI don't know about that. It clearly borrows/follows their house style. Besides, what else would you call it? Bootstrap Boilerplate? Twitter Boilerplate? Eh.
- mdo 15y agoActually, it came from our internal apps and is used across the board for all of those (and believe me, there are a lot of them) :).
- jhuckestein 15y agoPoint taken :)
- trungonnews 15y agoI am guessing that the internal apps users don't run IE. :)
- chengyinliu 15y agoI'm actually curious about the hackathon toolkit, could you share what's in it?
- benregn 15y agoAlso curious about the hackathon toolkit, what's in it?
- alexis-d 15y agoI'm always happy when I see a big company releasing really nice stuff as free software, and that's the case. Congrats Twitter!
- brackin 15y agoI love this, good on Twitter for realising this. Making the web more beautiful.
- akavlie 15y agoAny clue what the browser compatibility is like, and how well it holds together in older browsers? All they say is "only modern browsers in mind" -- but I see no details about that. If it holds together sans pretty effects that's fine.
- garbowza 15y agoNot so good in IE8. All the message gradients are royal blue and functionality like the drop down doesn't work at all.
- paulirish 15y agoScreenshot in IE8 by @jdalton: http://cl.ly/3S1S1V3X282T0w3K3q1z http://cl.ly/3S1S1V3X282T0w3K3q1z
- travisfischer 15y agoThat's disappointing. Someone needs to fork this and make it at least look reasonable in IE8 and preferably at least visible in IE7.
- pragmagic 15y agoSuch a shame. That will rule it out for a lot of developers. For all your designers and front-end developers: there is a real need for something like this. Have a look through the weekendhacker archives and look at how many developers ask for design help. Templates on sites like themeforest are often only suitable for basic crud/admin apps or require so much customisation it's easier to start from scratch. At the other end of the scale you have a variety of frameworks and boilerplates which are great from a technical perspective but do little to help aesthetically challenged developers like me. What we need is something in between. A library of pre-styled css 'components' that look good and support the most significant browsers. Similar in principle to Nicole Sullivan's OOCSS but with a greater range of visual styles. I'd pay significantly more than the cost of a themeforest template for a component library that managed all the cross browser issues for me and I'm sure others would too.
- mark242 15y agoThis is fantastic. Google created a stylesheet like this once, a while ago, that was extremely lacking when it came to real-world actions and layout. This is incredible.
- harrisreynolds 15y agoThis looks very cool... we need richer frameworks to standardized web dev!
- pbreit 15y agoI've been looking at Blueprint and Skeleton but this looks like a better option. If I'm not a LESS user am I going to feel second class?
- southpolesteve 15y agoWould love this if it used SASS
- kidh0 15y agoFor sure, and doesn't seems to be that hard to convert into SASS... It's a great project to the weekend :)
- voidfiles 15y agoI think the biggested difference is just that variables are prefaced with @ in sass, and & less. Also the mixin call syntax is different.
- chriseppstein 15y agoSass uses $ for variables, less uses @. For more differences: https://gist.github.com/674726 https://gist.github.com/674726
- bdesimone 15y agoGorgeous as it is -- I just can't use something that utterly breaks IE7,8. I wish the realities of browser support were different. Nice contribution in any case.
- dfischer 15y agoThis is absolutely interesting and amazing to see. There's a lot of good elements and style in here. I think this is a great effort and movement forward to help bring a "standard UI" library to the web. I think there's a good use case of websites starting to have a more "locked in" UI/Look & Feel. I'm not convinced by this notion but it's something I've been thinking about lately. Either way, this is a great library for bootstrapping your web-app. I do have some qualms though, but this is due to the limitation of CSS. You really should start practicing separation of content from presentation. It's great to see them leverage LESS but I'd like to see this integrated with SASS/Compass. I'll probably convert it over and release the link on hacker news when ready. * the stuff that's really cool is forms/modal/navbar/tips
- subpixel 15y ago> I'll probably convert it over and release the link on hacker news when ready. Awesome, looking forward.
- methane 15y agoIt's such a bless for programmers.
- joeshaw 15y agoWhat is the relationship between this and Bootstrap.less (http://www.markdotto.com/bootstrap/ http://www.markdotto.com/bootstrap/), other than it appears to be by the same person? What about Skeleton (http://www.getskeleton.com/ http://www.getskeleton.com/)? Are they just 3 different visual approaches to the same problem, or is there an evolutionary progression among them?
- cmelbye 15y agoBootstrap.less seems like it's just a bunch of LESS preprocessors for things like rounded corners, color transparency, grid layout, etc. Bootstrap goes further and includes navigation bars, table styles, alert message styles, and a lot more. It's conceivable that Bootstrap.less is used in Bootstrap, because I know that Bootstrap has similar LESS preprocessors, although I don't know for certain. Skeleton is very similar to Bootstrap, and Skeleton was designed by a designer at Twitter as well. Bootstrap seems to contain more styles for things like tables, alert messages, modal dialogs, etc.
- voidfiles 15y agoWhy less, why not sass?
- mdo 15y agoWe preferred Less over Sass because of it's ability to compile via JS, Mac app, or node. At the time, I believe Sass was not able to via JS. Other than that, personal preference.
- leek 15y agoThis is great, but I'm afraid I will be forking and adding SASS/SCSS support.
- mhartl 15y agoI want that, too. Let me know when you've forked it: https://github.com/twitter/bootstrap https://github.com/twitter/bootstrap
- adam_albrecht 15y agoYeah and post the new repo, because I'd be happy to contribute.
- kkdoo 15y agohttps://github.com/kkdoo/bootstrap/tree/scss https://github.com/kkdoo/bootstrap/tree/scss
- tptacek 15y agoNot to take anything away from a really nice contribution by Twitter's team, but know that stuff like this in tens of different variations are available for tens of dollars at sites like ThemeForest. A typical "admin" theme has some variant of the 960 grid, nice forms and buttons, drop-down navs, tabs, and accordions, and multiple layouts. The templates won't be as well documented as this one, and they'll be more brittle and probably more poorly coded... but they'll only take an hour or two of additional work to (say) Hamlize and bring into your Rails project. They'll look more distinctive than Bootstrap. They'll have better browser compatibility. Unless you're crazy enough to be selling web apps to web developers, no customer of yours is ever going to know or care which of these things you started out with. Or, use Bootstrap; it's really nice. I'm just saying you have lots of good options.
- DavidMcLaughlin 15y agoYou're comparing Apples to Oranges here. Bootstrap is not a template, it's a framework for people who know what they're doing to quickly build fully customized but aesthetically pleasing websites with a lot of the pain removed from cross-browser CSS. It is similar to something like Blueprint (http://www.blueprintcss.org/ http://www.blueprintcss.org/), which I have used for my prototypes with a lot of success, but just taken much further.
- taylorbuley 15y agoBlueprint has always been very good to me. Here the I think the pain "removed from cross-browser CSS" is removed here, at least in part, because this doesn't work across browsers (check the IE8 screenshot @paulirish posted)
- dangrossman 15y agoI don't think that's true. Maybe you didn't see the reference to "admin themes". They're not normal website templates, they really are essentially the same as Bootstrap, collections of styles/images for menus, typography, forms, warnings/errors, tables and dialogs for use in applications.
- tptacek 15y ago
- jemeshsu 15y agoIs the site http://twitter.github.com/bootstrap/ http://twitter.github.com/bootstrap/ using Bootstrap? When view on iPhone, there is a thin white margin for the right border. This white border stays even if you double tap on the screen, which normally means the site will expand to fill.
- Adkron 15y agoClasses and ids should describe the data that you are marking up, and not the structure of the view. It is really hard to continue to work with something like this. It increases the number of classes on each element and causes the developer and designer to fight over which classes go where. Now we have separate classes for style and functionality. If we describe the data then it is easy to describe the view of that data in different ways, and with the same html.
- jacobr 15y agoYes. An interesting approach would be to use mixins instead, like an expanded version of Compass.
- ricardobeat 15y agoLooks very well made, I'm using it next week already for a small project :) The IE incompatibility is a shame, this could be a nice poster for progressive enhancement.
- spiralganglion 15y agoIt's so well made, you can already be using it in the future, in the present. Forget making it work with IE8 and older. I want to see it working in IE11. (Insert your own Spinal Tap jokes here).
- deleted 15y ago[deleted]
- jdelsman 15y agoThanks, Twitter!
- katieben 15y agoJust used it today with my new 1x52 project: http://jambx.com/ http://jambx.com/ - Twitter for song lyrics. I'm doing some sort of new web project once a week, for hopefully a year. Writeup on my blog about it: http://kguac.com/2011/08/1-x-52-week-4-jambx-twitter-for-lyrics/ http://kguac.com/2011/08/1-x-52-week-4-jambx-twitter-for-lyr...
- rokhayakebe 15y ago1x52 is interesting, although you may be forced to build really really simple MVPs. I have been struggling with, to use your namification, 1x12months. Following your progress to see.
- katieben 15y agoYeah, I definitely am, though right now I'm thinking that's a good thing. I tend to take forever building/planning things and never launch.. the 1 x 52 project will get me in the mindset to actually launch, test concepts before spending too much time on anything, really make it an "M"VP. Are you posting your projects in a blog or somewhere I can follow?
- katieben 15y agoWell, the downside of doing these so quickly (so far) does seem to be less time marketing them.
- rokhayakebe 15y agoI agree. Building is probably the easiest part. I do not have a blog, but I'll start to post links of projects in my HN profile.
- SudarshanP 15y agoIt would be awesome if there was a forked Django/Rails/Sproutcore framework with tight integration with something like Twitter Bootstrap. That way you would have a super awesome looking app right from the start. The pros can work on the lean frameworks while the lazy ones like me can hop onto the shoulders of the giants ;-)!
- Tichy 15y agoWhat I don't get is why browsers don't come with good looking typography settings by default.
- mvts 15y agoThank you so much for that framework. I just started implementing it in my latest app. Looks great! I'm struggling a bit with the modals implementation, but I'll get it to work.
- tcderek 15y agoI really like Bootstrap as a tool to create a MVP. Will definitely be using it soon!
- dmmalam 15y agoWould love a stylus version to use with nodejs
- nrml 15y agoVery nice contribution!
- kbj 15y agoI tried integrating this with the html5-boilerplate project as that might improve the cross-browser compatibility. It seems doable. Most tweaks seems to be related to the css reset part as they differ a lot. (Newest h5bp uses normalize.css vs Eric Meyer CSS reset.)
- schiptsov 15y agoWhy and how it is better than YUI? Because it is from Twitter? ^_^
- ubi 15y agoAs a solid developer who lacks real design skill I thank you guys for building this. Having a clean looking app is key when showing off new ideas.
- liedra 15y agoIt's a bit of a shame that the "just hotlink the css" thing doesn't actually work very well - it actually means that some parts won't function (such as the Dropdown menu). My partner and I have just spent the better part of half an hour trying to work out why this didn't work (the documentation didn't mention any javascript necessity). Docs could use some serious clarification - which parts are CSS-only and which require what js files.