Thanks for making - it's so much more helpful than the over-9000 line bootstrap docs I am always using CTRL+F and trying to remember the name of elements on. Now I can just jump to the "card" section and scroll through everything really quickly to visually find it. Great job, will be using this.
But why, why, why, whyyyyyyy are you hijacking my back button, you evil person... please remove historystate, it's unnecessary for this site. Also, can you make the right/left arrow keys toggle between items in the preview box?
The user isn't changing page, so you definitely shouldn't be using pushState. If you want to update the address bar, use replaceState. After clicking a few of them I certainly didn't expect to have to click back to cycle through them just to get back to HN.
Agreed, when I hit back once or twice I was like crap. (I had just scrolled through every one.) So I just opened a new tab to HN, and closed that tab. Poor tab.
We are on the same page(no pun) that back button should take you back to HN, but if you are on chrome, clicking and holding the back button (browser's) shows you the list of tabs and you can choose the tab from there.
I wouldn't be so quick to remove the pushState - people here are mostly complaining that they want to get back to hacker news. But I can see that people (I) would normally use this site as a reference. And being able to explore different options and then use keyboard navigation to go back / forward isn't that bad. You could have used different 'pages' for the content but you chose to make the UX really quick and light, but that doesn't mean we should lose back / forward nav.
But if you've got some other keyboard navigation to go back / forward then maybe it wouldn't be so much of a loss...
Great site, it's what the official docs should be.
The pushState is good it just needs to be fixed, after clicking around a few times the back button didn't go back properly, I had a bunch of states that were the same anchor/section?
If replaceState was used when interacting with a section and push/pop state was used when changing states/going back then it should only take a few backs to get back to where you were.
I understand the rationale for doing it either way, but fwiw I prefer changing it so every card flips does not wind up in history. I think it has to do with the notion of "flipping" through the cards -- you're often just navigating through them to reach your desired goal, not reading them one by one as part of a linear narrative.
(I'm on my phone though so it's possible there's some alternate navigation on widescreen layouts that I'm not seeing).
I think the ability to copy/paste a URL to show exactly the state I'm looking at (I.E. #dropdown to see the dropdown.) Is great! But, after I scroll through a dozen, I want to hit back to go back to HN.
It both makes sense and is counter-intuitive to me at the same time. I see why you did it, and I see why some people would like it that way- however when I hit the back button I'm trying to leave the page, so it feels like I'm being held hostage.
I assure you I'm not trying to hold you hostage. I just thought it would be more useful this way. Guess I'll change it soon, given the feedback I'm receiving.
I'm the original one that complained - and now that I used it as a bookmark reference (instead of being linked from HN) I do see the benefit of the back button. Maybe only have back button navigation if there is no existing history. That way, links to the tool don't hijack existing history items.
With replaceState you can change the URL without adding an entry to the back button list. So you can have a back button that takes you back to HN and a bookmark reference.
The way it works now is quite useful. However, if I have a popup open, then dismiss it, the URL does not change back to having no fragment. I wish it did that.
For example, if I open two class popups, then hit the back button twice, I'd expect to end up on the overview page with no popup open, but what actually happens is the last popup stays up even while the URL changes.
The other case is, if I have a popup open, then close it, I'd expect the URL to change to having no fragment to reflect that, but instead the old fragment sticks, so a reload would actually show the last popup you had open.
These are obviously minor things and I like the project, so I hope not to come across too nitpicky.
People are complaining a lot about it because they're just visiting it to explore before coming back to HN to comment. When people are actually using the page as a reference, it's much less likely that they'll want to go back to another website in the same tab.
Exactly this. Please don't change the behaviour, it's working exactly as it should. People seem to forget how this page would work had it been implemented with an ancient frameset (navigation in one frame, content in another).
Also, does nobody know that in pretty much any browser, you can hold down the back button to get a history list so you can jump back multiple pages in one step? Or the "History" menu.
I don't mind the back button behavior personally. This is intended mainly as a reference that you keep in your bookmarks, so you wouldn't have a previous page to go to in most cases. I can see how being able to move back/forward in history between 2 items would be useful.
I think the back button should function like clicking the X and closing the modal. Otherwise the modal stays there, I click a second time and now I'm not on your site anymore.
You can solve the back-button issue with a little better UX design.
Don't change the url when people are clicking on the urls, but have a share icon for each element that is placed in the modal that pops up when clicking on it.
In this way, url stays the same while people are checking the elements, and you can still have specific urls for each element for people to point to a specific demo if they want.
I did a day course on UX, so call me an expert or not, but the general gist of UX is to listen to users. Since most users seem happier with updating the address but not adding to the back history, I would guess this is the best UX for the target audience of software developers.
I bought a usb 3.5" drive last year, just to have one, in case I need it... though I no longer have any floppy discs at all, and half my computers don't even have cd/dvd/br drives.
I keep a 5.25" drive and interface card in a plastic bag... just in case. Last time it was used was about 7yrs ago to migrate a friends data forward. Old skool for sure!
Thanks for your suggestion. I've considered adding a search/filter box, but I've decided that people can use Ctrl+f/Ctrl+g (assuming Chrome) in order to find items.
I might add it in the future though. It would be a nice feature really.
This is pretty cool, great job!
I know this is only a cheatsheet, which implies simple, but one idea that I think might be useful would be to add something to allow an end-user to resize the preview pane. This would allow more complete "previewing" of responsive items, eg. "navbar-toggleable-*" which collapses the a navbar down to a hamburger when the width is small.
As a person who doesn't understand a single thing about front-end, I really appreciate the existence of bootstrap, especially when I need to just put an OK looking dashboard together...
Agreed. The measure of usefulness is a signal of great thought, research and design thinking. Thankfully @mdo, did his homework and for that I commend him.
Exactly.
As a Django dev if all someone needs is a Wordpress site, I would recommend that to them (rather than try to recreate it from scratch). No point in reinventing the wheel. Can't designers have the same sort of objectivity?
I think this is the crux of people's issues with bootstrap -- it SHOULD be used by non-designers for things like dashboards and internal apps. But the poo-pooing comes when actual designers use it to be lazy and not actually design anything specific to the site's purpose.
So basically not issues with Bootstrap, but an avenue for people on the internet to feel superior to a group that I'm not even all that convinced exists in any real quantity.
The problem with Clojure is those developers that just copy and paste code off Stack Overflow. Clojure is just so darn composable that it probably really causes problems for people out there with those copy-cats on the loose!
My comment definitely didn't come off with my intended attitude. I am not looking down on anyone, and I think bootstrap's success speaks for itself.
Just observing what I see -- that nobody is making fun of people who use bootstrap for a dashboard interface or an app, rather the complaints against bootstrap I think revolve around seeing it used for marketing / informational / portfolio sites all over the place, thus resulting in a company or organization or person not really having a site designed with their own brand/personality/messaging in mind.
Don't understand why you're being downvoted. Good design for Company X does not necessarily reflect with what great design means for Bootstrap (I say this as a guy who almost never gets anything designed anymore). But it's a matter of budget reality for most people and companies that - it's really expensive to have competent developers AND competent designers for fledgling products. Perhaps there ought to be more money - and spread out better - in startups & product companies.
That and the collosal amount of testing bootstrap gets in the real world, it means you run into far fewer niggles and edge cases so you project a sense of precision even if the UI bit is a bit bland.
This. It really helped me to create a good looking prototype built with flask and duct tape and convince management that it is a tool we could build and use in the future.
I feel like bootstrap has become the jquery of css themes. People will launch into a lecture on "separation of concerns" when they see a style attribute in html or a ruby loop in an .erb template. Yet they litter their code with class="col-xs-4" without a second thought.
As someone who did a couple of front end jobs both building and fixing css built in this way I can give you one advice: don't.
This might seem like an obvious thing to generate cleaner and more 'semantic' markup but you will end up with tight coupling all over the place. When you change anything in your layout you'll need to rewrite parts of your css, which is basically twice the effort. You'll just end up wasting your employers time and money.
If you want some deeper insight into why it's considered a bad philosophy, I highly recommend reading some articles by Harry Roberts.
Then again, some succesful professionals actually work this way, I know a few.
But personally I find that to be much more of a pain in the butt to come back to a couple of months later than just applying the column classes directly to elements.
And then in case you want to change element size you will have to go through all the elements that were generated in the backend where you applied inline style and change that manually for each of them? You either have never worked with big CSS projects or I am just not understanding what you mean, applying inline styles directly to elements will cause a maintenance havoc in my opinion
Hey, that's totally your opinion, and when you pay me, that's what I'll do.
I don't recall saying anything about inline css though. To be specific, I'm saying that I prefer to have the column classes directly applied to the elements as opposed to using sass to include the column css to the semantic CSS classes of the elements.
I dunno what that has to do with applying a style attribute directly inline to an element.
I'll tell you what doe bug me, when I change the number of columns on my project, becasue that is coded directly into the elements, but honestly I've never had to do that very far into any project.
Yeah, that can be annoying to look at 5 or 6 classes-- it's certainly not semantic and it can be quite a pile. I use foundation and I feel like the class names are more aesthetically pleasing, but that's a really minor concern :D
But practically I find that it's less difficult to make layout changes this way-- I can just cut sections and paste them somewhere else and I don't have to look elsewhere for their actual layout rules. I find it much more difficult to untangle the grid system when I can look at the classes directly on the elements.
I say this having had to do it even for my own code quite a bit... I just find it a little more difficult to think out when I don't have the columns listed on the elements themselves.
I also find it faster when a coworker requests I shift an image down, to add style="position:relative;top:10px;" to adjust an image or div down a few pixels, than to find the style sheet (one of dozens nestled in various locations) and add it where it belongs.
See, although I can understand that impulse, if I'm working with anything that I'm ever going to look at again, inline styling is something that I won't do. If it works for you do, it but I hate messing with it :D
From what I recall css class names should be semantic because they're in the html code and should relate to the content and not to its current presentation. So class="col-xs-4" is unsemantic.
No, because they (the bootstrap people) can't know what your semantics are for the particular piece of HTML you are marking up. You might want to use 4 columns for a certain type of information in one place (Employee Data) and 4 columns for a different type of information in another place (Sales Figures) - the implementation of both is 4 columns, but the semantics would be "Employee Data" or "Sales Figures".
Does anyone else feel like Bootstrap 4 is just taking forever? It seems like Foundation turnaround time for rolling out new major versions of their frameworks is much smaller than bootstrap.
> "Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers."
Didn't they move to LESS for.. v2? I don't follow it that closely so I could be wrong but I was sure they made a move a few years ago for a major version?
They did but back then it was still a bit unclear who was going to emerge as the de-facto standard. They made the wrong choice, and now they're correcting it. Good on them for not sticking to their guns.
Sorry, my comment was probably a bit flippant, and I meant no disrespect to LESS as a technology or a choice. There's nothing wrong with LESS..
That said, the major CSS frameworks that I am familiar with (Foundation, Bootstrap, Bourbon, etc) all seem to be choosing SASS, so it feels like it is becoming the de-facto standard..
I'm sure there are lots of excellent and well-supported products that still use LESS though.
Is there a reason I can only generate buttons and navbars? Or is that the reason you said you 'started something'? Can you at least pop up an alert when I try to click on the other greyed out items? It's ambiguous why they don't work!
Yeah those are the only one I got to so far...as for the greyed out items, I've only been using this for myself but just started implementing features for others such as the getting started tips. I'll add your recommendation as well
yes please - this style buider is great for showing people the functionality in an experimental way that allows you to build a component with each set of functionality
Thanks, that's really why I made it, it was easier for me too. Even though I memorized all the classes, it's easier to just filter through a visual demo to test out the look and feel quickly.
This is great! One feature I would love, the ability to edit the markup in the left pane, see it "live" in the right pane, get it the way I like it, then copy.
This looks nice, I'm looking forwards to Bootstrap 4 though it seems to be running really late, iirc it was intended to be released Nov-2015 originally.
As someone who never bookmarks cheat sheets, this is one I'm going to save.
Many of the "API" changes in Bootstrap 4 are subtle class name differences, like using pull-<size>-right vs pull-right. I think your interactive examples are a lot more helpful for seeing this quickly vs. the official docs (and the official docs are pretty good too).
Thanks. I'm using Jekyll to generate my whole website, including the cheat sheet. So it's pretty much a DIY project on top of Jekyll, using jQuery on the front-end to move DOM elements around.
That's pretty cool. So for a new minor version of Bootstrap, you don't have to change any code?
Last night I stumbled upon the most interesting comment about static sites from an engineer at Netflix:
> When I was heading up reliability at Netflix, we considered, and even began evaluating, turing the whole thing into one big static site. Each user had a custom listing, but generating 60+ million static sites is a very parallelizeable problem.
> At the time, the recommendations only updated once a day, but an active user would have to dynamically load that content repeatedly, and at the same time, the recs were getting updated for users who hadn't visited that day. By switching to static, we could generate a new static site for you every time you watched something (which could change your recommendations), and increase reliability at the same time, so it would have been a much better customer experience. Unfortunately we couldn't get enough of the frontend engineers to buy into the idea to get it off the ground, and also they were already well along the path to having a data pipeline fast enough to update recs in real time.
Ok, thanks! I'll poke around the source and see which template you are using. If it's not open source, do you mind releasing it? We could work together and build a little template for documentation. It's too lovely to pass up. :)
I've answered a similar question [here](https://news.ycombinator.com/item?id=11542647). I'll consider release it at some point, but currently it's not open sourced. I'm flattered that you're interested in my source code though!
Thank you! I'm not planning a version for Bootstrap 2 and 3 at the moment simply because it's a lot of effort maintaining all the samples, so I wanted to focus all my effort on the upcoming version.
This is great, good job! One application of this interface is for companies to use it as a front-end style guide for their own site/web app. Just like people use bootstrap as the starting point for their front-end, and then customize fonts, size, color, etc. This could be a starting point for front-end/template user guides, which is why I was hoping I could simply fork this in github, customize it to our front-end rules and make it available internally so that all front-end coders use the exact same conventions. Thanks for making this available. Any plans to open-source the project?
I've used them both on big enterprise software products and they are six and one-half dozen to me. There is not a wrong choice, they both kickass in a lot of ways and have their own small frustrations and annoyances.
I haven't used Foundation as much, but both frameworks (BS4 and Foundation 6) are designed around Sass components that can be customized and recompiled. BS3 has a very good Sass port. Overall, both frameworks are bit opinionated, but very customizable. If you want complete flexibility, you can look at other Sass frameworks, such as Bourbon.
Foundation had the lead, but now I'm at the point where Bootstrap is 99% as good and more simple to set up, and if I really want the complexity that I used to use Foundation for I'll just use Bourbon + Neat.
It's not currently open source, but I will consider it in the future. Either in the state it is in or possibly some normalized scaffolding version to easily create a cheat sheet like this one.
In any case I would have to do some refactoring before feeling comfortable releasing the source code up for people to examine :-)
Well, don't over think it! I'm more just curious how something like this is done. I won't judge you over your source code! :P haha Thanks again, though, for putting this all together. It really is an awesome site/cheat sheet.
This is really cool. I'm wondering if people are using BS4 in production? I recently used BS3 because I saw that 4 was still in Alpha. Is it safe to use in production even though it's in alpha state?
I'm using it in prod for a site with roughly 200k request per minute. It has been great. We were on bootstrap 2 and doing significant changes where upgrading Bootstrap made sense. We've been live with it since December.
I think I prefer the original bootstrap documentation... having the TOC on the side to jump to various sections, and having a more real-estate to present ideas rather than just a small scope at a time...
very nice, this is extremely useful! thank you author! if i may -- any chance you could add page templates (with bs4 css/jq js from cdn)? even just a blank one would do.
(Moderators: Could you remove the #dropdown part from the URL please?)
Edit: The two post seem to have been merged by the moderators. Thanks!