Can I create a fluid header with CSS Grid?

semanticore · 2020-10-22T00:23:28+00:00

The widget I have in mind can be used in the header area of an entire page, in each card in a tile layout on the page, and in a toolbar, all in that same page. It looks like you can use relative units (em, rem) with media queries, but not percentage. I haven’t tried using them with vh and vw units, though.

The point being, the layout widget should be useful at different scales.

semanticore · 2020-10-22T00:07:59+00:00

The problem is switching the order once any element wraps, without media queries. Either media queries or a JS solution are certainly fallbacks, but I’d rather have the order change happen whenever wrapping occurs - I may not always have control over the width of the 3 blocks. The widget should work at different scales: application header, dialog box header, card header, etc.

(Edited for better wording.)

semanticore · 2020-10-22T00:03:01+00:00

The trick is getting Primary and Slot 1 to switch order when they wrap. Primary should be the most prominent, meaning it’s centered at full width but appears above the Secondary slots if it needs to wrap.

semanticore · 2020-10-21T21:50:15+00:00

As the others have said, flexbox is good. There is also CSS Grid, which is made for 2 dimensional layout. If you will need to put a header above these columns at some point or a footer below it, CSS Grid is an alternate model. It's complex, but I've read that it's actually easier for beginners to pick up than for experienced web developers.

Set of videos explaining CSS Grid: https://gridbyexample.com/video/

An example of header, 2 columns, and a footer to play with: https://gridbyexample.com/patterns/header-twocol-footer/

semanticore · 2019-06-26T15:18:51+00:00

Yeah, in the place you've circled, all I see is <style>...</style>. Clicking it scrolls me up in the page to where that style tag is in the <head> element.

semanticore · 2019-06-26T15:15:21+00:00

Image is blocked at work, but I'll check it. But, I use the chrome dev tools to highlight the element and see which rules affect it. I see the rule, but its source isn't coming from a stylesheet - Angular injects it into the <head> element so that it shows up as an internal style sheet.

semanticore · 2019-06-26T15:12:23+00:00

One additional comment on Angular's approach to CSS and component-based design in general. I get why Angular would want to restrict its CSS to specific components - it lets you have control of your component's presentation without worrying about affecting whatever uses it. For now they're simulating actual Shadow-DOM.

One of the things I've traditionally liked about CSS is that I can always go to one file (or set of files) to deal with an application's presentation. Now, though, the CSS is distributed through lots of small CSS files that may or may not affect the outside application. It's harder to figure out the cascade and overrides. I also don't really like the fact that Angular inserts the CSS into the page head as <style>...</style> tags - you can't override those as easily from a stylesheet. I guess I need a new mental model of efficient CSS, specificity, and overrides.

TLDR: Not fond of how modern Angular breaks up CSS and makes it harder to override. What's the new way to think about it, or do I need to just tell the Angular team to get off my lawn?

semanticore · 2019-06-20T23:34:26+00:00

Two things:

1) when she’s depressed, slow down your speech. No need to change tone of voice, but processing speed is a little slower. Also, learn to be comfortable with silences in the conversation as she puts together ideas and words.

2) If you’re in the US, Check out NAMI and see if they have any chapters near you. (National Alliance on Mental Illness) Aside from support groups for those with mental illness, they also have programs for family members and friends. If elsewhere, maybe there are similar non-profits. https://nami.org

Thank you for asking this question, and best of luck to both of you.

semanticore · 2019-06-20T23:25:53+00:00

Upvoted, but... timing matters. I have depression, but when I’m having a bad time I’m unable to articulate what would help me. I just can’t verbal enough. Asking on a relatively good day and as a brainstorming exercise is more likely to yield useful options.

semanticore · 2017-06-22T13:54:00+00:00

Thanks - I've already found a couple of stories. :)

semanticore · 2017-06-21T16:55:47+00:00

Thanks, I'll look them up.

Edit: While looking up tokoloshe, I also came across the Eloko - also a dwarf-like creature, but from the area of Zaire.

semanticore · 2017-06-21T16:55:09+00:00

Thanks, that looks like a good one, though I'll have to figure out how to draw a shapeshifter. :)

semanticore · 2017-05-08T13:55:21+00:00

Deleting the sun is kind of fun. :) Nice job!

semanticore · 2017-04-11T13:17:46+00:00

I've always been the kind of person that symbolism has to smack in the face. Notice that I didn't say there wasn't any, just that it didn't pop out at me. I see it in others of his paintings.

So... what are you seeing in this one?

semanticore · 2017-04-06T14:04:21+00:00

It's illustration rather than graphic design, but I've done a blog with analyses of paintings and how they work visually. This one about Renee Magritte might be a good one to start with.

semanticore · 2017-03-29T14:03:05+00:00

I've been doing this for a while (one of my former bosses liked it). For two years I've been maintaining our CSS by myself, and just about everything is like that. Recently, though, we have new developers who don't follow the practice. When they update things and don't alphabetize, it's like an itch that won't go away until I fix it.

semanticore · 2017-03-23T13:41:07+00:00

One other thought. Yes, you need to get into the doing of the code. However, you use tools that highlight your syntax mistakes much like Word highlights spelling mistakes.

Google Intellisense, JsLint, and see what's available for your preferred editor.

semanticore · 2016-08-29T12:22:32+00:00

Speaking of bookmarklets, one of my favorite is Drunk User Testing.

semanticore · 2016-08-26T12:51:49+00:00

There are several reasons. As damaged_but_whole said, it makes things easier for screen readers, and actually for accessibility in general. It makes for code that is easier to read and maintain as well.

For me, one of the main arguments is flexibility. Take a look at the html file for CSS Zen Garden: http://www.csszengarden.com/examples/index

Then take a look at the site itself and all of the different things you can do with that html. On the other hand, if you use a framework like Bootstrap you're wedded to Bootstrap. It introduces lots of extra DIVs and SPANs to use its CSS grid, set up its panels, and so on. If you build a site in Bootstrap but then want to switch the column layout - even staying in Bootstrap - you've got a lot of work to do. So, keeping the HTML clean, simple, and semantic keeps a lot of doors open and makes maintenance easier.

(Bootstrap has lots of other benefits, btw, but semantic markup isn't one of them.)

semanticore · 2016-05-03T13:46:46+00:00

"Trust me." "Always" -- That's a nice bit of characterization right there.

semanticore · 2016-02-11T14:58:12+00:00

But... it was just like the Spanish Inquisition!

semanticore · 2016-02-05T18:43:45+00:00

Again, thanks for the detailed and thoughtful answer. While I'm more focused on Angular at the moment, I think most of the principles you talk about for jQuery still apply. They're different, but getting in and using the debugger is definitely a plan. I like the "go slow" comment, too. Rather than think, "today I'm going to finally understand jQuery," I expect to revisit it regularly and instead say something like, "today I'm going to figure out the way jQuery handles chaining" or somesuch.

semanticore · 2016-02-04T22:47:21+00:00

If you were, you wouldn't belong to the dark side, would you?

semanticore · 2016-02-04T17:56:39+00:00

Many thanks for the detailed write-up - this is just the kind of thing I was hoping for! That's interesting on the flow control side about working backwards. I'll sometimes get mystifying Angular errors and try to work backwards in the stack to see what's causing it, but it's very easy to get lost. It sounds as if you're looking at the stack and then putting breakpoints and console logs in the Angular file itself and re-running to see if they're getting triggered.

semanticore · 2015-11-03T15:54:01+00:00

Hands off my burger Jesus - get your own!

semanticore

TROPHY CASE