
Show HN: I made an interactive Bootstrap 4 cheat sheet - arechsteiner
http://hackerthemes.com/bootstrap-cheatsheet
======
arechsteiner
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!

~~~
degenerate
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?

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

~~~
whizzkid
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...](http://hackerthemes.com/bootstrap-
cheatsheet#dropdown-header") to clipboard and visiting this url pops up the
dropdown-header demo.

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

------
emirozer
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/](http://bootswatch.com/)

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

~~~
atom-morgan
Designers who shit on everything looking like Bootstrap should read these two
comments.

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

~~~
danneu
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!

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

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

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

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

~~~
usaphp
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

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

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

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

~~~
stephenr
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?

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

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

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

------
hanniabu
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](https://hanniabu.com/Velcro)

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

~~~
degenerate
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!

~~~
hanniabu
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

------
bink-lynch
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!

~~~
urza
I came here, to say just the same.

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

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

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

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

~~~
asimuvPR
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. :)

~~~
arechsteiner
I'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!

------
txutxu
I simply can say: THANKS !!!

A nice idea and execution. Bookmarked!

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

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

------
oonny
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?

~~~
alanwatts
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

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

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

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

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

------
wslh
Right now, how does Bootstrap compare to Foundation?

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

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

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

~~~
arechsteiner
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 :-)

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

~~~
stblack
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](https://github.com/arechsteiner?tab=repositories)

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

~~~
asimuvPR
Thanks for pointing it out.

------
nojvek
Would be nice to just go to
[http://bootstrapcheatsheet.com](http://bootstrapcheatsheet.com)

The url is kind of hard to remember.

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

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

------
lsjadf
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?

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

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

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

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

------
brainpool
This is nice, thanks!

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

------
oliwarner
I envy the people who get to drop IE8 support.

------
hndl
Very cool -- bookmarked for future projects.

------
underzen
Nice job! Thanks, thanks, and more thanks!

------
stevoski
I like how fast and responsive it is.

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

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

------
jrochkind1
super useful.

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

------
greenpizza13
This is really great, thanks!

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

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

------
mjdude
Thank you for sharing, this is very useful.

------
AndrewVos
Weirdly, I used to own this domain name!

------
kevinSuttle
Thank you for the deep links.

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

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

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

