#notes 30

https://jbrio.net/posts/notes-30/
#superconductor #flexbox

How to create a #responsive grid system with #CSS #Grid | Go Make Things

https://gomakethings.com/how-to-create-a-responsive-grid-system-with-css-grid/

> I recently updated the grid system on my site from #Flexbox to CSS Grid. Today, I wanted to share how to use it, how it works under-the-hood, and why I made the switch. Let’s dig in! A responsive grid system My websites tend to be pretty boring. Years ago, I decided to prioritize simple readability over flashy features, and that seems to resonate with a lot of people.

And @rachelandrew was right: being able to refer to #grid makes some aspects of #flexbox much easier to explain.

Now working on the #css #flexbox chapter that I wrote in April or so. It needs to be revised a bit, mostly to make the topic order flow more logically.

Whenever I need to work with flexbox, I use this amazing resource 😊 https://css-tricks.com/snippets/css/a-guide-to-flexbox/ #css #flexbox

If you're someone who frequently forgets about CSS flex properties like me, you might find this VS Code extension helpful.

Name: CSS Flexbox Cheatsheet
Description: Open a flexbox cheatsheet directly in VS Code.
Version: 3.3.1
Publisher: Dzhavat Ushev
VS Marketplace Link: https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet

#css #flex #devFront #FrontEnd #devFrontEnd #developper #tech #flexbox #vscode

I'm quite a FrontEndDev rookie.

So if anyone wants to give constructive criticism, I'll be happy to enrich my knowledge.
https://codepen.io/carlogr/pen/YzJgbOa?editors=1100

I tried to make a navbar menu wit flexbox which takes the full 90vw on mobile, but keeps itself right-aligned with a 2.5em gap from tablet to desktop, but...
avoiding queries, hamburger/kebab hidden menus.

So, when mobile, it should behave as if justify-content: space-between; was declared under 600/650px of vw.

#flexbox #navbar #menu #css

I'm quite a FrontEndDev rookie.

So if anyone wants to give constructive criticism, I'll be happy to enrich my knowledge.
https://codepen.io/carlogr/pen/YzJgbOa?editors=1100

I tried to make a navbar menu wit flexbox which takes the full 90vw on mobile, but keeps itself right-aligned with a 2.5em gap from tablet to desktop, but...
avoiding queries, hamburger/kebab hidden menus.

So, when mobile, it should behave as if justify-content: space-between; was declared under 600/650px of vw.
#flexbox #navbar #menu #css

... and with the writing of the final example the #flexbox chapter is really done - in draft.

One more edit and I'm happy for now. Then His Tabness can go over it, and my publisher's editor as well, and then we'll see.

So there is an #a11y problem with #flexbox order.

It hasn't been solved, right? Have any suggestions for solving it been made?

I didn't look at this problem in 20 months or so, and stuff may have changed.

Responsive Yearly Calendar with #Flexbox #CSS

https://shkspr.mobi/blog/2023/04/responsive-yearly-calendar-with-flexbox/

via @Edent

Temporarily withdrew from #btconf to lie down for half an hour and do some thinking on #flexbox and aspect-ratio.

today..
Marie learns #flexbox so she can make her website a lot better with it's upcoming rewrite
(originally I wanted to change it's layout, but it's becoming a completely new site xD)

today..
Marie learns #flexbox so she can make her website a lot better with it's upcoming rewrite
(originally I wanted to change it's layout, but it's becoming a completely new site xD)

I'm in the train to Düsseldorf. Old-timers who followed me ten years ago on the bird site know what that means: I'll be bored and tooting.

Have a question? Ask away. Especially about #flexbox, right now I have the entire simplified sizing algorithm in my head.

If you ever used a #flexbox flex-shrink value of 2 or higher, this would be an excellent time to tell me about it.

I'm about to write in the #css book that a flex-shrink value other than 1 or 0 is pointless.

Updated the #css #flexbox algorithm page with some notes about min-width and max-width, and especially that one tricky case where strange things happen.

https://quirksmode.org/css/flexbox-algorithm.html

Proven: if a #css #flexbox has a flex-basis and a smaller min-width, the flex-basis behaves as a width: it does not allow flex items to grow to their min-content width, something that is allowed without the min-width

But it's *not* the case that in the presence of the min- or max-width, flex-basis is always interpreted as width - the combination mentioned above is an exception to the rule that min- and max-width work as expected on flex items while leaving flex-basis and width behaviour intact.

@crocedev agreed, flex-box is the highlight of my CSS practices.

Previously everything was a div, now everything is a div with display flex-box.

#flexbox
#css

Day 82 of #100daysofcode was really good and immensely productive for me. Having a day off gave me the chance to take a lot of time for coding today. I started with #GitHub and #Git, then moved on to #Flexbox and positioning. I had an absolute blast playing around with all the new knowledge and can't wait to go deeper tomorrow. So far, the #Academind teaching style is simply great, and I am more than willing to continue with the course.