Show HN: Flexbox.io – a free video series on learning CSS Flexbox | Hacker News Reader

Show HN: Flexbox.io – a free video series on learning CSS Flexbox

flexbox.io

236 pointswesbos57 comments

Awesome stuff.

I can't wait for Flexbox wide-spread adoption - especially in popular frameworks. It's too bad so many people are forced to not be able to use it because of IE9's total lack of support [1]. TBH, I'm not even sure if there's a good polyfill for it.

Dimitar Stojanov (@justd100) wrote a super kick-ass write-up on scotch.io covering basically everything there is on Flexbox [2]. It's probably much quicker than 20 videos, has an amazing interactive demo, been shared over 2.4k times, and is probably the best write-up on Flexbox I've read (I'm obviously biased though).

[1] http://caniuse.com/#feat=flexbox

[2] https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-p...

Thankfully, as of January only Vista users will still be on IE9 (well, in a supported manner).

I love consulting for enterprises due to the stability and large amounts of data but I still run into a lot of IE7/IE8. It is depressing.

As of now, and most likely the next couple of years, I'm stuck needing to support IE8 as as first class citizen in my designs at my day job, unfortunately. We have put our foot down about the remaining IE6 installs one of our clients (a large bank) apparently has though, so that much is good...

In personal projects I can afford to be more fussy and only support recent browsers, but in the day job these things are beyond my control even if they seem to be beyond good reason.

Of course flexbox is for the most part a display issue - as long as your layout changing in an older browser that doesn't support it doesn't break your application (by stopping features being accessible or by making it ugly enough to fail UAT) you can still use it (with care) even if needing to support legacy user agents.

Yep. Flexbox is maybe the best development to happen to CSS in a decade. Makes layouts that were once impossible without JS into trivial three-lines-of-css solutions.

I recently open-sourced a pattern-library/framework that uses mainly FlexBox to arrange/layout items: http://bowlingx.github.io/flexcss/. FlexBox for me was especially useful for big forms while using less markup.

Wow, this looks really nice – I'm going to have to try FlexCSS for my next side project. Thanks for sharing!

Thanks for releasing this! Very helpful, and the code is a pleasure to read.

thanks :) you're welcome, I will extend FlexCss in the next month and add more documentation!

I really do appreciate the effort you put into these videos, and I definitely understand you want something out of this as well but the user experience of having to go through your site instead of a link to a youtube playlist does put me off quite a bit.

Either way, the first few videos I've watched so far are great, thanks.

Seconded, i entered two mails now and still havn't gotten a link.

I'm a big fan of Wes' and don't want to mess up what he's doing, but as a clue.. the URLs for the preview graphics of each video contain each video's YouTube ID :)

I'm not sure how much views get lost, but I wonder is it worth it? There is a short video as introduction which doesn't tell much, I'd much prefer a random video from the series.

Now by making these private, no one will find this from youtube, other sites won't link it and there is no playlist so I will have to click each url every 5 minutes or so, which is not the end of the world, but not fun.

He could have asked for my email for the project files(videos and project files get sent to your email currently as I understand it), and gave videos for free. Anyone actually interested in this would definitely give their email for the files. If he wants my email to teach me something else later -- or sell me something, I think someone who entered their mail while watching the series will be more interested in what he could use the emails for, and now he won't be able to reach these kinds of people from random views, in exchange for the initial email count.

I don't think this is a nice deal, but I have no data, so just an opinion. Maybe something to consider.

Valid points but having an email is much better to stay in touch in the future. If you don't like that - use mailinator- totally understandable

I'll publish the playlist in a week but for now I'm doing it only on the site.

Are there any examples around of combining Bootstrap and Flexbox; i.e. relying on Flexbox for layout and NOT using Bootstrap's grid, but using Bootstrap's other components... is that practical without a significant rewrite of Bootstrap (i.e. do the component styles make lots of assumptions about being sited within the Bootstrap grid).

I added flexbox in certain areas of a bootstrap site to cleanly show varying size thumbnails in a grid. (Probably uglier than necessary.)

  .row-flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row wrap;
    -moz-flex-flow: row wrap;
    -ms-flex-wrap: wrap;
    flex-flow: row wrap;
    align-content: flex-start;
    -ms-flex: 0;
    flex: 0;
  }

  <div class="row row-flex">
    <div class="col-md-2"></div>
    ...
  </div>

Flexbox makes web development bearable. I use it for all my new work. Telling clients they must have IE11, Chrome, or Firefox ceased to be an issue many moons ago. It means you can also drop bloated frameworks like Bootstrap (and JQuery for that matter).

Why he did not give a simple link to youtube playlist?

Why I need to give him my email? Spam? Ads? Gonna sell them? If not, then it's only an inconvenience for him and for us.

20 seems like too many....

It really does. The most helpful resource I found for Flexbox is a cheatsheet from css-tricks.com.

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

That was helpful for me too. I also found Flexy Boxes to be useful: http://the-echoplex.net/flexyboxes/

This one from Philip Walton is quite handy too: https://philipwalton.github.io/solved-by-flexbox/ (The six examples in the showcase are all very common problems, and well-solved with Flexbox.)

yeah this is my go to when I can't remember some little part of the flex box spec.

Maybe they are really short. 30 seconds * 20 => 10 minutes, which seems reasonable.

I was curious as well so took a look at the durations. This is over 2.5 hours of content. About a layout system. I have to agree with another commenter, either this is far too much content or what should be a pretty simple layout system is insanely complicated.

If you're unwilling to spend two and a half hours learning flexbox, you're asking for a bad time with CSS in general. The flexbox spec alone is about 18,000 words long, which is about an hour and a half reading time for most people, to say nothing of comprehension or grasping the nuanced details.

One could spend a lifetime learning the geometries of grid systems, so 2.5 hours seems pretty reasonable to me.

Except you haven't learned much after watching those two and a half hours. I would argue reading this [1] or this [2], while simultaneously mocking up a flexbox grid will give you at least the same amount of knowledge in much less time.

[1] https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...

[2] https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Lynda.com would be screwed if people knew they could just crack open some reference material instead of wasting away in front of friendly introductory videos where another human eases them into a new subject!

I generally agree that reading is a lot more efficient but some people have different learning styles and videos work a lot better for them. There's also (bad) university lectures that are essentially just the textbook in lecture form without much extra benefit. I've always wondered why people bothered attending these since I'm a "book learner". I've had a couple of long talks on the topic and now understand that some people simply learn better with audio. Unfortunately for them it's less convenient than reading (time wise, quick reference etc.) but it's still good to have the option.

Engineers who think layout is a simple problem are the reason most applications suck.

Creating a layout is not a simple problem, but implementing it is. The reason 'most applications suck' is more likely because of the designer (or lack thereof).

It's a lot, but it's mostly ordered by importance so if you only need to know the basics, you could easily watch the first few videos and be happy with that until you need the rest someday.

So now I'm wondering: is it too much or did "the web" fail yet again to deliver a simple CSS/layout solution?

For what it's worth, I watched the first of these a couple years ago when they first came out, and I've been waiting for the rest ever since. None of the one-page flexbox tutorials on the web really do the technology justice.

They are short videos - you can watch them all or just reference the specific thing you need clarity on!

Constructive criticism. You don't mention in the video what a flexbox is :)

Granted, googling flexbox is easy but I'd add a quick blurb in 10-20 seconds telling those who don't know me<--- what they are first.

BTW: I will definitely check out the videos!

This is great! Ever since our company quit supporting IE9, I've had the joy of working with flexbox. What once took 10-20 lines of Sass hackery now takes only a few, and the code makes sense.

Hey, I'm unable to sign up using an email in the form of: username+filter@gmail.com

I get a message after submitting saying check your inbox, but I haven't received any messages (checked All mail and Spam folders).

Is this an intentional decision or shortcoming based on some email service?

Not intentional at all - most sign ups do this.

Most are getting the email but I am getting hammered.

Shoot me an email? wesbos@gmail.com

Hey, just saw your response a few minutes ago, and shortly thereafter I received a message from your service.

Thanks!!

Things have changed since I was doing frontend dev (<table>), and I want to brush up on modern CSS techniques. Could someone answer the following for me?

1. Is flexbox the way to go (i.e. the new standard?)

2. Is there a css primer to help with all this? I tried centering a div with CSS once, it didn't end well!

1) Yes. 2) This is a pretty nice short intro http://flexboxin5.com or for a fuller treatment check MDN, as for any other web technology. There are a bunch of other sources linked from this discussion thread if you scroll down a bit.

Thanks! So it will be enough to learn just flexbox without any "legacy" css? (Assume I won't be maintaining / porting any old code)

Erm.. flexbox is just one part of CSS, useful for a particular subset of layout tasks. CSS has many other parts you need to learn if you want to style web pages.

Aah I see. You can tell my frontend knowledge is dire! I'll start on the basics first

I think everything related to layout can be made with flexbox (e.g. you can avoid doing ugly tricks with tables, blocks, floats, calc(), calculating percentages, etc), but you still need the usual style for text, size of images, borders, backgrounds...

Essentially, it avoids the "I FSCKING HATE CSS" parts.

it looks like it'll become the next standard yes. but support isn't there yet.

http://caniuse.com/#feat=flexbox

http://howtocenterincss.com/

93.99% is more than "support isn't there yet", in my opinion. Enough for many projects at least. Obviously if you develop sites with a big IE8/9 audience you should think twice.

I learned flexboxes from flexboxin5.com and use it wherever I can now. I love it! my only gripe is safari needing the vendor prefixes. I don't know what IE does - but i only care about real browsers anyway.

Simple suggestion: add subtitles. For non-native viewers it is a really nice addition.

Is there a way to see these videos without getting spam?

I have subscribed with my email address but got no link to the videos as described in the site. Am I the only one?

bookmarked, will be going through these tutorial, especially since CSS has never been a strong point for me as I've always focused on the backend. It always filled me with envy when people seem to have the entire CSS memorized and can create sexy UI out of thin air.

now is flexbox supported widely or is this still ongoing thing?

The only gotcha is IE9 - but most people are either on IE8 or IE11 - so not really an issue anymore. In 6 months to a year, support will be wide spread - so now it's time to start learning!

That and React Native is using Flexbox to layout their apps too!

Thanks but no thanks to any and all instructional videos.

Especially when there are pages like this: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexi...

They should rename it to "a simple 20 video course on how to slow your computer down to a halt" /irony

Reply on news.ycombinator.com