Fylo Data Storage Component - Mobile-First / CSS Grid

Community feedback

• 

  Ahmed El_Bald•1,020

  @Ahmed-Elbald

  Posted over 1 year ago

  Alright,

  I just want you to know one thing: Before you try to implement the design, consider the markup. Before you write your HTML, think about what each element represents.

  In my opinion, the whole design consists of two things: Information about my storage and some buttons to import and export this data. Thus you should consider the following when writing your markup:

  • In your .controls-box, you can't use divs where you must use buttons. Why? because they are controls, they have functionality:

     // THIS IS WRONG
     <div class="document">
       <img src="images/icon-document.svg" alt="" aria-hidden="true">
     </div>
    
     // DO THIS
     <button type="button">
       <img src="images/icon-document.svg" alt="Save your data">
     </button>
    

  • It would be great if you could present storage information using a description list (dl). I know It would be hard to match that with the design. But I would do that under any cost using the .visually-hidden class and the aria-hidden attribute.

  22

  Marked as helpful