Show HN: I made an interactive Bootstrap 4 cheat sheet(hackerthemes.com) |
Show HN: I made an interactive Bootstrap 4 cheat sheet(hackerthemes.com) |
links from each section to the official docs on that element would be awfully nice.
(Moderators: Could you remove the #dropdown part from the URL please?)
Edit: The two post seem to have been merged by the moderators. Thanks!
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?
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.
I might add it in the future though. It would be a nice feature really.
Once again though, nice work! :)
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.
Add a text field to filter the lists of lists. using something like typeaheadjs - https://github.com/twitter/typeahead.js/blob/master/doc/bloo...
What is your sense of file sizes under version 4 compared to version 3?
PS: for the sake of sharing http://bootswatch.com/
https://en.wikipedia.org/wiki/Bootstrap_(front-end_framework...
> "Moved from Less to Sass. Bootstrap now compiles faster than ever thanks to Libsass, and we join an increasingly large community of Sass developers."
Let me know if I should update to Bootstrap 4 and continue development. Feedback is welcome!
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.
Nice work!
I really want the flexbox support.
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).
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.
A nice idea and execution. Bookmarked!
Does versions of Bootstrap 2 and 3 exists or are planned?
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.
In any case I would have to do some refactoring before feeling comfortable releasing the source code up for people to examine :-)
The url is kind of hard to remember.
Select your elements with SASS and let this selector inherit the style of a Bootstrap class.
body > div > div {
@extend .col-xs-4;
}
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.
.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.
@import 'bootstrap/variables';
@import 'bootstrap/normalize';
@import "bootstrap/mixins/clearfix";
@import "bootstrap/mixins/grid";
@import "bootstrap/mixins/grid-framework";
article {
@include make-sm-column(5);
@include make-sm-column-offset(1);
@include make-xs-column(6);
}I don't see the problem.
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://github.com/arechsteiner?tab=repositories
I think he may need help grokking the whole concept :-)
Having websites look and feel similar to other familiar sites is a good thing.
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.
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.
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!
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.
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.
But it somehow hurts to look at the markup later, with all the classes, etc.
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.
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.
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'm on my phone though so it's possible there's some alternate navigation on widescreen layouts that I'm not seeing).
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.
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.
That being said, this is really awesome work and will certainly come in handy! Nice job.
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.
I find the back button as you implemented it handy.