Thinking in Behaviors, Not Screen Sizes
Strategy

Thinking in Behaviors, Not Screen Sizes


Chase McCoy wrote a nifty post about the “gap problem” when making a grid of items. His argument might be summarized like this: how should we space elements with margins in CSS? He notes that the gap property isn’t quite ready for prime time when it comes to using it with flexbox, like this:

.grid {
  display: flex;
  gap: 10px;
}

Right now, using gap with flexbox is only supported in Firefox and I’ve already caught myself forgetting about that in a few projects. So watch out for that.

Anyway, the part about Chase’s blog post that I love is where he mentions Andy Bell’s technique for creating a responsive layout with no media queries, like this:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

This CSS is doing the following:

  • Make a grid with a 10px gap between each column and row.
  • Each column should have a minimum width (150px).
  • Each column should also be equal width (1fr).
  • The grid should auto-fill as many columns that can fit.

The nifty thing about all this is that our grid is now effectively responsive because of minmax — if you resize the browser, then the grid will snap down into fewer columns, just like this:

No media queries at all! Although sure, there’s a few other ways that you could get this to work but I think this is neat not just because we’re avoiding media queries — instead, it’s because it teaches us to think in a new way when designing and building components.

Chase continues:

With this technique, instead of using breakpoints to specify the screen size where your items should stack, you specify the minimum size an element should be before it stacks. I like this because it encourages developers to think about responsive design in terms of behaviors instead of screen sizes.

“Behaviors instead of screen sizes” is such a great way to think about component design! A lot of the problems I’ve encountered when making components for a design system is when I’ve been thinking about screen sizes — mobile, tablet, desktop, etc. — and trying to make those components fit within those constraints.

Thinking in behaviors is always more effective because there are so many things that can impact a component beyond what screen or device width we’re working with. Perhaps we want that component to fit inside another component. Or we want to align some helper text to the side of it for comparison.

Either way, thinking about behaviors instead of screen sizes isn’t really going to be fully impossible until we have container queries, as Chris writes:

Container queries are always on the top of the list of requested improvements to CSS. The general sentiment is that if we had container queries, we wouldn’t write as many global media queries based on page size. That’s because we’re actually trying to control a more scoped container, and the only reason we use media queries for that now is because it’s the best tool we have in CSS. I absolutely believe that.



Source link

How do i get similar results with SVG on a website
Strategy

How do i get similar results with SVG on a website


How do i get similar results with SVG on a website

Hi everyone, I don't know if this is the right question to ask here. Are there tools to make SVGs, and overlap them like shown in the image? I appreciate your help

https://preview.redd.it/ycn9f2t4u1s41.png?width=735&format=png&auto=webp&s=f69a42c7b094e6fb04fbc5da706b017cf0f3a2b6

submitted by /u/randomBlackbox_
[comments]



Source link

Post image
Strategy

How does source material rights actually work? : graphic_des…


I keep seeing great artists doing excellent stuff on social media by clearly bastardizing pre-existing work – while some of them actually sell their creations too. Or take for example TeePublic, which allows anybody to upload their T-shirt designs, but clearly isn’t vetting said designs for rights violation, because the site is full of them.
I’m just trying to understand what are the rules for this game before joining it.

Any pointers or thoughts?

Post image



Source link

Post image
Strategy

Advice for concept explanation in our Nike project : graphic…


The Studio made a campaign for Nike Football in Perú, in the concept we tried to insert a Peruvian Colonial tradition with the Nike brand (mostly related to paintings, art and scriptures). The whole concept is in the link. Could you please tell us if the concept explanation is understandable? Due to language barriers sometimes we don’t realize when something it’s completely explained, or at least well summarized. Maybe is still not well explained for foreigners… Feel free to leave a comment of anything 😊 https://www.behance.net/gallery/95115275/Official-Nike-Alianza-Lima-2019-Third-kit

Post image



Source link

Maggie Steber stretching in solarium
Strategy

Shuttered: For Maggie Steber, Self-Isolation Is a Secret Gar…


This is the first installment in a continuing project in which WIRED’s photo editors speak with photographers about their experiences during Covid-19 self-isolation. The following interview has been edited for clarity.

Maggie Steber’s career has spanned 40 years and taken her to 70 countries. Her portfolio includes photographs covering everything from war to fashion to science. This coronavirus pandemic, though, has her self-isolated in her Miami, Florida home (along with two feline roommates) where she’s focusing on a long-term project titled The Secret Garden of Lily LaPalma. Lily is Steber’s alter ego—and the photo series is her story of self-isolation. Lily leads a very secret life in her garden, Steber says, so this moment of keeping to oneself gives her great joy. Three years ago, the photographer received a very generous grant from the John Simon Guggenheim Foundation in support of this project, but, Steber notes, Lily doesn’t care if anyone likes her work. She makes art for herself.

Anna Alexander: What are you doing these days to nourish your photo soul?

Maggie Steber: Two things: Making new photographs for my Guggenheim project, and looking through photo books from my collection. Oh, and also editing a lot of work still in slides that I never had the time to edit! So three things, really. The editing of older material is thrilling, but also sometimes depressing because some of it is so bad. The making of new photos for the secret garden project, though, is always thrilling.

Have you been organizing your archive or is it already super put-together?

Organized is not in my vocabulary. One personal silver lining that has emerged from this moment—for which I am terribly grateful—is that, for the first time in years, I have had time to look at contact sheets and select slides. It’s rather wonderful, sort of like a mini-slide show that takes me back to the earlier years of my career.

“During self-isolation, I find that exercising some way every day keeps my spirits up” Steber says. “And because I’m at home and eating more, it also helps me not gain weight.”Photograph: Maggie Steber

Do you find yourself more involved with the art community now that you’re sheltered in place?

I find myself more involved with friends in general, from both within and beyond the art community. I am, perhaps, most involved with my own art community, so to speak, which is my imagination. Believe me, it’s a very lively one.

With regard to keeping up with people, how are you feeling toward social media now, as compared to before the pandemic?



Source link

Post image
Strategy

Most optimal way to hold certain type of data in JSON file /…


Post image

Data

I note my everyday actions on paper. Lately I started to work with React, and as a front end guy I’m not sure at all how should I approach my future database structure. For now I’m trying to convert my existing data into JSON file, and I wonder which path should I follow?

{
"date": "2020-01-01T12:00:00.000Z",
"action": [
            {
"workout": true,
"alcohol": true,
"dev": true,
"meditation": true,
"cigarettes": true,
"biking": true
            }
         ]
}

or maybe something like this would be more optimal?

{
"workout": ["2020-01-01T12:00:00.000Z", "2020-01-02T12:00:00.000Z", "2020-01-03T12:00:00.000Z"]
}

My backend skills are not that good – if someone could help me with picking the right direction, it would mean a lot to me. Maybe I’m missing something and my approach won’t really work on bigger scale, and I would love to know it before I’ll put a lot of my time into it.



Source link

Post image
Strategy

Advice about Graphic Design : graphic_design


I am 16 and I have question as it pertains to the Graphic Design industry. I have the opportunity to get my ACA but I don’t if its worth it. Is it better to just go to college for Graphic Design? Or to do both? My Graphic Design teacher is supposed to be giving me more information about the technicalities but I wanted more information and advice from other experienced people. I attached an example of my work from earlier this year to this post and am curious as to wether its any good. I created the galaxy and added double exposure. I am just trying to figure out what my best options are because I really fell in love with GD and I want to get as much as I can out of it as well. Any advice is helpful even if it doesn’t exactly pertain to ACA or college. Thank you!

Post image

(My work from earlier this year)



Source link