8 ms·
Show HN: I made an interactive Bootstrap 4 cheat sheet
- txutxu 10y agoI simply can say: THANKS !!! A nice idea and execution. Bookmarked! Does versions of Bootstrap 2 and 3 exists or are planned?
- arechsteiner 10y agoThank 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.
- noir_lord 10y agoThis 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.
- emirozer 10y agoAs 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/ http://bootswatch.com/
- stronglikedan 10y agoAs a person who works in manufacturing, and only develops internal and B2B applications to automate processes, I'm right there with you.
- atom-morgan 10y agoDesigners who shit on everything looking like Bootstrap should read these two comments.
- smpetrey 10y agoAgreed. 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.
- jordanlev 10y agoI 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.
- danneu 10y agoSo 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!
- jordanlev 10y agoMy 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.
- codeisawesome 10y agoDon'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.
- joshmanders 10y agoAs 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.
- bryanlarsen 10y agoI'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.
- noir_lord 10y agoThat 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.
- sheeshkebab 10y agoAs 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)
- ahoka 10y agoThis. 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.
- tedmiston 10y agoA 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)#Origin https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework...
- matt4077 10y agoI 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.
- ThomPete 10y agoWhats the problem with that? Honest question.
- blaze33 10y agoFrom 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/ https://css-tricks.com/semantic-class-names/
- deleted 10y ago[deleted]
- ThomPete 10y agoCouldn't that be changed in the Bootstrap source code easily?
- bdavisx 10y agoNo, 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".
- k__ 10y agoI 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.
- arechsteiner 10y agoI 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!
- BafS 10y agoNice job, this is really handy !
- reustle 10y agoThis 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?
- arechsteiner 10y agoThanks 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.
- degenerate 10y agoThanks 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?
- arechsteiner 10y agoThanks. 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.
- asimuvPR 10y agoHow 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
- arechsteiner 10y agoThanks. 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.
- asimuvPR 10y agoOk, 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. :)
- arechsteiner 10y agoI've answered a similar question [here](https://news.ycombinator.com/item?id=11542647 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!
- tedmiston 10y agoThat'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 https://news.ycombinator.com/item?id=10491873
- stevoski 10y agoI like how fast and responsive it is.
- latortuga 10y agoLooks great, super useful! Can you possibly load it up with bootstrap 3?
- beardicus 10y agoMore discussion here: https://news.ycombinator.com/item?id=11541992 https://news.ycombinator.com/item?id=11541992 (posted 2 minutes prior to this one)
- dang 10y agoWe merged that discussion into this one, which was posted by the author.
- JoshGlazebrook 10y agoDoes 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.
- itsbits 10y agoit is expected as they are moving from LESS to SASS.
- strictnein 10y agoDidn't they make that move about 8 or 9 months ago? http://blog.getbootstrap.com/2015/08/19/bootstrap-4-alpha/ 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."
- stephenr 10y agoDidn'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?
- sbarre 10y agoThey 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.
- pointytrees 10y agoI'm still on less. Is there a memo somewhere to switch to sass?
- webXL 10y agoHere's your stinking memo: The grass is always greener on the other side of the street.
- deleted 10y ago[deleted]
- wslh 10y agoRight now, how does Bootstrap compare to Foundation?
- wmeredith 10y agoI'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.
- neovive 10y agoI 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.
- ukyrgf 10y agoFoundation 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.
- hndl 10y agoVery cool -- bookmarked for future projects.
- oliwarner 10y agoI envy the people who get to drop IE8 support.
- paulcole 10y agoThis is really great! I've always found the bootstrap docs thorough but intimidating. You've got a really simple, intuitive layout. Well done!
- AndrewVos 10y agoWeirdly, I used to own this domain name!
- deleted 10y ago[deleted]
- lsjadf 10y agoThis 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?
- bradly 10y agoI'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.
- bluetidepro 10y agoIs this project open source/on GitHub? I would love to see how you built this with Jekyll! :)
- arechsteiner 10y agoIt'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 :-)
- bluetidepro 10y agoWell, 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.
- xenihn 10y agoWould love to see the source for it (or eventual scaffolding). This really looks great.
- asimuvPR 10y agoLet others help too! It's the spirit of open source :)
- dopeboy 10y agoThis is great stuff. Beats scrolling and greping through their endless documentation.
- brainpool 10y agoThis is nice, thanks!
- m3andros 10y agoYou sir, are a genius! I've been looking for something like this. Thank you, thank you!
- bink-lynch 10y agoThis 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!
- urza 10y agoI came here, to say just the same.
- mangeletti 10y agoWow, 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.
- deleted 10y ago[deleted]
- kulesiii 10y agoCan I request to remove the jumbotron or replace it with something that will take less space? Thanks for sharing!
- oonny 10y agoThis 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?
- alanwatts 10y agoI too came back here looking for the git repo, would be very helpful to be able to fork this for my custom bootstrap themes
- rebnoob 10y agovery 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.
- underzen 10y agoNice job! Thanks, thanks, and more thanks!
- greenpizza13 10y agoThis is really great, thanks!
- baby 10y agoWhen was bootstrap 4 launched? I completely missed it. What's the difference with v3?
- noir_lord 10y agoIt 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.
- jordache 10y agoI 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...
- tedmiston 10y agoAs 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).
- kevinSuttle 10y agoThank you for the deep links.
- switchkiller 10y agoThis is very very amazing. This is what I wanted :D! Beautiful creation
- deusofnull 10y agoI really appreciate this... Wow. I love your UI choices. More documentation should be written like this instead of a monolith table of contents.
- hanniabu 10y agoI started something similar for Bootstrap 3, but more interactive so you can select different options for each type of element. https://hanniabu.com/Velcro https://hanniabu.com/Velcro Let me know if I should update to Bootstrap 4 and continue development. Feedback is welcome!
- pjvandehaar 10y agoVelco 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.
- hanniabu 10y agoGreat to know it's useful so far! I plan on continuing to add features
- degenerate 10y agoIs 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!
- hanniabu 10y agoYeah 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
- ckluis 10y agoyes 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
- 10y ago
- x13 10y agoThis is really useful. Does anyone know of a Materialize cheat sheet? (http://materializecss.com/ http://materializecss.com/)
- mqgh 10y agoawesome work. I like this, so easy to find the style.
- jrochkind1 10y agosuper useful. links from each section to the official docs on that element would be awfully nice.
- nathanboktae 10y agoAll this time you guys could learn CSS proper and define the design language that meets your site and needs appropriately... Sigh.
- deleted 10y ago[deleted]
- KayL 10y agoNice! Can you add a link back to official docs for advanced JS config.
- mjdude 10y agoThank you for sharing, this is very useful.
- nojvek 10y agoWould be nice to just go to http://bootstrapcheatsheet.com http://bootstrapcheatsheet.com The url is kind of hard to remember.
- rubyloidsof 10y agoThanks for that!