Responsive QR Code Component Solution Using CSS Flexbox Layout Module

Community feedback

• 

  Aman Singh Bhogal•1,010

  @asbhogalPosted over 1 year ago

  Hi Kanishka,

  Great work! In answer to your question, flexbox is generally the best modern layout method to use for flexible responsive structures. Grid would be used for content where you want better control of their layout using columns and rows. This article explains it quite well Link as well as this video by Kevin Powell which demonstrates in practice when you would use which Link (NB. You can also combine them in an application, it all depends on the use-case)

  Also I've had a look at your code and semantically you could change this to just have the child elements as div and img inside the main tag, you don't necessarily need the article as this serves a different purpose Link

  Another thing - make sure to always locally host your fonts for privacy and performance reasons. Here's another good video which shows how to practically do this Link You can also download your typeface using Fontsource npm packages, then import the weights you require and reference them in your elements. Super easy and convenient Link

  Hope this helps!

  Marked as helpful

  0

  ---

  

  Kanishka Priyashantha•690

  @kanishkasubashPosted over 1 year ago

  Hi Aman,

  Seems very helpful, will definitely check it out. Thanks a lot.

  0

  

  Kanishka Priyashantha•690

  @kanishkasubashPosted over 1 year ago

  When I consider self-hosting fonts, I made some changes to my source code bellow.

  $fonts: (
    "OutfitRegular": "../assets/fonts/Outfit-Regular",
    "OutfitBold": "../assets/fonts/Outfit-Bold" 
  );
  
  @mixin font($font-family, $font-file, $font-weight) {
      @font-face {
          font-family: $font-family;
          font-weight: $font-weight;
          font-style: normal;        
          src: url(map-get($fonts, $font-file) + '.woff') format('woff'),
                  url(map-get($fonts, $font-file) + '.woff2') format('woff2');
      }
  }
  
  @include font('Outfit', OutfitRegular, 400);
  @include font('Outfit', OutfitBold, 700);
  
  :root {
      --font-outfit: 'Outfit', sans-serif;
  }
  
  p {
      font-family: var(--font-outfit);
      font-size: 1rem;
      font-weight: 400;
  }
  

  0