6 ms·

Its not just that, but due to the difficulties of getting CSS to do what you want, it seems standard practice now has everyone using JS for basic layout/update

Its not just that, but due to the difficulties of getting CSS to do what you want, it seems standard practice now has everyone using JS for basic layout/update tasks. Back when I was doing a lot of web development getting something sitting in the right place with CSS frequently took me much longer than just writing a bit of JS to adjust the size/position, but the results with CSS were much faster to respond.

the_duke 8y ago
The big challenge for this are different screen layouts. Mobile + desktop support is basically a hard requirement. A tablet-optimized version is nice to have. This gets very hard to do well with just CSS.
- superkuh 8y ago
  Or you could just not care about mobile's inadequacies. That's one of the joys of making personal websites. You get to do what you want not what's required to make the most money.
- subbz 8y ago
  Not true. Check out CSS media queries.
  - pasta 8y ago
    And grid for repositioning blocks
  - H1Supreme 8y ago
    I'll second this. FlexBox + CSS Grid with the appropriate media queries can handle just about every layout configuration you can throw at it.
  - Beldin 8y ago
    When i checked those, searching uncovered statements that most smart phones are lying. Which would explain why my tests never worked in my phone. Maybe I've been led astray, but from what i gathered about a year ago, media queries cannot distinguish between desktop and phone, you need JS to do this. Please tell me I'm wrong about that (at least, if you give me a hint on how to do it).
    - craigzucchini 8y ago
      You're right, but often your problem is better served by a different strategy, because doing web design based on device type is kind of unsustainable.
    - aykutcan 8y ago
      you are right. Css media queries are for viewport's resolution and some simple "media" types. Device type determination requires calculations on string (user agent). you cannot determine what devices are with css only. But a backend can. You can divide your app and serve seperate designs by user agent etc.
    - tobyhinloopen 8y ago
      Media queries combined with the viewport meta-tag solves your problem. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Using that meta-tag, phones will respond to media queries around 240-360 pixels, depending on their screen size. I like to use bootstrap to not be bothered with media queries myself. But I only use small parts from bootstrap, and I opt-in/opt-out from specific parts by removing/adding includes to specific modules from bootstrap. (you can do that with the LESS or SASS version of the package, copy the generic "imports" file, and comment-out everything you don't want/need) Bootstrap includes many sane defaults and some fixes for weird browsers. By choosing what to include and what not to include, I can choose whether I want bootstrap's opinionated styles or my own, and I can switch later (start out with bootstrap forms, customise them later & finally remove bootstrap form styles)
- StillBored 8y ago
  Yes, we were targeting mobile/tablet devices at the time too (well bolting on to existing code base). For example, the CSS to dynamically swap between a side menu and hamburger button wasn't complex (as well as a few other layout changes we made based on screen size), but getting everything to resize properly had a significant/constant overhead during development. Mostly because any given solution took hours to work out. The alternative of feeding separate style sheets makes it easier to develop, but much harder to test even with the responsive design buttons in ff/chrome. That is probably also why I haven't seen many web apps that try to do everything with a single set of CSS pages recently.
  - nothis 8y ago
    So is it time for "CSS libraries" (pls no, though)?
    - WorldMaker 8y ago
      Why do you think so many developers use things like Bootstrap, Foundation, Bourbon, Bulma, etc as starting points and languages like LESS and SASS to keep it modular/readable/maintainable? We've had CSS libraries and frameworks for years now.
- sergiosgc 8y ago
  > This gets very hard to do well with just CSS. This was once true, but not anymore. Grid and flex coupled with media queries solve this problem almost perfectly.
chrisweekly 8y ago
I hear you about CSS historically being a PITA. In my experience (web-related dev and arch since 1998), modern tooling, CSS-in-JS and component-based UI makes the DX so much nicer than it's ever been. My current project uses react, emotion, tailwind, autoprefix and postcss, and it's intuitive and efficient.
the8472 8y ago
CSS is easy to use today in comparison to what we had 10 years ago (float based grids, clear fixes, arcane margin collapsing rules). And yet sites managed to do their layout without requiring a javascript framework.

the_duke 8y ago

The big challenge for this are different screen layouts. Mobile + desktop support is basically a hard requirement. A tablet-optimized version is nice to have. This gets very hard to do well with just CSS.

superkuh 8y ago
Or you could just not care about mobile's inadequacies. That's one of the joys of making personal websites. You get to do what you want not what's required to make the most money.
subbz 8y ago
Not true. Check out CSS media queries.
- pasta 8y ago
  And grid for repositioning blocks
- H1Supreme 8y ago
  I'll second this. FlexBox + CSS Grid with the appropriate media queries can handle just about every layout configuration you can throw at it.
- Beldin 8y ago
  When i checked those, searching uncovered statements that most smart phones are lying. Which would explain why my tests never worked in my phone. Maybe I've been led astray, but from what i gathered about a year ago, media queries cannot distinguish between desktop and phone, you need JS to do this. Please tell me I'm wrong about that (at least, if you give me a hint on how to do it).
  - craigzucchini 8y ago
    You're right, but often your problem is better served by a different strategy, because doing web design based on device type is kind of unsustainable.
  - aykutcan 8y ago
    you are right. Css media queries are for viewport's resolution and some simple "media" types. Device type determination requires calculations on string (user agent). you cannot determine what devices are with css only. But a backend can. You can divide your app and serve seperate designs by user agent etc.
  - tobyhinloopen 8y ago
    Media queries combined with the viewport meta-tag solves your problem. <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> Using that meta-tag, phones will respond to media queries around 240-360 pixels, depending on their screen size. I like to use bootstrap to not be bothered with media queries myself. But I only use small parts from bootstrap, and I opt-in/opt-out from specific parts by removing/adding includes to specific modules from bootstrap. (you can do that with the LESS or SASS version of the package, copy the generic "imports" file, and comment-out everything you don't want/need) Bootstrap includes many sane defaults and some fixes for weird browsers. By choosing what to include and what not to include, I can choose whether I want bootstrap's opinionated styles or my own, and I can switch later (start out with bootstrap forms, customise them later & finally remove bootstrap form styles)
StillBored 8y ago
Yes, we were targeting mobile/tablet devices at the time too (well bolting on to existing code base). For example, the CSS to dynamically swap between a side menu and hamburger button wasn't complex (as well as a few other layout changes we made based on screen size), but getting everything to resize properly had a significant/constant overhead during development. Mostly because any given solution took hours to work out. The alternative of feeding separate style sheets makes it easier to develop, but much harder to test even with the responsive design buttons in ff/chrome. That is probably also why I haven't seen many web apps that try to do everything with a single set of CSS pages recently.
- nothis 8y ago
  So is it time for "CSS libraries" (pls no, though)?
  - WorldMaker 8y ago
    Why do you think so many developers use things like Bootstrap, Foundation, Bourbon, Bulma, etc as starting points and languages like LESS and SASS to keep it modular/readable/maintainable? We've had CSS libraries and frameworks for years now.
sergiosgc 8y ago
> This gets very hard to do well with just CSS. This was once true, but not anymore. Grid and flex coupled with media queries solve this problem almost perfectly.

chrisweekly 8y ago

I hear you about CSS historically being a PITA. In my experience (web-related dev and arch since 1998), modern tooling, CSS-in-JS and component-based UI makes the DX so much nicer than it's ever been. My current project uses react, emotion, tailwind, autoprefix and postcss, and it's intuitive and efficient.

the8472 8y ago

CSS is easy to use today in comparison to what we had 10 years ago (float based grids, clear fixes, arcane margin collapsing rules). And yet sites managed to do their layout without requiring a javascript framework.