Ask HN: No-Framework Responsive Design? | Hacker News Reader

Ask HN: No-Framework Responsive Design?

1 pointmanifoldgeo5 comments

TL;DR: Any suggestions for learning responsive web design without any special frameworks?

I’m a python SW engineer with a basic understanding of HTML, CSS, and JS, and I’m looking to learn responsive design. I’ve seen JS frameworks come and go so quickly that I’d like to buckle down and learn more fundamentals of CSS and vanilla JS that don’t involve SPA frameworks, React, Angular, SCSS, etc.

I’ve used Bootstrap with Flask, but Bootstrap doesn’t offer enough control for my liking.

So, I’m trying to seek out any learning resources that don’t rely heavily on a superset of JS or CSS and instead focus heavily on web standards that work across browsers and platforms.

I’ve seen MDN and W3Schools, but those are mostly a string of disconnected docs. I was hoping for a more cohesive course or book / video series.

Any suggestions welcome, and if I’m going about this the wrong way, don’t hesitate to tell me.

If you mean responsive design as in pages that work on mobile and desktop views and change based on the size of the screen.

There's not a single solid answer along the lines of web standards as there's really not a web standard for how to DO responsive design. ... welcome to the land of front end development, where everything has 20 answers and none answers your question exactly... ;) Everyone will now probably point you towards more general CSS courses, and now I will too ;)

You've gotten a taste of being responsive with Bootstrap, with columns collapsing on top of each other at various breakpoints. Honestly IMO if you don't want to go down the rabbit hole, a good CSS framework like Bootstrap (or others) will fit the needs of most folks as far as responsive layout goes.

Otherwise responsive design isn't just layout changing with size, it can also be loading different images (smaller sized images if the screen is small) and etc. Then you're well into various CSS topics.

I suggest looking into more general CSS topics / courses that cover responsive design.

I really like https://frontendmasters.com/, they might not have a class just for what you're looking for, but there are some that cover much of what you're asking:

https://frontendmasters.com/courses/css-grids-flexbox/

Frontend Masters ended up being _exactly_ what I was looking for! I am super impressed with their content, and I just signed up. Thank you!

> don’t rely heavily on a superset of JS or CSS and instead focus heavily on web standards that work across browsers and platforms

Worth keeping in mind that this is not really the dichotomy. The supersets of JS and CSS do work across browsers and platforms, because they are compiled down to JS and CSS.

If you're just wondering what to do to learn responsive design, first step would just be to read docs for the @media query [1]. Also, learn flexbox. Maybe you will want to learn some of the other new CSS constructs (grid, columns) if you don't care too much about backwards compatibility.

If you've done all that and still want to learn more, next step would probably be to deconstruct an existing library like Bootstrap or something that targets the platforms you want to.

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

Rachel Agnew is a great resource for learning modern css and the things it's capable of. A good start is probably these slides on 'The Evolution of Responsive Design' - https://noti.st/rachelandrew/4AtjON#spytgfW which also lists a few other resources (including this article: https://alistapart.com/article/responsive-web-design)

Flexbox froggy https://flexboxfroggy.com/ is a good learning game for understanding flexbox

And Grid Garden https://cssgridgarden.com/ does the same for css grids.

Understanding both those is pretty core to understanding modern responsive design.

Just search for flexbox tutorials. Flexbox is a collection of concise CSS attributes that make responsive layouts very easy.

Reply on news.ycombinator.com