Testimonials Layout using CSS Grid + Flex

Community feedback

• 

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  Well, I totally understand your frustration with grid, but just like at your last challenge you really did it right now! That is the power of grid - you create, well, grid, and just tell the elements which cell they should take. That's really powerful and convenient. To achieve the same result with flex you would have to put divs into divs inside divs...

  You even can omit grid-template-row on the mobile version as grid create additional rows on the fly.

  Speaking about classes - templates like this a good way to get familiar with naming conventions. Did you already hear about them? I mean BEM, OOCSS, SUITCSS SMACSS (though the last one for big sites with different areas).

  When I was working on this challenge I used BEM-like approach. I created a four modifier classes represented color themes.

  .testimonials__item--purple {
      position: relative;
      background-color: var(--moderate-violet);
      color: var(--white);
      --border-color: hsl(262, 40%, 82%);
  }
  .testimonials__item--gray {
      background-color: var(--very-dark-grayish-blue);
      color: var(--white);
      --border-color: var(--white);
  }
  
  .testimonials__item--white {
      background-color: var(--white);
      color: var(--very-dark-grayish-blue);
      --border-color: var(--white);
  }
  
  .testimonials__item--dark {
      background-color: var(--very-dark-blackish-blue);
      color: var(--white);
      --border-color: var(--moderate-violet);
  }
  

  As you can see they have color property which is inherited one. So I didn't have to apply color for text inside them. Also I declared variables for color of image border here.

  Definitely learn about different naming approaches and don't be afraid of long classes - it could be helpful especially if you can reuse them.

  So, you really did it great (especially for a guy annoyed by the grid) =)

  And I know, you'll hate me for this... but lists, dude, lists...

  Marked as helpful

  1

  ---

  

  P

  Andy•140

  @AStombaughPosted 4 months ago

  @Alex-Archer-I I saw somebody mention BEM a solution they submitted for the last challenge but I didn't quite understand it. I should probably spend more time learning it so others can better read my code, however. I don't want to make it harder for people to help me improve with code that only really makes sense to me.

  I swear I started with lists on this project! I got to a point where some of my styles weren't applying and when I switched from using lists to articles my styles were applying correctly. I thought maybe the lists had something to do with it which is why I made the switch about midway through my project. :|

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @AStombaugh

  Sorry about list thing =) I wonder why they didn't work. Alas, I can't figure out what the reason was, but I doubt that it was list issue.

  The things like BEM are very useful not only for others to better understand your code (your code is clean though, besides it's always possible to inspect it through dev console). But different naming approaches could help you improve, well... mindset? way of thinking?... I mean it helps you to figure out how to apply styles more effective and convenient. But be prepared to more frustration =) It is something you could grasp only with practice =)

  I'm just now starting to understand the nuances of some approaches even already practice them.

  Guess you already knew that, but fell free to ask anything if you need =) Here, or you can reach me on discord - archerthecat0851.

  1

  

  Alex•3,130

  @Alex-Archer-IPosted 4 months ago

  @AStombaugh

  Oh, by the way, even without BEM you could do this to reduce CSS:

  .violet h2,
  .violet h3,
  .violet h4 {
    color: var(--light-grayish-blue);
  }
  

  1