Responsive mobile-first with SASS and Flexbox

Community feedback

• 

  P

  Dave•5,295

  @dwhensonPosted about 3 years ago

  Hey @samudriawan lovely job here!! 🙌 I love what you've done here and the component looks great on my desktop. There are still some issues on mobile that you might want to look at.

  One other thing to consider is keyboard operation and showing focus states so people know where they are on the page.

  One thing that really helped me with this one was the use of the details and summary HTML elements. These have much of the functionality baked in and can be styled with a little bit CSS work. This also has the advantage of including keyboard functionality and allow the key elements to be focusable automatically.

  If you went with this approach you can also animate the opening and closing pretty simply using some code like:

  details[open] summary ~ * {
  	animation: sweep 0.2s ease-out;
  	will-change: opacity, transform;
  }
  
  @keyframes sweep {
  	0% {
  		opacity: 0;
  		transform: translateY(-1em);
  	}
  
  	100% {
  		opacity: 1;
  		transform: translateY(0);
  	}
  }
  

  The styling of these elements can seem a bit complicated at first, but there are some good resources out there. The page is a bit of a mess but I have found the following page to be a pretty good guide in how to style things, including the triangle indicator: https://webdesign.tutsplus.com/tutorials/explaining-the-details-and-summary-elements--cms-21999

  Great stuff though and keep up the good work!! 👍

  Cheers 👋

  Dave

  Marked as helpful

  1

  ---

  

  Dyota•190

  @samudriawanPosted about 3 years ago

  @dwhenson Thank you very much for your feedback, really appreciate.

  I have checked it on mobile, I will quick fix it. I would love to take a look and learn about that.

  Best regards

  0