Hacker News new | comments | ask | show | jobs | submit login
Show HN: I made an interactive Bootstrap 4 cheat sheet (hackerthemes.com)
847 points by arechsteiner on Apr 21, 2016 | hide | past | web | favorite | 161 comments



I made this! Thanks for sharing it. I'll be watching this thread for comments and feedback.

(Moderators: Could you remove the #dropdown part from the URL please?)

Edit: The two post seem to have been merged by the moderators. Thanks!


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?


Thanks. I've added right/left arrows to the to do list.

About the back button: Do other people feel the same way? This is by design, but I'm open to change this behavior if people would prefer it.


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.


Yeah, get rid of historystate. It's annoying.


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.


It's fine by me and expected behavior. Nice job - very useful.


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.


Yes. Always. You'll find hijacking the back button is one of the most frequent first/top complaints in HN threads. :)


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 agree the on back button. To me this is a page. When I push back I expect to return to the previous page not a different view of the same page.

That being said, this is really awesome work and will certainly come in handy! Nice job.


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.

Share icon copies the url e.g "http://hackerthemes.com/bootstrap-cheatsheet#dropdown-header... to clipboard and visiting this url pops up the dropdown-header demo.


using replaceState instead of pushState will keep the address bar updated without interfering with the back button


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.


Use good old `window.location.replace(...)` - things will still be bookmarkable, but won't clutter history.


I bet you remember cassettes.


Why? Whyyy? You just made me lookup old 5.25" floppy games.


You got a floppy drive? I'm jealous. No pencil required :-)


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!


> Do other people feel the same way?

I find the back button as you implemented it handy.


Yea, I felt the same what parent mentioned.


This is awesome! Can I request a search box at the top that lets me quick-search for something, and then hit tab or enter to "jump" to that one?


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.

Once again though, nice work! :)


Thanks a lot for this! You're going to heaven!


Nice job man, this will save me a lot of time on-boarding people.


This is great!

Feature request: When a component pane(code snippet + preview) is open, allow escape key to close the pane.

Is this code open source? Would be happy to submit a PR for this feature if it is.


Feature request!:

Add a text field to filter the lists of lists. using something like typeaheadjs - https://github.com/twitter/typeahead.js/blob/master/doc/bloo...


Is there a use case you have that Cmd-F doesn't already cover?


This will serve as a great reference guide for me. Thanks for taking your time to build this.


very cool, I am excited to use version 4 when the official release comes out. I am always cautious to jump on an alpha release.

What is your sense of file sizes under version 4 compared to version 3?


This is awesome. This reminds me of some of the features that are integrated into Kite. This is available now though! Great work.


bookmarked! as a "non developer", this is super helpful when i'm putting together quick landing pages!


This is really great work, thank you!


Nice job, this is really handy !


Not sure how I feel about this. I do want a higher have score


Mod: it would be good to fix the capital "S" too.


Very cool, thank you!


Excellent work!


Well done sir!


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

PS: for the sake of sharing http://bootswatch.com/


As a person who works in manufacturing, and only develops internal and B2B applications to automate processes, I'm right there with you.


Designers who shit on everything looking like Bootstrap should read these two comments.


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.


As a person who builds apps for customers who don't care about flashiness and only want a working useful app. I'm right there with you.


I've gotten compliments from customers on how good my bog standard bootstrap sites look.

Having websites look and feel similar to other familiar sites is a good thing.


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.


As a full stack dev that doesn't really have time to deal with CSS, I'm really glad bootstrap exists (and things like wrapbootstrap.com)


A lot of people forget that Bootstrap was created to make internal apps for exactly the use case you and the parent comment pointed out.

https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework...


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.


I heard it can be used differently.

Select your elements with SASS and let this selector inherit the style of a Bootstrap class.

    body > div > div {
      @extend .col-xs-4;
    }
But I never tried to use it that way.


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.


Well, typically it's more like:

.home { .twitter-area { @include grid-column(4); } }

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.


Same here.

But it somehow hurts to look at the markup later, with all the classes, etc.


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 do. It's great. It's the best grid IMO. Here's all you need:

  @import 'bootstrap/variables';
  @import 'bootstrap/normalize';
  @import "bootstrap/mixins/clearfix";
  @import "bootstrap/mixins/grid";
  @import "bootstrap/mixins/grid-framework";
and then you can insert it:

    article {
        @include make-sm-column(5);
        @include make-sm-column-offset(1);
        @include make-xs-column(6);
    }


I (try) to use it this way wherever practicable. There are caveats and gotchas but in general it works as expected.


Nice to know.

I just found it faster to add the classes directly to the HTML.

But I will check how this would work with Babel+WebPack+React in the future.

I can import SASS files in JS, but they would have to be merged with the Bootstrap SASS etc.


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


That's exactly why I used Bourbon over Bootstrap.

http://bourbon.io/


HTML is markup and that class name is a declarative way of saying "this is 4 columns wide on phone sized screens".

I don't see the problem.


Whats the problem with that? Honest question.


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.

Just searched for "semantic name" and found this article from 2011 that explain the subject quite well: https://css-tricks.com/semantic-class-names/


Couldn't that be changed in the Bootstrap source code easily?


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.


it is expected as they are moving from LESS to SASS.


Didn't they make that move about 8 or 9 months ago? http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/

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


I'm still on less. Is there a memo somewhere to switch to sass?


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.


Here's your stinking memo: The grass is always greener on the other side of the street.


Same.


I started something similar for Bootstrap 3, but more interactive so you can select different options for each type of element.

https://hanniabu.com/Velcro

Let me know if I should update to Bootstrap 4 and continue development. Feedback is welcome!


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


Velco is wonderful– thanks for making it. Buttons are pretty easy, but that's a really convenient (and fun!) way to build a navbar.

I don't see the point of supporting something that's in alpha– it's just going to change, and people shouldn't be using it yet.


Great to know it's useful so far! I plan on continuing to add features


Very interesting, provide a newsletter allow me to get informed once it's ready :)


Will do!


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.

Nice work!


I came here, to say just the same.


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.

I really want the flexbox support.


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


How did you build it? Aside from using bootstrap itself, did you use any kind of tool for the docs? I really dig the style! :D


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.

from https://news.ycombinator.com/item?id=10491873


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!


I simply can say: THANKS !!!

A nice idea and execution. Bookmarked!

Does versions of Bootstrap 2 and 3 exists or are planned?


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 too came back here looking for the git repo, would be very helpful to be able to fork this for my custom bootstrap themes


Looks great, super useful! Can you possibly load it up with bootstrap 3?


Wow, this is really great.

I think Bootstrap 4's documentation is even harder to navigate than Bootstrap 3's. It's very frustrating, but this cheat sheet will help a lot.


This is really great! I've always found the bootstrap docs thorough but intimidating. You've got a really simple, intuitive layout. Well done!


I really appreciate this... Wow. I love your UI choices. More documentation should be written like this instead of a monolith table of contents.


Right now, how does Bootstrap compare to Foundation?


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.


Can I request to remove the jumbotron or replace it with something that will take less space? Thanks for sharing!


Is this project open source/on GitHub? I would love to see how you built this with Jekyll! :)


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.


Would love to see the source for it (or eventual scaffolding). This really looks great.


Let others help too! It's the spirit of open source :)


As of right now, Alexander has all of 1-star on Github, and that's on a forked repo.

https://github.com/arechsteiner?tab=repositories

I think he may need help grokking the whole concept :-)


Thanks for pointing it out.


What did you use to implement the copy to clipboard feature?


Would be nice to just go to http://bootstrapcheatsheet.com

The url is kind of hard to remember.


You sir, are a genius! I've been looking for something like this. Thank you, thank you!


This is great stuff. Beats scrolling and greping through their endless documentation.


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


This is very very amazing. This is what I wanted :D! Beautiful creation


This is really useful. Does anyone know of a Materialize cheat sheet? (http://materializecss.com/)


This is nice, thanks!


All this time you guys could learn CSS proper and define the design language that meets your site and needs appropriately... Sigh.


I envy the people who get to drop IE8 support.


Very cool -- bookmarked for future projects.


Nice job! Thanks, thanks, and more thanks!


I like how fast and responsive it is.


When was bootstrap 4 launched? I completely missed it. What's the difference with v3?


It hasn't, it's still in Alpha (release 2), based on past releases it could be months or the end of the year before it launches.


super useful.

links from each section to the official docs on that element would be awfully nice.


This is really great, thanks!


Nice! Can you add a link back to official docs for advanced JS config.


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.


Thank you for sharing, this is very useful.


Weirdly, I used to own this domain name!


Thank you for the deep links.


awesome work. I like this, so easy to find the style.


More discussion here: https://news.ycombinator.com/item?id=11541992 (posted 2 minutes prior to this one)


We merged that discussion into this one, which was posted by the author.




Guidelines | FAQ | Support | API | Security | Lists | Bookmarklet | Legal | Apply to YC | Contact

Search: